From 31093151629b37815247f554269f15f2296441a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Fri, 13 May 2016 22:07:59 +0200 Subject: [PATCH] scss: add responsiveness to grid system (#10928) This also changes the denomitors from 1 to 8 to a 1, 2, 3, 4, 6, 12, for richer and more useful values. --- help/fr/figures/grid.png | Bin 0 -> 8729 bytes help/fr/misc-grid.page | 47 +++++++++++++++++++++++++++++++++++ static/includes/_layout.scss | 1 + static/includes/_wcs.scss | 17 ++++++++++++- 4 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 help/fr/figures/grid.png create mode 100644 help/fr/misc-grid.page diff --git a/help/fr/figures/grid.png b/help/fr/figures/grid.png new file mode 100644 index 0000000000000000000000000000000000000000..313aab2211a7140427514079b80090adebc52401 GIT binary patch literal 8729 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 UP3fp9feRuS1=VXgS8hM}FB(SFAOHXW literal 0 HcmV?d00001 diff --git a/help/fr/misc-grid.page b/help/fr/misc-grid.page new file mode 100644 index 00000000..82b9c470 --- /dev/null +++ b/help/fr/misc-grid.page @@ -0,0 +1,47 @@ + + + + + + Frédéric Péters + fpeters@entrouvert.com + + + + +Système de grille CSS + +

+Un système de grille adaptive sur douze colonnes est proposé pour le +formatage des formulaires. +

+ +
+ Système de grille + +
+ +

+Chaque classe CSS pour un élément de la grille est décrit numériquement +par sa largeur. Par exemple, grid-1-2 pour un élément +faisant la moitié de la largeur, grid-2-3 pour un élément +en faisant les deux-tiers. Les dénominateurs possibles sont 2, 3, 4, 6 +et 12. +

+ +

+Sur les petits écrans, les éléments de grille sont affichés sur toute la +largeur. +

+ + + +

+Pour forcer un retour en début de ligne, ou pour assurer un rendu correct +quand les éléments d'une ligne n'ont pas tous la même hauteur, une classe +supplémentaire, newline peut être posée sur le premier +élément de la nouvelle ligne. +

+ + diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss index 5460f3eb..4559efcd 100644 --- a/static/includes/_layout.scss +++ b/static/includes/_layout.scss @@ -1,5 +1,6 @@ $width: 1000px !default; $mobile-limit: 800px !default; +$very-small-limit: 480px !default; $footer-background: #666666 !default; $footer-color: white !default; $top-logo-width: 0 !default; diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss index d32d37d7..db42bbd2 100644 --- a/static/includes/_wcs.scss +++ b/static/includes/_wcs.scss @@ -401,7 +401,7 @@ form.quixote div.grid { clear: none; } -@for $i from 1 through 8 { +@each $i in 1, 2, 3, 4, 6, 12 { @for $j from 1 through $i { div.dataview div.grid-#{$j}-#{$i}, form.quixote div.grid-#{$j}-#{$i} { @@ -415,6 +415,21 @@ form.quixote div.grid { box-sizing: border-box; padding-right: 1em; width: (100*$j/$i+0%); + @media screen and (max-width: $mobile-limit) { + @if $i == 4 and $j <= 2 { width: 50%; } + @else if $i == 4 and $j > 2 { width: 100%; } + @else if $i == 6 and $j <= 2 { width: (100/3+0%); } + @else if $i == 6 and $j == 3 { width: 50%; } + @else if $i == 6 and $j <= 5 { width: (200/3+0%); } + @else if $i == 6 and $j == 6 { width: 100%; } + @else if $i == 12 and $j <= 4 { width: (100/3+0%); } + @else if $i == 12 and $j <= 7 { width: 50%; } + @else if $i == 12 and $j <= 11 { width: (200/3+0%); } + @else if $i == 12 and $j == 12 { width: 100%; } + } + @media screen and (max-width: $very-small-limit) { + width: 100%; + } & + div { clear: both; }