Merge pull request #297 from sgmap/251_fix_landing_on_mobile

Fix #251, fix landing design on mobile (and add responsive)

.scss-lint.yml

@@ -1,4 +1,4 @@
-exclude: 'app/assets/stylesheets/reset.scss'
+exclude: 'app/assets/stylesheets/new_design/reset.scss'
 
 linters:
   BangFormat:

app/assets/stylesheets/_constants.scss

@@ -3,5 +3,3 @@ $light-blue: #F2F6FA;
 
 // Bootstrap constants
 $font-size-base: 16px;
-
-$page-width: 1040px;

app/assets/stylesheets/_placeholders.scss

@@ -1,14 +0,0 @@
-%horizontal-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  font-size: 0px;
-}
-
-%horizontal-list-item {
-  display: inline-block;
-
-  &:last-of-type {
-    margin-right: 0;
-  }
-}

app/assets/stylesheets/application.scss

@@ -13,13 +13,8 @@
 // file per style scope.
 //
 // = require _card
-// = require _colors
-// = require _constants
 // = require _helpers
-// = require _mixins
-// = require _placeholders
 // = require _turbolinks
-// = require _typography
 // = require admin_procedures_modal
 // = require admin_type_de_champ
 // = require backoffice
@@ -31,9 +26,7 @@
 // = require dossier_show
 // = require dossiers
 // = require etapes
-// = require fonts
 // = require france_connect_particulier
-// = require landing
 // = require left_panel
 // = require login
 // = require main_container

app/assets/stylesheets/new_application.scss

@@ -1,10 +0,0 @@
-// = require reset
-// = require custom_reset
-// = require common
-// = require utils
-// = require fonts
-// = require new_alert
-// = require new_header
-// = require new_footer
-// = require landing
-// = require navbar

app/assets/stylesheets/new_design/_constants.scss

@@ -0,0 +1,3 @@
+$page-width: 1040px;
+
+$default-padding: 15px;

app/assets/stylesheets/new_design/_placeholders.scss

@@ -0,0 +1,21 @@
+@import "constants";
+@import "mixins";
+
+%horizontal-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+%horizontal-list-item {
+  display: inline-block;
+}
+
+%page-width-container {
+  @include horizontal-padding($default-padding);
+  max-width: $page-width + 2 * $default-padding;
+  margin: 0 auto;
+}

app/assets/stylesheets/new_design/beta.scss

@@ -0,0 +1,15 @@
+#beta {
+  text-align: center;
+  text-transform: uppercase;
+  position: fixed;
+  bottom: 26px;
+  right: -35px;
+  transform: rotate(-45deg);
+  width: 150px;
+  background-color: #008CBA;
+  color: #FFFFFF;
+  padding: 5px;
+  font-size: 15px;
+  font-weight: 700;
+  z-index: 10;
+}

app/assets/stylesheets/new_design/landing.scss

@@ -12,12 +12,30 @@
 }
 
 .landing-panel-inner-content {
-  width: $page-width;
-  margin: 0 auto;
+  @extend %page-width-container;
+}
+
+$landing-breakpoint: 1040px;
+
+.hero-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  @media (max-width: $landing-breakpoint) {
+    justify-content: center;
+  }
+}
+
+.hero-text {
+  max-width: 500px;
+
+  @media (max-width: $landing-breakpoint) {
+    margin: auto;
+  }
 }
 
 .hero-tagline {
-  width: 500px;
   font-size: 30px;
   margin-bottom: 0px;
 }
@@ -29,12 +47,16 @@
   font-weight: bold;
 }
 
