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

Add the roles panels

Browse source
This commit is contained in:
gregoirenovel 2018-02-28 19:08:34 +01:00
parent d09a63bd62
commit 7cca5bbf64
4 changed files with 167 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/images/landing/roles/administrations.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

1
app/assets/images/landing/roles/usagers.svg Normal file
View file

@ -0,0 +1 @@
<svg width="94" height="96" viewBox="0 0 94 96" xmlns="http://www.w3.org/2000/svg"><title>usager</title><g fill="none" fill-rule="evenodd"><path d="M17.334 12.334h39" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001M32.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001M38.09 7.316a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001" fill="#0069CC"/><path d="M82.334 39.334h-55M82.334 48.334h-53M82.334 56.334H34.995M82.334 65.334H39.352M54.334 30.334h-27M58.334 74.334H39.021M37.334 94.334h52.773c1.506 0 2.227-2.268 2.227-3.773V31.334M61.334 2.334H20.561c-1.506 0-3.227.174-3.227 1.68v43.32" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><g><path d="M62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056A14.908 14.908 0 0 1 62.336 16c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15 0 8.284-6.715 15-15 15-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01l-6.757 1.752z" fill="#D9E9FD"/><path d="M62.284 30.249s2.225-6.485 2.104-6.69l-.033-.056A14.908 14.908 0 0 1 62.336 16c0-8.284 6.715-15 14.998-15 8.285 0 15 6.716 15 15 0 8.284-6.715 15-15 15-3.072 0-5.926-.929-8.306-2.513.003.001.013.01.013.01l-6.757 1.752z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M71.667 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0M78.753 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0M85.839 16.167a1.501 1.501 0 1 1-3.002 0 1.501 1.501 0 0 1 3.002 0" fill="#0069CC"/></g><g><path d="M1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143" fill="#D9E9FD"/><path d="M1 87.05c4.277 4.37 10.235 7.094 16.834 7.094s12.555-2.725 16.833-7.096c-1.229-4.143-4.164-8.141-10.997-8.141 0 0-2.18 2.123-5.836 2.123-3.659 0-5.836-2.123-5.836-2.123-6.834 0-9.768 3.998-10.998 8.143z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082" fill="#D9E9FD"/><path d="M17.834 72.32c5.044 0 9.138-4.069 9.138-9.083 0-5.025-4.094-9.094-9.138-9.094s-9.138 4.07-9.138 9.094c0 5.014 4.096 9.082 9.138 9.082z" stroke="#0069CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

134
app/assets/stylesheets/new_design/landing.scss
View file

@ -158,6 +158,7 @@ $landing-breakpoint: 1040px;
font-weight: bold;
}
.admins-panel,
.numbers-panel {
background-color: $light-grey;
}
@ -226,11 +227,27 @@ $users-breakpoint: 950px;
width: 170px;
}
.role-image {
height: 180px;
}
.cta-role-title {
font-size: 30px;
font-weight: bold;
margin-top: 13px;
}
.cta-role-explanation {
font-size: 30px;
margin-bottom: 10px;
}
.cta-panel {
background-color: $blue;
color: #FFFFFF;
}
.role-panel-wrapper,
.cta-panel-wrapper {
width: 100%;
display: flex;
@ -238,6 +255,35 @@ $users-breakpoint: 950px;
justify-content: space-between;
}
.role-administrations-panel {
flex-direction: row-reverse;
@media (max-width: $users-breakpoint) {
flex-direction: row;
}
}
.role-panel-70,
.role-panel-30 {
display: inline-block;
}
.role-panel-70 {
width: 70%;
@media (max-width: $users-breakpoint) {
width: 100%;
}
}
.role-panel-30 {
width: 30%;
@media (max-width: $users-breakpoint) {
width: 100%;
}
}
.cta-panel-title {
font-size: 24px;
font-weight: bold;
@ -249,19 +295,45 @@ $users-breakpoint: 950px;
margin-bottom: 10px;
}
.role-panel-title {
font-size: 30px;
font-weight: bold;
}
.role-panel-explanation {
font-size: 24px;
margin-bottom: 10px;
}
.role-administrations-image {
text-align: right;
@media (max-width: $users-breakpoint) {
text-align: center;
margin-bottom: 45px;
}
}
.role-usagers-image {
@media (max-width: $users-breakpoint) {
text-align: center;
margin-bottom: 45px;
}
}
$cta-panel-button-border-size: 2px;
.cta-panel-button {
@include horizontal-padding(30px);
@include vertical-padding(10px);
.cta-panel-button-white {
@include horizontal-padding(40px);
@include vertical-padding(15px);
display: block;
border-radius: 100px;
border: $cta-panel-button-border-size solid #FFFFFF;
color: #FFFFFF;
font-size: 24px;
text-align: center;
cursor: pointer;
margin-top: 20px;
border: $cta-panel-button-border-size solid #FFFFFF;
color: #FFFFFF;
&:hover {
color: #FFFFFF;
@ -274,3 +346,55 @@ $cta-panel-button-border-size: 2px;
text-decoration: none;
}
}
@mixin role-button {
@include horizontal-padding(30px);
height: 50px;
display: inline-block;
border-radius: 100px;
font-size: 20px;
text-align: center;
cursor: pointer;
margin-top: 20px;
line-height: 50px;
}
.role-panel-button-primary {
@include role-button;
background-color: $blue;
color: #FFFFFF;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: $light-blue;
}
&:focus {
color: #FFFFFF;
text-decoration: none;
}
}
.role-panel-button-secondary {
@include role-button;
border: $cta-panel-button-border-size solid $blue;
line-height: 50px - 2 * $cta-panel-button-border-size;
color: $blue;
margin-left: 10px;
@media (max-width: $users-breakpoint) {
margin-left: 0px;
}
&:hover {
color: $light-blue;
border: $cta-panel-button-border-size solid $light-blue;
text-decoration: none;
}
&:focus {
color: $light-blue;
text-decoration: none;
}
}

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

@ -36,6 +36,41 @@
%br
à l'ensemble des services l'État plateforme
.landing-panel
.container
.role-panel-wrapper.role-administrations-panel
.role-panel-30.role-administrations-image
%img.role-image{ :src => image_url("landing/roles/administrations.svg") }
.role-panel-70
%h1.role-panel-title Administrations
%p.role-panel-explanation Créez des formulaires en ligne en quelques minutes et instruisez les demandes des usagers sur une plateforme dédiée
= link_to "Demander un compte",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
class: "role-panel-button-primary",
target: "_blank",
onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"
= link_to "Voir la documentation",
"https://tps.gitbooks.io/tps-documentation/content/",
target: "_blank",
class: "role-panel-button-secondary"
.landing-panel.admins-panel
.container
.role-panel-wrapper
.role-panel-30.role-usagers-image
%img.role-image{ :src => image_url("landing/roles/usagers.svg") }
.role-panel-70
%h1.role-panel-title Usagers
%p.role-panel-explanation Déposez des demandes en toute simplicité et retrouvez vos dossiers en ligne
= link_to "Se connecter",
new_user_session_path,
class: "role-panel-button-primary"
.landing-panel
.container
%h2.landing-panel-title Ce que les utilisateurs pensent du service
@ -162,6 +197,6 @@
%div
= link_to "Demander une démo",
"mailto:#{t("dynamics.contact_email")}?subject=Demande de démo demarches-simplifiees.fr",
class: "cta-panel-button",
class: "cta-panel-button-white",
target: "_blank",
onclick: "javascript: ga('send', 'pageview', '/demander-une-demo')"