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
$two-columns-padding: 60px;
$two-columns-breakpoint: $page-width + (2 * $two-columns-padding);
$two-columns-breakpoint: 980px;
// z-order
$alert-z-index: 100;

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

@ -13,29 +13,32 @@
@extend .container;
display: flex;
flex-direction: column;
justify-content: center;
@media (min-width: $two-columns-breakpoint) {
flex-direction: row;
align-items: stretch;
justify-content: center;
justify-content: space-between;
}
}
.column {
padding: $two-columns-padding 0 0;
width: 100%;
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) {
padding: $two-columns-padding;
width: 50%;
width: 45%;
margin: 0;
padding: $two-columns-padding 0 $two-columns-padding 0;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
&:last-of-type {
padding-bottom: $two-columns-padding;
}
}
}

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

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