From 57a3c21cbff2cb7e333ed54bb183d684294ffb15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 5 May 2015 09:40:11 +0200
Subject: [PATCH] Add responsive behavior for very small screens

---
 app/styles/dependencies/responsive.scss     | 23 +++++++++++----------
 app/styles/modules/issues/issues-table.scss | 15 ++++++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/app/styles/dependencies/responsive.scss b/app/styles/dependencies/responsive.scss
index 69c4ecc7..94218c7f 100644
--- a/app/styles/dependencies/responsive.scss
+++ b/app/styles/dependencies/responsive.scss
@@ -2,17 +2,18 @@
 // - I know, I know, but look it closer, it makes sense
 // - Oh, I see. It's ok for this time...
 
-$break-small: 320px;
-$break-large: 1024px;
+@mixin breakpoint($point) {
+    @if $point == desktop {
+        @media (min-width: 1200px) { @content ; }
+    }
+    @else if $point == laptop {
+        @media (max-width: 1200px) { @content ; }
+    }
+    @else if $point == tablet {
+       @media (max-width: 767px) { @content ; }
+    }
+    @else if $point == mobileonly {
+        @media (max-width: 480px) { @content ; }
 
-@mixin respond-to($media) {
-    @if $media == handhelds {
-        @media only screen and (max-width: $break-small) { @content; }
-    }
-    @if $media == medium-screens {
-        @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
-    }
-    @if $media == wide-screens {
-        @media only screen and (min-width: $break-large) { @content; }
     }
 }
diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss
index 9ff1a1fc..22a4a2ec 100644
--- a/app/styles/modules/issues/issues-table.scss
+++ b/app/styles/modules/issues/issues-table.scss
@@ -111,4 +111,19 @@
             top: auto;
         }
     }
+    .level-field,
+    .created-field {
+        @include breakpoint(laptop) {
+            display: none;
+        }
+    }
+    .level-field,
+    .created-field,
+    .assigned-field {
+        @include breakpoint(tablet) {
+            display: none;
+        }
+    }
 }
+
+