From 7a0c7389d4402635b593113cfc74a57d7e491a49 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Sun, 24 Sep 2017 11:15:05 +0200
Subject: [PATCH] Refactor RfC UI; decouple style from structure

---
 .../stylesheets/request-for-comments.css.scss |  22 ++++
 app/views/request_for_comments/show.html.erb  | 108 ++++++++++--------
 2 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss
index e88ed573..a0418e48 100644
--- a/app/assets/stylesheets/request-for-comments.css.scss
+++ b/app/assets/stylesheets/request-for-comments.css.scss
@@ -152,6 +152,28 @@ input#subscribe {
   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;
diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb
index 78f9accc..0fbeef37 100644
--- a/app/views/request_for_comments/show.html.erb
+++ b/app/views/request_for_comments/show.html.erb
@@ -14,55 +14,67 @@
     <%= user.displayname %> | <%= @request_for_comment.created_at.localtime %>
 
   </p>
-
-  <h5>
-    <u><%= t('activerecord.attributes.exercise.description') %>:</u> <%= render_markdown(@request_for_comment.exercise.description) %>
-  </h5>
-
-  <h5>
-    <% if @request_for_comment.question and not @request_for_comment.question == '' %>
-        <u><%= t('activerecord.attributes.request_for_comments.question')%>:</u>  "<%= @request_for_comment.question %>"
-    <% else %>
-        <u><%= t('activerecord.attributes.request_for_comments.question')%>:</u>  <%= t('request_for_comments.no_question') %>
-    <% end %>
-  </h5>
-
-  <% if policy(@request_for_comment).mark_as_solved? and not @request_for_comment.solved? %>
-      <%= render('mark_as_solved') %>
-  <% end %>
-
-  <% if @current_user.admin? && user.is_a?(ExternalUser) %>
-    <%= render('admin_menu') %>
-  <% end %>
-
-  <h5>
-    <u><%= t('request_for_comments.howto_title') %></u><br> <%= render_markdown(t('request_for_comments.howto')) %>
-  </h5>
-
-  <!-- check cause: assess/run; display success, output (if any), make collapsible-->
-  <% if testruns.size > 0 %>
-    <div class="testrun-container">
-      <% 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">
-          <% output_runs.each do |testrun| %>
-            <p><%= testrun.try(:output) or t('request_for_comments.no_output') %></p>
-          <% end %>
-        </div>
-      <% end %>
-
-      <% assess_runs = testruns.select { |run| run.cause == 'assess' } %>
-      <% if assess_runs.size > 0 %>
-        <h5><%= t('request_for_comments.test_results') %></h5>
-        <div class="testrun-assess-results">
-          <% assess_runs.each do |testrun| %>
-            <div class="result <%= testrun.passed ? 'passed' : 'failed' %>" title="<%= testrun.output %>"></div>
-          <% end %>
-        </div>
-      <% end %>
+  <div class="rfc">
+    <div class="description">
+      <h5>
+        <%= t('activerecord.attributes.exercise.description') %>:
+      </h5>
+      <div class="text">
+        <%= render_markdown(@request_for_comment.exercise.description) %>
+      </div>
     </div>
-  <% end %>
+
+    <div class="question">
+      <h5>
+        <%= t('activerecord.attributes.request_for_comments.question')%>:
+      </h5>
+      <div class="text">
+        <%= @request_for_comment.question or t('request_for_comments.no_question')%>
+      </div>
+    </div>
+
+    <% if policy(@request_for_comment).mark_as_solved? and not @request_for_comment.solved? %>
+        <%= render('mark_as_solved') %>
+    <% end %>
+
+    <% if @current_user.admin? && user.is_a?(ExternalUser) %>
+        <%= render('admin_menu') %>
+    <% end %>
+
+    <div class="howto">
+      <h5>
+        <%= t('request_for_comments.howto_title') %>
+      </h5>
+      <div class="text">
+        <%= render_markdown(t('request_for_comments.howto')) %>
+      </div>
+    </div>
+
+    <!-- check cause: assess/run; display success, output (if any), make collapsible-->
+    <% if testruns.size > 0 %>
+      <div class="testrun-container">
+        <% 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">
+            <% output_runs.each do |testrun| %>
+                <p><%= testrun.try(:output) or t('request_for_comments.no_output') %></p>
+            <% end %>
+          </div>
+        <% end %>
+
+        <% assess_runs = testruns.select { |run| run.cause == 'assess' } %>
+        <% if assess_runs.size > 0 %>
+          <h5><%= t('request_for_comments.test_results') %></h5>
+          <div class="testrun-assess-results">
+            <% assess_runs.each do |testrun| %>
+                <div class="result <%= testrun.passed ? 'passed' : 'failed' %>" title="<%= testrun.output %>"></div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
 </div>
 <hr>