Re-design RfC page and make long texts collapsible
This commit is contained in:
Maximilian Grundke
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -494,7 +494,7 @@ de:
|
||||
Um Kommentare zu einer Programmzeile hinzuzufügen, kann einfach auf die jeweilige Zeilennummer auf der linken Seite geklickt werden. <br>
|
||||
Es öffnet sich ein Textfeld, in dem der Kommentar eingetragen werden kann. <br>
|
||||
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"
|
||||
|
||||
@ -494,7 +494,7 @@ en:
|
||||
To leave comments to a specific code line, click on the respective line number. <br>
|
||||
Enter your comment in the popup and save it by clicking "Comment this". <br>
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user