DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

[Fix #251] Fix landing page design on mobile (and add responsive)

Browse source
This commit is contained in:
Mathieu Magnin 2017-05-17 18:06:25 +02:00 • committed by gregoirenovel
parent d00b5b5ac3
commit 14bfda2e26
8 changed files with 162 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/_constants.scss
View file

@ -5,3 +5,5 @@ $light-blue: #F2F6FA;
$font-size-base: 16px; $font-size-base: 16px;
$page-width: 1040px; $page-width: 1040px;
$default-padding: 15px;

15
app/assets/stylesheets/_placeholders.scss
View file

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

130
app/assets/stylesheets/landing.scss
View file

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

16
app/assets/stylesheets/new_footer.scss
View file

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

6
app/assets/stylesheets/new_header.scss
View file

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

6
app/views/layouts/_new_header.haml
View file

@ -1,7 +1,5 @@
.new-header{ class: current_page?(root_path) ? nil : 'new-header-with-border' } .new-header{ class: current_page?(root_path) ? nil : 'new-header-with-border' }
.header-inner-content .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" = link_to "Connexion", new_user_session_path, class: "header-login-button"
.clear-fix

1
app/views/layouts/new_application.html.haml
View file

@ -3,6 +3,7 @@
%meta{ "http-equiv" => "Content-Type", :content => "text/html; charset=UTF-8" } %meta{ "http-equiv" => "Content-Type", :content => "text/html; charset=UTF-8" }
%meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge" } %meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge" }
%meta{ :name => "turbolinks-cache-control", :content => "no-cache" } %meta{ :name => "turbolinks-cache-control", :content => "no-cache" }
%meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
= csrf_meta_tags = csrf_meta_tags
= action_cable_meta_tag = action_cable_meta_tag

82
app/views/root/landing.html.haml
View file

@ -1,23 +1,22 @@
.landing .landing
.landing-panel.hero-panel .landing-panel.hero-panel
.landing-panel-inner-content .landing-panel-inner-content
.hero-text.pull-left .hero-wrapper
%p.hero-tagline .hero-text
%em.hero-tagline-em Dématérialisez %p.hero-tagline
%br %em.hero-tagline-em Dématérialisez
vos procédures administratives en quelques minutes %br
vos procédures administratives en quelques minutes
= link_to "Demander une démo", = link_to "Demander une démo",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS", "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
:class => "hero-button" :class => "hero-button"
%p.hero-phone-cta %p.hero-phone-cta
ou nous appeler au 01 40 15 68 49 ou nous appeler au 01 40 15 68 49
.hero-illustration.pull-right .hero-illustration
%img{ :src => image_url("landing/hero/dematerialiser.svg") } %img{ :src => image_url("landing/hero/dematerialiser.svg") }
.clearfix
.landing-panel.features-panel .landing-panel.features-panel
.landing-panel-inner-content .landing-panel-inner-content
@ -55,28 +54,26 @@
%ul.quotes %ul.quotes
%li.quote %li.quote
%img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") } %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
%p.quote-content.pull-right .quote-content-wrapper
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-content
.clearfix 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 %p.quote-author
%span.quote-author-name Elodie Le Rhun %span.quote-author-name Elodie Le Rhun
%br %br
Chef de bureau, DRIEA Ile-de-France Chef de bureau, DRIEA Ile-de-France
.clearfix
%li.quote %li.quote
%img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") } %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
%p.quote-content.pull-right .quote-content-wrapper
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-content
.clearfix 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 %p.quote-author
%span.quote-author-name Nadja Briki %span.quote-author-name Nadja Briki
%br %br
Déléguée de la Préfète du Pas-de-Calais Déléguée de la Préfète du Pas-de-Calais
.clearfix
- cache "numbers-panel", :expires_in => 3.hours do - cache "numbers-panel", :expires_in => 3.hours do
.landing-panel.numbers-panel .landing-panel.numbers-panel
@ -128,14 +125,13 @@
.landing-panel.cta-panel .landing-panel.cta-panel
.landing-panel-inner-content .landing-panel-inner-content
.pull-right .cta-panel-wrapper
= link_to "Demander une démo", %div
"mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS", %h1.cta-panel-title Commencez à dématerialiser vos procédures
:class => "cta-panel-button" %p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil
%p.cta-panel-phone-cta %div
ou nous appeler au 01 40 15 68 49 = link_to "Demander une démo",
.pull-left "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
%h1.cta-panel-title Commencez à dématerialiser vos procédures :class => "cta-panel-button"
%p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil %p.cta-panel-phone-cta
.clearfix ou nous appeler au 01 40 15 68 49