Avis style: extract class to avis.scss file for reuse in patron and avis

app/assets/stylesheets/new_design/avis.scss

@@ -0,0 +1,73 @@
+@import "colors";
+@import "common";
+@import "constants";
+
+.ask-avis {
+  h1 {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: $default-padding;
+  }
+
+  .avis-notice {
+    font-size: 12px;
+    color: $grey;
+    margin-bottom: 2 * $default-padding;
+  }
+
+  input[type=email] {
+    max-width: 500px;
+  }
+}
+
+.list-avis {
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: $default-padding;
+
+    .count {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      border: 1px solid $grey;
+      text-align: center;
+      font-size: 12px;
+      font-weight: normal;
+      margin-left: 8px;
+    }
+  }
+
+  .one-avis {
+    border-top: 1px solid $grey;
+    padding: $default-padding 0;
+
+    h2 {
+      font-weight: bold;
+      margin-bottom: $default-spacer;
+
+      span {
+        font-weight: normal;
+      }
+    }
+
+    .answer {
+      margin-top: $default-padding;
+    }
+
+    .avis-icon {
+      margin-right: $default-spacer;
+    }
+  }
+
+  .date,
+  .waiting {
+    font-size: 12px;
+    color: $grey;
+  }
+
+  .date {
+    float: right;
+  }
+}

app/assets/stylesheets/new_design/dossier_instruction.scss

@@ -8,64 +8,4 @@
     font-weight: bold;
     margin-bottom: $default-padding;
   }
-
-  .avis-notice {
-    font-size: 12px;
-    color: $grey;
-    margin-bottom: 2 * $default-padding;
-  }
-
-  input[type=email] {
-    max-width: 500px;
-  }
-
-  .avis {
-    .title {
-      margin-bottom: $default-padding;
-
-      .count {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border-radius: 10px;
-        border: 1px solid $grey;
-        text-align: center;
-        font-size: 12px;
-        font-weight: normal;
-        margin-left: 8px;
-      }
-    }
-
-    .one-avis {
-      border-top: 1px solid $grey;
-      padding: $default-padding 0;
-
-      h2 {
-        font-weight: bold;
-        margin-bottom: $default-spacer;
-
-        span {
-          font-weight: normal;
-        }
-      }
-
-      .answer {
-        margin-top: $default-padding;
-      }
-
-      .avis-icon {
-        margin-right: $default-spacer;
-      }
-    }
-
-    .date,
-    .waiting {
-      font-size: 12px;
-      color: $grey;
-    }
-
-    .date {
-      float: right;
-    }
-  }
 }

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

@@ -1,7 +1,7 @@
 = render partial: "header", locals: { dossier: @dossier }
 
 #dossier-instruction.container
-  %section
+  %section.ask-avis
     %h1 Inviter une personne à donner son avis
     %p.avis-notice Elle pourra consulter, donner un avis sur le dossier et contribuer au fil de messagerie, mais elle ne pourra le modifier.
 
@@ -12,7 +12,7 @@
         = f.submit 'Demander un avis', class: 'button send'
 
   - if @dossier.avis.present?
-    %section.avis
+    %section.list-avis
       %h1.title
         Avis des invités
         %span.count= @dossier.avis.count

app/views/root/patron.html.haml

@@ -155,3 +155,34 @@
         Insérer ici le contenu de la colonne 1
       .column
         Insérer ici le contenu de la colonne 2
+
+  .container
+    %section.ask-avis
+      %h1 Inviter une personne à donner son avis
+      %p.avis-notice Elle pourra consulter, donner un avis sur le dossier et contribuer au fil de messagerie, mais elle ne pourra le modifier.
+
+      = form_for Avis.new, url: '/', html: { class: 'form' } do |f|
+        = f.email_field :email, placeholder: 'Adresse email', required: true
+        = f.text_area :introduction, rows: 3, value: 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
+        .send-wrapper
+          = f.submit 'Demander un avis', class: 'button send'
+
+    %section.list-avis
+      %h1.title
+        Avis des invités
+        %span.count 1
+
+      %ul
+        %li.one-avis
+          %h2.claimant
+            Vous
+            %span.date Demande d'avis envoyée le 12/01/2012
+          %p Bonjour, merci de me donner votre avis sur ce dossier.
+
+          .answer.flex.align-start
+            = image_tag 'icons/bubble.svg', class: 'avis-icon'
+            .width-100
+              %h2.gestionnaire
+                gestionnnaire@tps.com
+                %span.date Réponse donnée le 13/01/2012
+              %p Je donne un avis favorable