-.hero-text {
-  width: 500px;
-}
-
 .hero-illustration {
-  width: 500px;
+  max-width: 500px;
+
+  img {
+    max-width: 100%;
+  }
+
+  @media (max-width: 1030px) {
+    margin: auto;
+  }
 }
 
 .hero-button {
@@ -69,6 +91,7 @@
 }
 
 .landing-panel-title {
+  width: 100%;
   font-size: 30px;
   font-weight: normal;
   text-align: center;
@@ -86,15 +109,22 @@
 
 .features {
   @extend %horizontal-list;
-}
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
 
-$feature-width: 320px;
-$features-count: 3;
+  @media (max-width: $landing-breakpoint) {
+    justify-content: center;
+  }
+}
 
 .feature {
   @extend %horizontal-list-item;
-  width: $feature-width;
-  margin-right: calc((#{$page-width} - (#{$feature-width} * #{$features-count})) / (#{$features-count} - 1));
+  width: 320px;
+
+  @media (max-width: $landing-breakpoint) {
+    margin: 15px 20px;
+  }
 }
 
 .feature-text {
@@ -116,18 +146,27 @@ $features-count: 3;
 
 .quotes {
   @extend %horizontal-list;
-}
+  width: 100%;
+  justify-content: space-between;
 
-$quote-width: 500px;
-$quote-count: 2;
+  @media (max-width: $landing-breakpoint) {
+    justify-content: center;
+  }
+}
 
 .quote {
   @extend %horizontal-list-item;
-  width: $quote-width;
-  margin-right: calc((#{$page-width} - (#{$quote-width} * #{$quote-count}))/ (#{$quote-count} - 1));
+  max-width: 500px;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
   padding: 24px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  @media (max-width: $landing-breakpoint) {
+    margin: 15px 0;
+  }
 }
 
 .quote-quotation-mark {
@@ -136,13 +175,16 @@ $quote-count: 2;
 
 .quote-content {
   font-size: 18px;
-  width: 388px;
   margin-bottom: 24px;
 }
 
+.quote-content-wrapper {
+  margin-left: 20px;
+  width: 100%;
+}
+
 .quote-author {
   font-size: 14px;
-  margin-left: 64px;
 }
 
 .quote-author-name {
@@ -155,16 +197,18 @@ $quote-count: 2;
 
 .numbers {
   @extend %horizontal-list;
+  justify-content: space-around;
+  width: 100%;
 }
 
-$number-width: 320px;
-$number-count: 3;
-
 .number {
   @extend %horizontal-list-item;
-  width: $number-width;
-  margin-right: calc((#{$page-width} - (#{$number-width} * #{$number-count}))/ (#{$number-count} - 1));
+  width: 320px;
   text-align: center;
+
+  @media (max-width: $landing-breakpoint) {
+    margin-bottom: 15px;
+  }
 }
 
 .number-value {
@@ -178,25 +222,33 @@ $number-count: 3;
   font-size: 20px;
 }
 
+$users-breakpoint: 950px;
+
 .users {
   @extend %horizontal-list;
-}
+  justify-content: space-between;
+  width: 100%;
 
-$image-width: 170px;
-$images-total-width: $image-width * 5;
-$images-count: 5;
+  @media (max-width: $users-breakpoint) {
+    justify-content: space-around;
+  }
+}
 
 .user {
   @extend %horizontal-list-item;
-  margin-right: calc((#{$page-width} - (#{$images-total-width}))/ (#{$images-count} - 1));
+  width: 170px;
 
   &:hover {
     opacity: 0.6;
   }
+
+  @media (max-width: $users-breakpoint) {
+    margin: 0 15px 15px;
+  }
 }
 
 .user-image {
-  width: $image-width;
+  width: 170px;
 }
 
 .cta-panel {
@@ -204,6 +256,13 @@ $images-count: 5;
   color: #FFFFFF;
 }
 
+.cta-panel-wrapper {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .cta-panel-title {
   font-size: 24px;
   font-weight: bold;
@@ -212,22 +271,21 @@ $images-count: 5;
 
 .cta-panel-explanation {
   font-size: 24px;
-  margin-bottom: 0;
+  margin-bottom: 10px;
 }
 
-$cta-panel-button-height: 60px;
 $cta-panel-button-border-size: 2px;
 
 .cta-panel-button {
   @include horizontal-padding(30px);
 
   display: block;
-  height: $cta-panel-button-height;
-  line-height: $cta-panel-button-height - (2 * $cta-panel-button-border-size);
-  border-radius: $cta-panel-button-height;
+  padding: 10px;
+  border-radius: 100px;
   border: $cta-panel-button-border-size solid #FFFFFF;
   color: #FFFFFF;
   font-size: 24px;
+  text-align: center;
 
   &:hover {
     color: #FFFFFF;

app/assets/stylesheets/new_design/new_application.scss

@@ -0,0 +1,6 @@
+// = require ./reset
+// = require ./custom_reset
+// = require ./common
+// = require ./utils
+// = require ./fonts
+// = require_tree .

app/assets/stylesheets/new_design/new_footer.scss

@@ -10,23 +10,25 @@
 }
 
 .footer-inner-content {
-  width: $page-width;
-  margin: 0 auto;
+  @extend %page-width-container;
 }
 
 .footer-columns {
   @extend %horizontal-list;
+  justify-content: flex-start;
 }
 
-$footer-column-width: 320px;
-$footer-column-count: 3;
-
 .footer-column {
   @extend %horizontal-list-item;
-  width: $footer-column-width;
-  margin-right: calc((#{$page-width} - (#{$footer-column-width} * #{$footer-column-count})) / (#{$footer-column-count} - 1));
   font-size: 14px;
   vertical-align: top;
+  flex-grow: 1;
+  min-width: 320px;
+
+  @media (max-width: 1000px) {
+    width: 100%;
+    margin-bottom: 14px;
+  }
 }
 
 .footer-logos,

app/assets/stylesheets/new_design/new_header.scss

@@ -1,6 +1,7 @@
 @import "constants";
 @import "colors";
 @import "mixins";
+@import "placeholders";
 
 // FIXME: Rename when the header is generalized
 .new-header {
@@ -13,8 +14,9 @@
 }
 
 .header-inner-content {
-  width: $page-width;
-  margin: 0 auto;
+  @extend %page-width-container;
+  display: flex;
+  justify-content: space-between;
 }
 
 .header-logo {

app/views/layouts/_new_header.haml

@@ -1,7 +1,5 @@
 .new-header{ class: current_page?(root_path) ? nil : 'new-header-with-border' }
   .header-inner-content
-    %img.header-logo.pull-left{ src: image_url("header/logo-tps.svg") }
+    %img.header-logo{ src: image_url("header/logo-tps.svg") }
 
-    = link_to "Connexion", new_user_session_path, :class => "header-login-button pull-right"
-
-    .clear-fix
+    = link_to "Connexion", new_user_session_path, class: "header-login-button"

app/views/layouts/new_application.html.haml

@@ -3,6 +3,7 @@
     %meta{ "http-equiv" => "Content-Type", :content => "text/html; charset=UTF-8" }
     %meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge" }
     %meta{ :name => "turbolinks-cache-control", :content => "no-cache" }
+    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
     = csrf_meta_tags
     = action_cable_meta_tag
 
@@ -13,7 +14,7 @@
     = favicon_link_tag(image_url("favicons/32x32.png"), type: "image/png", sizes: "32x32")
     = favicon_link_tag(image_url("favicons/96x96.png"), type: "image/png", sizes: "96x96")
 
-    = stylesheet_link_tag "new_application", :media => "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag "new_design/new_application", :media => "all", "data-turbolinks-track" => true
     = stylesheet_link_tag "print", :media => "print", "data-turbolinks-track" => true
 
   %body

app/views/root/landing.html.haml

@@ -1,23 +1,22 @@
 .landing
   .landing-panel.hero-panel
     .landing-panel-inner-content
-      .hero-text.pull-left
-        %p.hero-tagline
-          %em.hero-tagline-em Dématérialisez
-          %br
-          vos procédures administratives en quelques minutes
+      .hero-wrapper
+        .hero-text
+          %p.hero-tagline
+            %em.hero-tagline-em Dématérialisez
+            %br
+            vos procédures administratives en quelques minutes
 
-        = link_to "Demander une démo",
-          "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
-          :class => "hero-button"
+          = link_to "Demander une démo",
+            "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
+            :class => "hero-button"
 
-        %p.hero-phone-cta
-          ou nous appeler au 01 40 15 68 49
+          %p.hero-phone-cta
+            ou nous appeler au 01 40 15 68 49
 
-      .hero-illustration.pull-right
-        %img{ :src => image_url("landing/hero/dematerialiser.svg") }
-
-      .clearfix
+        .hero-illustration
+          %img{ :src => image_url("landing/hero/dematerialiser.svg") }
 
   .landing-panel.features-panel
     .landing-panel-inner-content
@@ -55,28 +54,26 @@
 
       %ul.quotes
         %li.quote
-          %img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") }
-          %p.quote-content.pull-right
-            TPS est un outil de dématérialisation adapté au dépôt de dossiers de demande d’inscription au registre des transporteurs routiers en Ile-de-France. Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais d’instructions et de gagner en efficacité.
-          .clearfix
+          %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
+          .quote-content-wrapper
+            %p.quote-content
+              TPS est un outil de dématérialisation adapté au dépôt de dossiers de demande d’inscription au registre des transporteurs routiers en Ile-de-France. Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais d’instructions et de gagner en efficacité.
 
-          %p.quote-author.pull-left
-            %span.quote-author-name Elodie Le Rhun
-            %br
-            Chef de bureau, DRIEA Ile-de-France
-          .clearfix
+            %p.quote-author
+              %span.quote-author-name Elodie Le Rhun
+              %br
+              Chef de bureau, DRIEA Ile-de-France
 
         %li.quote
-          %img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") }
-          %p.quote-content.pull-right
-            TPS c’est surtout l’assurance d’un dialogue en toute fluidité et en toute transparence entre les porteurs de projet et l’administration. Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
-          .clearfix
+          %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
+          .quote-content-wrapper
+            %p.quote-content
+              TPS c’est surtout l’assurance d’un dialogue en toute fluidité et en toute transparence entre les porteurs de projet et l’administration. Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
 
-          %p.quote-author.pull-left
-            %span.quote-author-name Nadja Briki
-            %br
-            Déléguée de la Préfète du Pas-de-Calais
-          .clearfix
+            %p.quote-author
+              %span.quote-author-name Nadja Briki
+              %br
+              Déléguée de la Préfète du Pas-de-Calais
 
   - cache "numbers-panel", :expires_in => 3.hours do
     .landing-panel.numbers-panel
@@ -128,14 +125,13 @@
 
   .landing-panel.cta-panel
     .landing-panel-inner-content
-      .pull-right
-        = link_to "Demander une démo",
-          "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
-          :class => "cta-panel-button"
-        %p.cta-panel-phone-cta
-          ou nous appeler au 01 40 15 68 49
-      .pull-left
-        %h1.cta-panel-title Commencez à dématerialiser vos procédures
-        %p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil
-      .clearfix
-
+      .cta-panel-wrapper
+        %div
+          %h1.cta-panel-title Commencez à dématerialiser vos procédures
+          %p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil
+        %div
+          = link_to "Demander une démo",
+            "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
+            :class => "cta-panel-button"
+          %p.cta-panel-phone-cta
+            ou nous appeler au 01 40 15 68 49

config/initializers/assets.rb

@@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-Rails.application.config.assets.precompile += %w(print.css new_application.css)
+Rails.application.config.assets.precompile += %w(print.css new_design/new_application.css)