adds quick and dirty responsive layout for toolbar

Datawheel · Jul 2, 2019 · 7fe79b7 · 7fe79b7
1 parent 52bc189
commit 7fe79b7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/packages/cms/app/style.yml b/packages/cms/app/style.yml
@@ -31,5 +31,5 @@ type-error-dark:  "#75224D"
 # measurements
 nav-height: "50px"
 cms-nav-height: "2rem"
-sidebar-width: "18rem"
-toolbox-width: "28rem"
+sidebar-width: "17rem"
+toolbox-width: "22.5rem"
diff --git a/packages/cms/src/components/toolbox/toolbox.css b/packages/cms/src/components/toolbox/toolbox.css
@@ -1,35 +1,42 @@
 @import "../../css/mixins";
 
+/* layout */
 .cms-panel:not(:last-child) {
-  width: calc(100% - var(--toolbox-width));
-  max-width: calc(100% - var(--toolbox-width));
+  @mixin min-md {
+    width: calc(100% - var(--toolbox-width));
+    max-width: calc(100% - var(--toolbox-width));
+
+    & ~ .cms-toolbox {
+      position: absolute;
+      width: var(--toolbox-width);
+      height: 100%;
+      max-height: calc(100vh - (var(--nav-height) + var(--cms-nav-height)));
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch; /* enable inertia scrolling */
+      /* positioning */
+      top: var(--nav-height);
+      right: 0;
+      bottom: 0;
+      left: auto;
+    }
+  }
 }
 
 .cms .cms-toolbox {
   /* sizing */
   display: block;
-  position: absolute;
-  width: var(--toolbox-width);
-  height: 100%;
-  max-height: calc(100vh - (var(--nav-height) + var(--cms-nav-height)));
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch; /* enable inertia scrolling */
-  /* positioning */
-  top: var(--nav-height);
-  right: 0;
-  bottom: 0;
-  left: auto;
-  margin-top: var(--cms-nav-height);
   /* layout */
-  padding: 1rem;
+  margin-top: var(--cms-nav-height);
+  padding: 2rem;
   /* theming */
   background-color: var(--light-2);
 
   @mixin dark-mode {
     background-color: color(var(--dark-3) a(0.25));
   }
 
-  & .card {
+  & .cms-card {
+    min-width: 0;
     max-width: 100%;
   }
 }