Re-design RfC page and make long texts collapsible

app/assets/stylesheets/request-for-comments.css.scss

@@ -1,7 +1,98 @@
-#commentitor {
-    margin-top: 2rem;
-    height: 600px;
-    background-color:#f9f9f9
+.rfc {
+
+  h5 {
+    color: #008CBA;
+  }
+
+  .text {
+    font-size: larger;
+  }
+
+  .text.collapsed {
+    max-height: 50px;
+    overflow-y: hidden;
+  }
+
+  .collapse-button {
+    position: relative;
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+
+  .description {
+
+    .text {
+      padding: 5px;
+      background-color: #FAFAFA;
+      border: 1px solid #CCCCCC;
+    }
+
+  }
+
+  .question {
+
+    .text {
+      font-weight: bold;
+    }
+
+  }
+
+  .testruns {
+
+    .text {
+      padding: 5px;
+      background-color: #FAFAFA;
+      border: 1px solid #CCCCCC;
+    }
+
+    pre {
+      background-color: inherit;
+      border: none;
+    }
+  }
+
+}
+
+.testrun-assess-results {
+
+  display: flex;
+
+  .result {
+    margin-right: 10px;
+    width: 10px;
+    height: 10px;
+  }
+
+  .passed {
+    border-radius: 50%;
+    background-color: #8efa00;
+    -webkit-box-shadow: 0 0 11px 1px rgba(44,222,0,1);
+    -moz-box-shadow: 0 0 11px 1px rgba(44,222,0,1);
+    box-shadow: 0 0 11px 1px rgba(44,222,0,1);
+  }
+
+  .unknown {
+    border-radius: 50%;
+    background-color: #ffca00;
+    -webkit-box-shadow: 0 0 11px 1px rgb(255, 202, 0);
+    -moz-box-shadow: 0 0 11px 1px rgb(255, 202, 0);
+    box-shadow: 0 0 11px 1px rgb(255, 202, 0);
+  }
+
+  .failed {
+    border-radius: 50%;
+    background-color: #ff2600;
+    -webkit-box-shadow: 0 0 11px 1px rgba(222,0,0,1);
+    -moz-box-shadow: 0 0 11px 1px rgba(222,0,0,1);
+    box-shadow: 0 0 11px 1px rgba(222,0,0,1);
+  }
+
+}
+
+#mark-as-solved-button {
+  margin-top: 20px;
 }
 
 #thank-you-container {
@@ -11,6 +102,10 @@
   border: solid lightgrey 1px;
   background-color: rgba(20, 180, 20, 0.2);
   border-radius: 4px;
+
+  button {
+    margin-right: 10px;
+  }
 }
 
 #thank-you-note {
@@ -18,6 +113,12 @@
   height: 200px;
 }
 
+#commentitor {
+    margin-top: 2rem;
+    height: 600px;
+    background-color:#f9f9f9
+}
+
 .ace_tooltip {
   display: none !important;
 }
@@ -151,61 +252,3 @@ input#subscribe {
   color: #008cba;
   margin-top: 10px;
 }
-
-.rfc {
-
-  h5 {
-    text-decoration: underline;
-  }
-
-  .text {
-    font-size: larger;
-  }
-
-  .question {
-    display: flex;
-    align-items: baseline;
-
-    .text {
-      margin-left: 10px;
-    }
-
-  }
-
-}
-
-.testrun-assess-results {
-
-  display: flex;
-
-  .result {
-    margin-right: 10px;
-    width: 10px;
-    height: 10px;
-  }
-
-  .passed {
-    border-radius: 50%;
-    background-color: #8efa00;
-    -webkit-box-shadow: 0 0 11px 1px rgba(44,222,0,1);
-    -moz-box-shadow: 0 0 11px 1px rgba(44,222,0,1);
-    box-shadow: 0 0 11px 1px rgba(44,222,0,1);
-  }
-
-  .unknown {
-    border-radius: 50%;
-    background-color: #ffca00;
-    -webkit-box-shadow: 0 0 11px 1px rgb(255, 202, 0);
-    -moz-box-shadow: 0 0 11px 1px rgb(255, 202, 0);
-    box-shadow: 0 0 11px 1px rgb(255, 202, 0);
-  }
-
-  .failed {
-    border-radius: 50%;
-    background-color: #ff2600;
-    -webkit-box-shadow: 0 0 11px 1px rgba(222,0,0,1);
-    -moz-box-shadow: 0 0 11px 1px rgba(222,0,0,1);
-    box-shadow: 0 0 11px 1px rgba(222,0,0,1);
-  }
-
-}

app/views/request_for_comments/show.html.erb

@@ -12,21 +12,21 @@
         testruns = Testrun.where(:submission_id => @request_for_comment.submission)
       %>
     <%= user.displayname %> | <%= @request_for_comment.created_at.localtime %>
-
   </p>
   <div class="rfc">
     <div class="description">
       <h5>
-        <%= t('activerecord.attributes.exercise.description') %>:
+        <%= t('activerecord.attributes.exercise.description') %>
       </h5>
       <div class="text">
+        <span class="fa fa-chevron-up collapse-button"></span>
         <%= render_markdown(@request_for_comment.exercise.description) %>
       </div>
     </div>
 
     <div class="question">
       <h5>
-        <%= t('activerecord.attributes.request_for_comments.question')%>:
+        <%= t('activerecord.attributes.request_for_comments.question')%>
       </h5>
       <div class="text">
         <%= @request_for_comment.question or t('request_for_comments.no_question')%>
@@ -39,13 +39,14 @@
 
     <!-- check cause: assess/run; display success, output (if any), make collapsible-->
     <% if testruns.size > 0 %>
-      <div class="testrun-container">
+      <div class="testruns">
         <% output_runs = testruns.select { |run| run.cause == 'run' } %>
         <% if output_runs.size > 0 %>
           <h5><%= t('request_for_comments.runtime_output') %></h5>
           <div class="testrun-output text">
+            <span class="fa fa-chevron-up collapse-button"></span>
             <% output_runs.each do |testrun| %>
-                <p><%= testrun.try(:output) or t('request_for_comments.no_output') %></p>
+              <pre><%= testrun.try(:output) or t('request_for_comments.no_output') %></pre>
             <% end %>
           </div>
         <% end %>
@@ -142,6 +143,12 @@ also, all settings from the rails model needed for the editor configuration in t
     thankYouContainer.hide();
   });
 
+  $('.text > .collapse-button').on('click', function(e) {
+    $(this).toggleClass('fa-chevron-down');
+    $(this).toggleClass('fa-chevron-up');
+    $(this).parent().toggleClass('collapsed');
+  });
+
   // set file paths for ace
   var ACE_FILES_PATH = '/assets/ace/';
   _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {