DGNum/demarches-normaliennes
15
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;
$page-width: 1040px;
$default-padding: 15px;

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

@ -1,14 +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;
&: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 {
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;

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

@ -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,

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

@ -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 {

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' }
.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"

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" => "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

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

@ -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