From e896310e344fdc5720c518d5d0ec3ae39af790aa Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Mon, 1 Apr 2019 15:04:11 +0200
Subject: [PATCH] procedure_context: display the procedure description on small
 screens

Fix #3658
---
 .../stylesheets/new_design/commencer.scss     |  6 ++-
 app/assets/stylesheets/new_design/forms.scss  |  2 +-
 .../new_design/procedure_context.scss         | 39 +++++++++++++++++--
 .../new_design/procedure-context.js           | 20 ++++++++++
 app/javascript/packs/application.js           |  1 +
 .../_procedure_description.html.haml          |  4 +-
 6 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/new_design/procedure-context.js

diff --git a/app/assets/stylesheets/new_design/commencer.scss b/app/assets/stylesheets/new_design/commencer.scss
index 3244987c7..cb43fc95a 100644
--- a/app/assets/stylesheets/new_design/commencer.scss
+++ b/app/assets/stylesheets/new_design/commencer.scss
@@ -1,8 +1,10 @@
 @import "constants";
 
 .commencer {
-  .button:first-of-type {
-    margin-top: 4 * $default-spacer;
+  @media (min-width: $two-columns-breakpoint) {
+    .button:first-of-type {
+      margin-top: 4 * $default-spacer;
+    }
   }
 
   .button {
diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 58547b25d..c260ec713 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -7,7 +7,7 @@
     margin-bottom: 20px;
 
     @media (max-width: $two-columns-breakpoint) {
-      font-size: 28px;
+      font-size: 26px;
     }
   }
 
diff --git a/app/assets/stylesheets/new_design/procedure_context.scss b/app/assets/stylesheets/new_design/procedure_context.scss
index f2fa9502b..54df80fd2 100644
--- a/app/assets/stylesheets/new_design/procedure_context.scss
+++ b/app/assets/stylesheets/new_design/procedure_context.scss
@@ -2,6 +2,7 @@
 @import "constants";
 
 $procedure-context-breakpoint: $two-columns-breakpoint;
+$procedure-description-line-height: 22px;
 
 .procedure-preview {
   font-size: 24px;
@@ -25,12 +26,13 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
   }
 
   .procedure-title {
-    font-size: 30px;
+    font-size: 26px;
     margin: 0 0 20px 0;
     text-align: center;
 
     @media (min-width: $procedure-context-breakpoint) {
       margin: 50px 0 32px;
+      font-size: 30px;
       text-align: left;
     }
   }
@@ -39,11 +41,40 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
     font-size: 16px;
 
     p:not(:last-of-type) {
-      margin-bottom: 2 * $default-spacer;
+      // Space the paragraphs by exactly one line height,
+      // so that the text always is truncated in the middle of a line,
+      // regarless of the number of paragraphs.
+      margin-bottom: 3 * $default-spacer;
     }
+  }
 
-    @media (max-width: $procedure-context-breakpoint) {
-      display: none; // TO FIX : make this description available for small devices
+  .read-more-button {
+    display: none;
+  }
+
+  @media (max-width: $procedure-context-breakpoint) {
+    // Truncate description and display the "Read more" UI if the text is too long
+    .procedure-description-body.read-more-collapsed {
+      // Setting the description at 25% of the viewport height:
+      // - displays more text on screens having more vertical space (like small tablets);
+      // - is enough for the action buttons to be visible on the bottom (even on mobiles).
+      max-height: 25vh;
+
+      // If the text exceeds the max-height,
+      // truncate it and displays the "Read more" button.
+      &.read-more-enabled {
+        overflow: hidden;
+        border-bottom: 1px solid $border-grey;
+
+        + .read-more-button {
+          display: block;
+          position: relative;
+          margin-left: auto;
+          margin-right: auto;
+          top: -19px;
+          margin-bottom: -19px;
+        }
+      }
     }
   }
 
diff --git a/app/javascript/new_design/procedure-context.js b/app/javascript/new_design/procedure-context.js
new file mode 100644
index 000000000..a6de9431d
--- /dev/null
+++ b/app/javascript/new_design/procedure-context.js
@@ -0,0 +1,20 @@
+import { delegate } from '@utils';
+
+function updateReadMoreVisibility() {
+  const descBody = document.querySelector('.procedure-description-body');
+  if (descBody) {
+    // If the description text overflows, display a "Read more" button.
+    const isOverflowing = descBody.scrollHeight > descBody.clientHeight;
+    descBody.classList.toggle('read-more-enabled', isOverflowing);
+  }
+}
+
+function expandProcedureDescription() {
+  const descBody = document.querySelector('.procedure-description-body');
+  descBody.classList.remove('read-more-collapsed');
+}
+
+addEventListener('turbolinks:load', updateReadMoreVisibility);
+addEventListener('resize', updateReadMoreVisibility);
+
+delegate('click', '.read-more-button', expandProcedureDescription);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 4398cfadb..7f61db545 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -18,6 +18,7 @@ import '../shared/toggle-target';
 
 import '../new_design/dropdown';
 import '../new_design/form-validation';
+import '../new_design/procedure-context';
 import '../new_design/select2';
 import '../new_design/spinner';
 import '../new_design/support';
diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/layouts/commencer/_procedure_description.html.haml
index 5df533231..04a05ffac 100644
--- a/app/views/layouts/commencer/_procedure_description.html.haml
+++ b/app/views/layouts/commencer/_procedure_description.html.haml
@@ -5,4 +5,6 @@
 %h2.procedure-title
   = procedure.libelle
 .procedure-description
-  = h string_to_html(procedure.description)
+  .procedure-description-body.read-more-enabled.read-more-collapsed
+    = h string_to_html(procedure.description)
+  = button_tag "Afficher la description complète", class: 'button read-more-button'