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 {