Merge pull request #467 from sgmap/standardize_two_columns_layout

Standardize two columns layout

app/assets/stylesheets/new_design/avis_sign_up.scss

@@ -2,14 +2,6 @@
 @import "colors";
 
 .avis-sign-up {
-  display: flex;
-
-  .left,
-  .right {
-    width: 50%;
-    padding: 60px 86px;
-  }
-
   .left {
     p {
       margin: auto;
@@ -28,12 +20,4 @@
       margin-top: 15px;
     }
   }
-
-  .right {
-    background-color: $light-grey;
-
-    form {
-      max-width: 420px;
-    }
-  }
 }

app/assets/stylesheets/new_design/layouts.scss

@@ -0,0 +1,32 @@
+@import "colors";
+@import "constants";
+@import "placeholders";
+
+.two-columns {
+  $column-padding: 60px;
+  $two-columns-breakpoint: $page-width + (2 * $column-padding);
+
+  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+
+  .columns-container {
+    @extend %page-width-container;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .column {
+    width: 50%;
+    padding: $column-padding;
+
+    @media (min-width: $two-columns-breakpoint) {
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/new_design/login.scss

@@ -4,45 +4,20 @@
 
 $login-breakpoint: 820px;
 
-.login-wrapper {
-  @extend %page-width-container;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-$login-padding: 60px;
-
-.preview,
-.login-form {
-  width: 50%;
-  padding: $login-padding;
-}
-
 @media (max-width: $login-breakpoint) {
   .preview {
     display: none;
   }
 
-  .login-form {
+  .two-columns .column.login-form {
     @include horizontal-padding(0);
     width: 100%;
   }
 }
 
-@media (min-width: $login-breakpoint) {
-  .two-columns {
-    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
-  }
-}
-
-@media (min-width: $page-width + (2 * $login-padding)) {
-  .preview {
-    padding-left: 0;
-  }
-
-  .login-form {
-    padding-right: 0;
+@media (max-width: $login-breakpoint) {
+  .two-columns.login {
+    background: #FFFFFF;
   }
 }
 

app/assets/stylesheets/new_design/patron.scss

@@ -1,7 +1,9 @@
 @import "placeholders";
 
 .patron {
-  @extend %page-width-container;
+  .patron-container {
+    @extend %page-width-container;
+  }
 
   p {
     margin-bottom: 20px;

app/views/backoffice/avis/sign_up.html.haml

@@ -1,15 +1,16 @@
-.avis-sign-up
-  .left
-    %p.description= @dossier.procedure.libelle
-    %p.dossier Dossier nº #{@dossier.id}
-  .right
-    = form_for(Gestionnaire.new, url: { controller: "backoffice/avis", action: :create_gestionnaire }, method: :post, html: { class: "form" }) do |f|
-      %h1 Créez-vous un compte
+.two-columns.avis-sign-up
+  .columns-container
+    .column.left
+      %p.description= @dossier.procedure.libelle
+      %p.dossier Dossier nº #{@dossier.id}
+    .column
+      = form_for(Gestionnaire.new, url: { controller: "backoffice/avis", action: :create_gestionnaire }, method: :post, html: { class: "form" }) do |f|
+        %h1 Créez-vous un compte
 
-      = f.label :email, "Email"
-      = f.email_field :email, value: @email, disabled: true
+        = f.label :email, "Email"
+        = f.email_field :email, value: @email, disabled: true
 
-      = f.label :password, "Mot de passe"
-      = f.password_field :password, autofocus: true, required: true, placeholder: "8 caractères minimum"
+        = f.label :password, "Mot de passe"
+        = f.password_field :password, autofocus: true, required: true, placeholder: "8 caractères minimum"
 
-      = f.submit "Créer un compte", class: "button large primary expand"
+        = f.submit "Créer un compte", class: "button large primary expand"

app/views/root/patron.html.haml

@@ -1,27 +1,37 @@
 .patron
-  %h1 Patron
+  .patron-container
+    %h1 Patron
 
-  %h2 Formulaires
+    %h2 Formulaires
 
-  %form.form
-    %label Nom
-    %input{ type: "text" }
-    %label Prénom
-    %input{ type: "text", placeholder: "ex : Ivan" }
-    %label Mot de passe
-    %input{ type: "password", value: "12345678" }
-    %input.button{ type: "submit", value: "Envoyer" }
+    %form.form
+      %label Nom
+      %input{ type: "text" }
+      %label Prénom
+      %input{ type: "text", placeholder: "ex : Ivan" }
+      %label Mot de passe
+      %input{ type: "password", value: "12345678" }
+      %input.button{ type: "submit", value: "Envoyer" }
 
-  %h2 Boutons
+    %h2 Boutons
 
-  %p
-    = link_to ".button", "#", class: "button"
+    %p
+      = link_to ".button", "#", class: "button"
 
-    = link_to ".button.primary", "#", class: "button primary"
+      = link_to ".button.primary", "#", class: "button primary"
 
-    = link_to ".button.large", "#", class: "button large"
+      = link_to ".button.large", "#", class: "button large"
 
-    = link_to ".button.large.primary", "#", class: "button large primary"
+      = link_to ".button.large.primary", "#", class: "button large primary"
 
-  %p
-    = link_to ".button.primary.expand", "#", class: "button primary expand"
+    %p
+      = link_to ".button.primary.expand", "#", class: "button primary expand"
+
+    %h2 Layout deux colonnes
+
+  .two-columns
+    .columns-container
+      .column
+        Insérer ici le contenu de la colonne 1
+      .column
+        Insérer ici le contenu de la colonne 2

app/views/users/sessions/new.html.haml

@@ -1,6 +1,6 @@
-.two-columns
-  .login-wrapper
-    .preview
+.two-columns.login
+  .columns-container
+    .column.preview
       - unless @dossier
         = image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo"
         .baseline.center
@@ -22,7 +22,7 @@
         %p.procedure-description
           = h @dossier.procedure.description.html_safe
 
-    .login-form
+    .column.login-form
       = form_for @user, url: user_session_path, html: { class: "form" } do |f|
         %h1 Connectez-vous