Added toggleable guidance/comments section

DMPRoadmap · Mar 8, 2022 · bb5941e · bb5941e
1 parent 049500f
commit bb5941e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/app/assets/stylesheets/blocks/_question_form.scss b/app/assets/stylesheets/blocks/_question_form.scss
@@ -0,0 +1,35 @@
+.question-body {
+    display: flex;
+    padding: 15px 0;
+    .question-section {
+        flex: 8;
+        position: relative;
+        .toggle-guidance-section {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: $color-grey-darker;
+            color: $color-white;
+            padding: 10px 5px;
+            cursor: pointer;
+
+            text-orientation: mixed;
+            writing-mode: vertical-rl;
+            &.disabled {
+                background-color: $color-muted;
+                cursor: not-allowed;
+            }
+        }
+        .question-form {
+            padding-right: 50px;
+            padding-top: 10px;
+        }
+    }
+
+    .guidance-section {
+        flex: 4;
+        border-left: 5px solid $color-grey-darker;
+        padding-left: 5px;
+    }
+
+}
diff --git a/app/javascript/src/answers/edit.js b/app/javascript/src/answers/edit.js
@@ -185,4 +185,13 @@ $(() => {
   }
 
   datePicker();
+
+  // Clicking the 'Comments & Guidance' div should toggle the guidance & comments section
+  $(document).on('click', '.toggle-guidance-section', (e) => {
+    const target = $(e.currentTarget);
+    target.parents('.question-body').find('.guidance-section').toggle();
+    target.find('span.fa-chevron-right, span.fa-chevron-left')
+      .toggleClass('fa-chevron-right')
+      .toggleClass('fa-chevron-left');
+  });
 });
diff --git a/app/views/phases/_edit_plan_answers.html.erb b/app/views/phases/_edit_plan_answers.html.erb
@@ -65,9 +65,18 @@
                     answer = Answer.new({ plan: plan, question: question })
                   end
                 %>
-                <div class="row">
-                  <div class="col-md-8">
+                <div class="question-body">
+                  <div class="question-section">
                     <!-- Answer Section -->
+                    <% 
+                      guidance_comments_opened = Rails.configuration.x.application.guidance_comments_opened
+                    %>
+                    <% if Rails.configuration.x.application.guidance_comments_toggleable %>
+                      <div class="toggle-guidance-section">
+                        <span class="fa fa-chevron-<%= guidance_comments_opened ? 'right': 'left' %>"></span> 
+                        <span><%= _('Comments & Guidance') %></span>
+                      </div>
+                    <% end %>
                     <div class="question-form">
                       <div id="<%= "answer-locking-#{question.id}" %>"
                         class="answer-locking">
@@ -87,7 +96,8 @@
                       </div>
                     </div>
                   </div>
-                  <div class="col-md-4">
+                  <% style = guidance_comments_opened ? '' : 'display: none' %>
+                  <div class="guidance-section" style="<%= style %>">
                     <!-- Guidances and notes partial view -->
                     <%= render partial: '/phases/guidances_notes', locals: {
                       plan: plan,

diff --git a/config/initializers/_dmproadmap.rb b/config/initializers/_dmproadmap.rb
@@ -122,6 +122,10 @@ class Application < Rails::Application
     config.x.application.require_contributor_name = false
     config.x.application.require_contributor_email = false
 
+    # Defines if Guidances/Comments in toggleable & if it's opened by default
+    config.x.application.guidance_comments_toggleable = true
+    config.x.application.guidance_comments_opened = true
+
     # ------------------- #
     # SHIBBOLETH SETTINGS #
     # ------------------- #