From e804e5b7c016a5847022bcab6777d4fa64cb69e4 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 21 Jul 2016 14:34:46 -0400
Subject: [PATCH] (css) Fix breakpoints

---
 UI/Templates/SchedulerUI/UIxCalMainView.wox    |  2 +-
 UI/WebServerResources/scss/core/mixins.scss    |  6 +++---
 UI/WebServerResources/scss/core/variables.scss | 18 ++++++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index e78ebb0e4..7b0439076 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -683,7 +683,7 @@
             </md-fab-actions>
           </md-fab-speed-dial>
         </div>
-        <div id="detailView" class="view-detail hide show-gt-md md-default-theme md-background md-bg md-hue-2"
+        <div id="detailView" class="view-detail hide show-gt-xs md-default-theme md-background md-bg md-hue-2"
              layout="column" ui-view="calendarView">
           <!-- calendar view -->
         </div>
diff --git a/UI/WebServerResources/scss/core/mixins.scss b/UI/WebServerResources/scss/core/mixins.scss
index c2d821dc1..71f054d96 100644
--- a/UI/WebServerResources/scss/core/mixins.scss
+++ b/UI/WebServerResources/scss/core/mixins.scss
@@ -18,15 +18,15 @@
 // using "Breakpoint" (https://github.com/at-import/breakpoint)
 @mixin at($breakpoint) {
   $min_idx: index($slicer-breakpoint-names, $breakpoint);
-  $min: nth($slicer-breakpoints, $min_idx) + 1;
-  $max: nth($slicer-breakpoints, $min_idx + 1);
+  $min: nth($slicer-breakpoints, $min_idx);
+  $max: nth($slicer-breakpoints, $min_idx + 1) - 1;
   @include breakpoint($min $max) {
     @content;
   }
 }
 @mixin from($breakpoint) {
   $min_idx: index($slicer-breakpoint-names, $breakpoint);
-  $min: nth($slicer-breakpoints, $min_idx + 1);
+  $min: nth($slicer-breakpoints, $min_idx);
   @include breakpoint($min) {
     @content;
   }
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index f992ebf74..877194515 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -64,6 +64,24 @@ $touch-zone: $touch-zone-width;
 // angular-material share breakpoint values between sass and js files (/core/constant.js)
 // we might consider using a sass library to import values as json single source for both
 
+/**
+ *  Breakpoint:   0                    600px       960px     1024px        1280px
+ *                ├───────────────────┼─────────┼─────────┼───────────┼─────────>
+ *  Slice  :                xs           ·    sm    ·    md    ·     lg      .    xl
+ *                ·                      ·          ·          ·             ·
+ *                ·                      ·          ·  at(md)  ·             ·
+ *                ·                      ·          ├─────────┤             ·
+ *                ·                      ·          ·          ·             ·
+ *                ·                      ·          · from(md) ·             ·
+ *                ·                      ·          ├───────────────────────────────>
+ *                ·                      ·                     ·             ·
+ *                ·                      ·            to(md)   ·             ·
+ *                ├─────────────────────────────────────────┤           ·
+ *                                       ·                                   ·
+ *                                       ·         between(sm, lg)           ·
+ *                                       ├───────────────────────────────┤
+ */
+
 $layout-breakpoint-xs:     600px !default;
 $layout-breakpoint-sm:     960px !default;
 $layout-breakpoint-md:     1280px !default;