From 33d284c853e65aa3ec9940127b591f7a837231ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
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.
---
 static/includes/_layout.scss |  1 +
 static/includes/_wcs.scss    | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss
index 5460f3e..4559efc 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 d32d37d..db42bbd 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;
 			}
-- 
2.8.1