htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Re-design RfC page and make long texts collapsible

Browse Source
This commit is contained in:
Maximilian Grundke
2017-09-27 15:04:20 +02:00
parent 5498269aec
commit 92e523b030
4 changed files with 119 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
app/assets/stylesheets/request-for-comments.css.scss
View File

@ -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);
}
}

17
app/views/request_for_comments/show.html.erb
View File

@ -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) {

2
config/locales/de.yml
View File

@ -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"

2
config/locales/en.yml
View File

@ -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