[Fix #890] better display of rich text messagerie

app/assets/stylesheets/new_design/dossier_champs.scss

@@ -9,63 +9,4 @@
   .libelle {
     width: 250px;
   }
-
-  i {
-    font-style: italic;
-  }
-
-  b {
-    font-weight: bold;
-  }
-
-  small {
-    font-size: 14px;
-  }
-
-  ol,
-  ul {
-    list-style: inside;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  blockquote {
-    margin: $default-padding 0 $default-padding $default-padding;
-  }
-
-  p {
-    margin-bottom: $default-padding;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: $default-padding;
-    line-height: 1;
-  }
-
-  h2 {
-    font-size: 32px;
-  }
-
-  h3 {
-    font-size: 28px;
-  }
-
-  h4 {
-    font-size: 24px;
-  }
-
-  h5 {
-    font-size: 20px;
-  }
-
-  h6 {
-    font-size: 16px;
-  }
 }

app/assets/stylesheets/new_design/messagerie.scss

@@ -3,18 +3,18 @@
 @import "constants";
 
 .messagerie {
-  ul {
+  .messages-list {
     max-height: 350px;
     overflow-y: scroll;
     border: 1px solid $border-grey;
     padding: 2 * $default-spacer;
     margin-bottom: $default-spacer;
-  }
 
-  li {
+    > li {
-    display: flex;
+      display: flex;
-    align-items: flex-start;
+      align-items: flex-start;
-    margin-bottom: 2 * $default-padding;
+      margin-bottom: 2 * $default-padding;
+    }
   }
 
   .person-icon {

app/assets/stylesheets/new_design/rich-text.scss

@@ -0,0 +1,62 @@
+@import "constants";
+
+.rich-text {
+  i {
+    font-style: italic;
+  }
+
+  b {
+    font-weight: bold;
+  }
+
+  small {
+    font-size: 14px;
+  }
+
+  ol,
+  ul {
+    list-style: inside;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  blockquote {
+    margin: $default-padding 0 $default-padding $default-padding;
+  }
+
+  p {
+    margin-bottom: $default-padding;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: $default-padding;
+    line-height: 1;
+  }
+
+  h2 {
+    font-size: 32px;
+  }
+
+  h3 {
+    font-size: 28px;
+  }
+
+  h4 {
+    font-size: 24px;
+  }
+
+  h5 {
+    font-size: 20px;
+  }
+
+  h6 {
+    font-size: 16px;
+  }
+}

app/views/new_gestionnaire/dossiers/_champs.html.haml

@@ -8,5 +8,5 @@
         - elsif c.type_champ != "explication"
           %th.libelle
             = "#{c.libelle} :"
-          %td
+          %td.rich-text
             = sanitize(c.value)

app/views/new_gestionnaire/dossiers/messagerie.html.haml

@@ -1,7 +1,7 @@
 = render partial: "header", locals: { dossier: @dossier }
 
 .messagerie.container
-  %ul
+  %ul.messages-list
     - @dossier.commentaires.each do |commentaire|
       %li
         = render partial: 'commentaire_icon', locals: { commentaire: commentaire, current_gestionnaire: current_gestionnaire }
@@ -13,7 +13,8 @@
             - if ![current_gestionnaire.email, @dossier.user.email, 'contact@tps.apientreprise.fr'].include?(commentaire.email)
               %span.guest Invité
             %span.date= I18n.l(commentaire.created_at.localtime, format: '%H:%M le %d/%m/%Y')
-          %p= sanitize(commentaire.body)
+          .rich-text
+            = sanitize(commentaire.body)
           - if file = commentaire.piece_justificative
             .attachment-link
               = link_to file.content_url, class: "button", target: "_blank", title: "Télécharger" do