Style exercise description as a card and display an additional (more obvious) toggle

app/assets/javascripts/editor/editor.js.erb

@@ -591,17 +591,16 @@ configureEditors: function () {
   },
 
   initializeDescriptionToggle: function() {
-    $('#exercise-headline').on('click',this.toggleDescriptionPanel.bind(this))
+    $('#exercise-headline').on('click', this.toggleDescriptionPanel.bind(this));
+    $('a#toggle').on('click', this.toggleDescriptionPanel.bind(this));
   },
 
   toggleDescriptionPanel: function() {
-    $('#description-panel').toggleClass('description-panel-collapsed');
-    $('#description-panel').toggleClass('description-panel');
-    $('#description-symbol').toggleClass('fa-chevron-down');
-    $('#description-symbol').toggleClass('fa-chevron-right');
-    // resize ace editors
+    $('#description-panel').toggleClass('description-panel-collapsed').toggleClass('description-panel');
+    $('#description-symbol').toggleClass('fa-chevron-down').toggleClass('fa-chevron-right');
+    var toggle = $('a#toggle');
+    toggle.text(toggle.text() == toggle.data('hide') ? toggle.data('show') : toggle.data('hide'));
     this.resizeAceEditors();
-
   },
 
     /**

app/assets/stylesheets/exercises.css.scss

@@ -12,6 +12,34 @@ input[type='file'] {
   font-family: monospace;
 }
 
+.exercise {
+  border-radius: 3px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
+  padding: 1px 10px 1px 10px;
+  margin-bottom: 10px;
+
+  a#toggle {
+    margin-bottom: 5px;
+    float: right;
+  }
+
+  a#toggle:before {
+    content: "(";
+  }
+
+  a#toggle:after {
+    content: ")";
+  }
+
+  h1#exercise-headline {
+    margin: 10px 0 10px 0;
+  }
+
+  .lead.description-panel-collapsed {
+    margin: 0;
+  }
+}
+
 // Graph Settings
 
 .axis path {

app/views/exercises/implement.html.slim

@@ -1,14 +1,17 @@
 .row
   #editor-column.col-md-12
-    div
-      span.badge.pull-right.score
+    .exercise.clearfix
+      div
+        span.badge.pull-right.score
 
-      h1 id="exercise-headline"
-        i class="fa fa-chevron-down" id="description-symbol"
-        = @exercise
+        h1 id="exercise-headline"
+          i class="fa fa-chevron-down" id="description-symbol"
+          = @exercise.title
 
-    #description-panel.lead.description-panel
-      = render_markdown(@exercise.description)
+      #description-panel.lead.description-panel
+        = render_markdown(@exercise.description)
+
+      a#toggle href="#" data-show=t('shared.show') data-hide=t('shared.hide') = t('shared.hide')
 
     #alert.alert.alert-danger role='alert'
       h4 = t('.alert.title')

config/locales/de.yml

@@ -695,6 +695,7 @@ de:
     upload_file: Datei hochladen
     time:
       before: "%{time} zuvor"
+    hide: "Verstecken"
   submissions:
     causes:
       autosave: Autosave

config/locales/en.yml

@@ -695,6 +695,7 @@ en:
     upload_file: Upload file
     time:
       before: "%{time} ago"
+    hide: "Hide"
   submissions:
     causes:
       autosave: Autosave