Slide esper-panel in from the bottom in side-by-side layout.

tropy · Dec 20, 2018 · e974af0 · e974af0
1 parent 2557aab
commit e974af0
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/src/stylesheets/abstracts/_variables.scss b/src/stylesheets/abstracts/_variables.scss
@@ -260,10 +260,12 @@ $slider-handle-size-sm: 10px;
 
 $esper-toolbar-transition-in-hover: 0.3s 0.4s ease;
 $esper-toolbar-transition-in-focus: 0.3s ease;
-$esper-toolbar-transition-out: 0.3s 0.3s ease;
-$esper-toolbar-blur-radius: 20px;
-$esper-cursor: const("ESPER.CURSOR");
-$esper-panel-width: 240px;
+$esper-toolbar-transition-out:      0.3s 0.3s ease;
+$esper-toolbar-blur-radius:         20px;
+$esper-cursor:                      const("ESPER.CURSOR");
+$esper-panel-width:                 240px;
+$esper-panel-height:                290px;
+$esper-panel-max-size:              506px; // 700 * 13 / 18
 
 
 // Scrollbar

diff --git a/src/stylesheets/components/esper/_esper.scss b/src/stylesheets/components/esper/_esper.scss
@@ -46,6 +46,10 @@
     flex: 1 1 0;
     display: flex;
     position: relative;
+
+    .side-by-side & {
+      flex-direction: column;
+    }
   }
 
   .esper-view {

diff --git a/src/stylesheets/components/esper/_panel.scss b/src/stylesheets/components/esper/_panel.scss
@@ -3,33 +3,63 @@
 // --------------------------------------------------
 
 .esper-panel {
-  flex: 0 0 $esper-panel-width;
   display: flex;
   flex-direction: column;
-  box-shadow: -1px 0 0 $esper-shadow;
   background: $esper-bg;
-  margin-right: -$esper-panel-width - 1px; // Also hide box-shadow
   position: relative; // Must be over esper-view for a clean transition in solid mode
-  transition: margin-right 0.3s ease;
+
+  .stacked & {
+    flex: 0 0 $esper-panel-width;
+    margin-right: -$esper-panel-width - 1px; // Also hide box-shadow
+    box-shadow: -1px 0 0 $esper-shadow;
+    transition: margin-right 0.3s ease;
+  }
+
+  .side-by-side & {
+    flex: 0 0 $esper-panel-height;
+    margin-bottom: -$esper-panel-height - 1px;
+    box-shadow: 0 -1px 0 $esper-shadow;
+    transition: margin-bottom 0.3s ease;
+  }
 
   .panel-visible & {
-    margin-right: 0;
+    .stacked & {
+      margin-right: 0;
+    }
+
+    .side-by-side & {
+      margin-bottom: 0;
+    }
   }
 
   .overlay-mode & {
     position: absolute;
-    top: $toolbar-height;
-    right: 0;
-    bottom: 0;
-    width: $esper-panel-width;
     background: $esper-overlay-bg;
-    box-shadow: inset 0 1px 0 $esper-shadow;
+
+    .stacked & {
+      top: $toolbar-height;
+      right: 0;
+      bottom: 0;
+      width: $esper-panel-width;
+      box-shadow: inset 0 1px 0 $esper-shadow;
+    }
+
+    .side-by-side & {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: $esper-panel-height;
+      box-shadow: none;
+    }
   }
 
   .adjustments {
     flex: 1 1 0;
     overflow-y: scroll;
     padding: 19px $default-padding-horizontal 0; // todo
+    margin: auto;
+    width: 100%;
+    max-width: $esper-panel-max-size;
   }
 
   .adjustment {
@@ -62,6 +92,9 @@
   .revert-btn-container {
     flex: 0 0 auto;
     padding: 6px $default-padding-horizontal;
+    margin: auto;
+    width: 100%;
+    max-width: $esper-panel-max-size;
   }
 
   .esper:not(.overlay-mode) & {