From 92e523b0303a0c02fc57406b0a250818c756433c Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Wed, 27 Sep 2017 15:04:20 +0200 Subject: [PATCH] Re-design RfC page and make long texts collapsible --- .../stylesheets/request-for-comments.css.scss | 167 +++++++++++------- app/views/request_for_comments/show.html.erb | 17 +- config/locales/de.yml | 2 +- config/locales/en.yml | 2 +- 4 files changed, 119 insertions(+), 69 deletions(-) diff --git a/app/assets/stylesheets/request-for-comments.css.scss b/app/assets/stylesheets/request-for-comments.css.scss index a0418e48..0365c335 100644 --- a/app/assets/stylesheets/request-for-comments.css.scss +++ b/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); - } - -} diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb index 4ac65629..a95970f6 100644 --- a/app/views/request_for_comments/show.html.erb +++ b/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 %> -

- <%= t('activerecord.attributes.exercise.description') %>: + <%= t('activerecord.attributes.exercise.description') %>
+ <%= render_markdown(@request_for_comment.exercise.description) %>
- <%= t('activerecord.attributes.request_for_comments.question')%>: + <%= t('activerecord.attributes.request_for_comments.question')%>
<%= @request_for_comment.question or t('request_for_comments.no_question')%> @@ -39,13 +39,14 @@ <% if testruns.size > 0 %> -
+
<% output_runs = testruns.select { |run| run.cause == 'run' } %> <% if output_runs.size > 0 %>
<%= t('request_for_comments.runtime_output') %>
+ <% output_runs.each do |testrun| %> -

<%= testrun.try(:output) or t('request_for_comments.no_output') %>

+ 
<%= testrun.try(:output) or t('request_for_comments.no_output') %>
<% end %>
<% 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) { diff --git a/config/locales/de.yml b/config/locales/de.yml index 88a3b1c0..f2a080de 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -494,7 +494,7 @@ de: Um Kommentare zu einer Programmzeile hinzuzufügen, kann einfach auf die jeweilige Zeilennummer auf der linken Seite geklickt werden.
Es öffnet sich ein Textfeld, in dem der Kommentar eingetragen werden kann.
Mit "Kommentar abschicken" wird der Kommentar dann gesichert und taucht als Sprechblase neben der Zeile auf. - howto_title: 'Anleitung:' + howto_title: 'Anleitung' index: get_my_comment_requests: Meine Kommentaranfragen all: "Alle Kommentaranfragen" diff --git a/config/locales/en.yml b/config/locales/en.yml index 5d9b78d8..0542bfd4 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -494,7 +494,7 @@ en: To leave comments to a specific code line, click on the respective line number.
Enter your comment in the popup and save it by clicking "Comment this".
Your comment will show up next to the line number as a speech bubble symbol. - howto_title: 'How to comment:' + howto_title: 'How to comment' index: all: All Requests for Comments get_my_comment_requests: My Requests for Comments