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) {
+@media (max-width: $login-breakpoint) {
-  .two-columns {
+  .two-columns.login {
-    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+    background: #FFFFFF;
-  }
-}
-
-@media (min-width: $page-width + (2 * $login-padding)) {
-  .preview {
-    padding-left: 0;
-  }
-
-  .login-form {
-    padding-right: 0;
   }
 }
 

app/assets/stylesheets/new_design/patron.scss

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

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

@@ -1,8 +1,9 @@
-.avis-sign-up
+.two-columns.avis-sign-up
-  .left
+  .columns-container
+    .column.left
       %p.description= @dossier.procedure.libelle
       %p.dossier Dossier nº #{@dossier.id}
-  .right
+    .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
 

app/views/root/patron.html.haml

@@ -1,4 +1,5 @@
 .patron
+  .patron-container
     %h1 Patron
 
     %h2 Formulaires
@@ -25,3 +26,12 @@
 
     %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
+.two-columns.login
-  .login-wrapper
+  .columns-container
-    .preview
+    .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