css: centralize zindex and fix modals ui on small devices (#478)

okTurtles · Aug 31, 2018 · 2e12fc8 · 2e12fc8
1 parent 2b72bfd
commit 2e12fc8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git a/frontend/simple/assets/sass/_groupincome.scss b/frontend/simple/assets/sass/_groupincome.scss
@@ -32,7 +32,7 @@ body {
 
   @include tablet {
     padding: $gi-spacer-lg $gi-spacer*1.5;
-    margin-left: $gi-sidebarWidth;
+    margin-left: $gi-sidebar-width;
   }
 }
 

diff --git a/frontend/simple/assets/sass/bulma_overrides/components/modal.scss b/frontend/simple/assets/sass/bulma_overrides/components/modal.scss
@@ -1,18 +1,21 @@
 $modal-content-margin-mobile: 0;
-$modal-content-margin-mobile: $gi-spacer-lg;
+$modal-content-margin-mobile: $gi-spacer-sm;
 
 $modal-card-head-background-color: $body-background-color;
 $modal-card-head-border-bottom: none;
 $modal-card-head-padding: $gi-spacer-lg $gi-spacer;
 $modal-card-title-line-height: inherit;
 $modal-card-foot-border-top: $modal-card-head-border-bottom;
-$modal-card-body-padding: 0;
+$modal-card-body-padding: $gi-spacer $gi-spacer-lg;
+$modal-z: $gi-zindex-modal;
 
 @import "../../node_modules/bulma/sass/components/modal";
 
 // Bulma customization variables are not enough
 
 .modal-card {
+  width: auto;
+
   .delete {
     position: absolute;
     top: $gi-spacer;
@@ -31,8 +34,6 @@ $modal-card-body-padding: 0;
   }
 
   @include tablet {
-    width: auto;
-
     &-head,
     &-body,
     &-foot {

diff --git a/frontend/simple/assets/sass/theme/index.scss b/frontend/simple/assets/sass/theme/index.scss
@@ -3,14 +3,21 @@ $gi-opacity-1: 0.75;
 $gi-opacity-2: 0.5;
 $gi-opacity-3: 0.25;
 
-$gi-spacer: 1rem; // same as gap but in rem
+$gi-spacer: 1rem; // same as Gulp $gap but using rem
 $gi-spacer-xl: $gi-spacer * 4;
 $gi-spacer-lg: $gi-spacer * 2;
 $gi-spacer-md: $gi-spacer;
 $gi-spacer-sm: $gi-spacer / 2;
 $gi-spacer-xs: $gi-spacer / 4;
 
-$gi-sidebarWidth: 15rem;
+$gi-sidebar-width: 15rem;
+
+// z-index constants
+// Why: https://css-tricks.com/handling-z-index/
+$gi-zindex-tooltip: 50;
+$gi-zindex-modal: 40;
+$gi-zindex-header: 30;
+// $gi-zindex-something: **; create when needed
 
 // TODO: Find a way to generated different import themes
 @import "kindergarten-professional";

diff --git a/frontend/simple/views/containers/TimeTravel.vue b/frontend/simple/views/containers/TimeTravel.vue
@@ -13,7 +13,7 @@
   bottom: 10px;
   left: 10%;
   width: 80%;
-  z-index: 99999;
+  z-index: $gi-zindex-tooltip;
   box-shadow: 0 2px 30px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 }
 

diff --git a/frontend/simple/views/containers/sidebar/Sidebar.vue b/frontend/simple/views/containers/sidebar/Sidebar.vue
@@ -53,9 +53,9 @@ $speed: 300ms;
   position: fixed;
   top: 0;
   left: 0;
-  width: $gi-sidebarWidth;
+  width: $gi-sidebar-width;
   height: 100vh;
-  z-index: 10;
+  z-index: $gi-zindex-header;
   flex-direction: column;
   // background: linear-gradient(210deg, rgba($primary, 0.15), $body-background-color 20rem); // diagonal gradient
   // background: linear-gradient(-90deg, $primary-bg-s, $body-background-color 15rem); // 90deg linear gradient
@@ -71,7 +71,7 @@ $speed: 300ms;
   }
 
   @include tablet {
-    width: $gi-sidebarWidth;
+    width: $gi-sidebar-width;
   }
 
   &-header {