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

Merge pull request #3618 from betagouv/improve-two-columns-layout

Browse source 
Améliore le layout à deux colonnes sur les écrans étroits
This commit is contained in:
Pierre de La Morinerie 2019-03-19 14:25:11 +01:00 committed by GitHub
commit 4053e923ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ $default-padding: 2 * $default-spacer;
// layouts // layouts
$two-columns-padding: 60px; $two-columns-padding: 60px;
$two-columns-breakpoint: $page-width + (2 * $two-columns-padding); $two-columns-breakpoint: 980px;
// z-order // z-order
$alert-z-index: 100; $alert-z-index: 100;

23
app/assets/stylesheets/new_design/layouts.scss
View file

@ -13,29 +13,32 @@
@extend .container; @extend .container;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
@media (min-width: $two-columns-breakpoint) { @media (min-width: $two-columns-breakpoint) {
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: space-between;
} }
} }
.column { .column {
padding: $two-columns-padding 0 0;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
margin: 0 auto;
padding: ($default-padding * 2) 0 0 0;
&:last-of-type {
padding-bottom: $default-padding * 2;
}
@media (min-width: $two-columns-breakpoint) { @media (min-width: $two-columns-breakpoint) {
padding: $two-columns-padding; width: 45%;
width: 50%; margin: 0;
padding: $two-columns-padding 0 $two-columns-padding 0;
&:first-child { &:last-of-type {
padding-left: 0; padding-bottom: $two-columns-padding;
}
&:last-child {
padding-right: 0;
} }
} }
} }

8
app/assets/stylesheets/new_design/procedure_context.scss
View file

@ -26,17 +26,19 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
.procedure-title { .procedure-title {
font-size: 30px; font-size: 30px;
margin: 20px 0 0; margin: 0 0 20px 0;
text-align: center;
@media (min-width: $procedure-context-breakpoint) { @media (min-width: $procedure-context-breakpoint) {
margin: 50px 0 32px; margin: 50px 0 32px;
text-align: left;
} }
} }
.procedure-description { .procedure-description {
font-size: 16px; font-size: 16px;
p { p:not(:last-of-type) {
margin-bottom: 2 * $default-spacer; margin-bottom: 2 * $default-spacer;
} }
@ -52,7 +54,7 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
img { img {
max-height: 50px; max-height: 50px;
max-width: 100%; max-width: 100%;
margin: 0 10px; margin: 0 10px 20px 10px;
@media (min-width: $procedure-context-breakpoint) { @media (min-width: $procedure-context-breakpoint) {
max-height: 130px; max-height: 130px;