From 11137fa5f646f9d897c080c552ad3559f92a6cd6 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Fri, 3 Aug 2018 14:38:58 +0200
Subject: [PATCH] Style exercise description as a card and display an
 additional (more obvious) toggle

---
 app/assets/javascripts/editor/editor.js.erb | 13 +++++-----
 app/assets/stylesheets/exercises.css.scss   | 28 +++++++++++++++++++++
 app/views/exercises/implement.html.slim     | 17 +++++++------
 config/locales/de.yml                       |  1 +
 config/locales/en.yml                       |  1 +
 5 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb
index da0250e5..aa7fee59 100644
--- a/app/assets/javascripts/editor/editor.js.erb
+++ b/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();
-
   },
 
     /**
diff --git a/app/assets/stylesheets/exercises.css.scss b/app/assets/stylesheets/exercises.css.scss
index 2ef110d7..1a74bb0b 100644
--- a/app/assets/stylesheets/exercises.css.scss
+++ b/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 {
diff --git a/app/views/exercises/implement.html.slim b/app/views/exercises/implement.html.slim
index 300775a6..a243bd91 100644
--- a/app/views/exercises/implement.html.slim
+++ b/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')
diff --git a/config/locales/de.yml b/config/locales/de.yml
index be078620..ae535eb9 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -695,6 +695,7 @@ de:
     upload_file: Datei hochladen
     time:
       before: "%{time} zuvor"
+    hide: "Verstecken"
   submissions:
     causes:
       autosave: Autosave
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 26722361..8501572f 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -695,6 +695,7 @@ en:
     upload_file: Upload file
     time:
       before: "%{time} ago"
+    hide: "Hide"
   submissions:
     causes:
       autosave: Autosave