Add top and bottom drawer

ocsigen · May 30, 2018 · 03610f6 · 03610f6
1 parent 1f5bef1
commit 03610f6
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 12 deletions.
diff --git a/css/ot_drawer.css b/css/ot_drawer.css
@@ -52,7 +52,7 @@ html.ot-drawer-open, html.ot-drawer-open > body {
 .ot-drawer {
 
     position: fixed;
-    top: 0;
+    width: 100%;
     height: 100%;
     z-index: 1;
 
@@ -63,10 +63,8 @@ html.ot-drawer-open, html.ot-drawer-open > body {
      * with overflow-y: auto ; touch-action: pan-y; */
     overflow: visible ;
 
-    transform: translateX(0);
     transition: -webkit-transform .2s ease-out;
     transition: transform .2s ease-out;
-    width: calc(100% - 50px) ;
 
     /* We set up drawer so that the default transform is the identity
      * Otherwise, with Firefox, a transition is performed on page
@@ -76,23 +74,54 @@ html.ot-drawer-open, html.ot-drawer-open > body {
 }
 
 @media (min-width: 720px) {
-    .ot-drawer {
+    .ot-drawer.ot-dr-left, .ot-drawer.ot-dr-right {
         width: 300px;
     }
+
+    .ot-drawer.ot-dr-top, .ot-drawer.ot-dr-bottom {
+        height: 300px;
+    }
+}
+
+@media (max-width: 720px) {
+    .ot-drawer.ot-dr-left, .ot-drawer.ot-dr-right {
+        width: calc(100% - 50px);
+    }
+
+    .ot-drawer.ot-dr-top, .ot-drawer.ot-dr-bottom {
+        height: calc(100% - 50px);
+    }
 }
 
-.ot-drawer.ot-dr-left { right: 100% ; }
-.ot-drawer.ot-dr-right { left: 100% ; }
+.ot-drawer.ot-dr-top { bottom: 100% ; }
+.ot-drawer.ot-dr-right { left: 100% ; top: 0 }
+.ot-drawer.ot-dr-bottom { top: 100% ; }
+.ot-drawer.ot-dr-left { right: 100% ; top: 0 }
 
 .ot-dr-toggle-button::before { content: "≡"; }
-.ot-drawer-bckgrnd.ot-dr-open .ot-dr-toggle-button::before { content: "⟨"; }
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-top .ot-dr-toggle-button::before {
+    content: "︿" ;
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-right .ot-dr-toggle-button::before {
+    content: "⟩" ;
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-bottom .ot-dr-toggle-button::before {
+    content: "﹀" ;
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-dr-left .ot-dr-toggle-button::before {
+    content: "⟨" ;
+}
+
 .ot-drawer-bckgrnd.ot-dr-open .ot-dr-toggle-button {
     background-color: #445;
 }
 
 .ot-drawer > .ot-dr-toggle-button {
     position: absolute ;
-    top: 0 ;
     cursor: pointer ;
     height: 50px;
     width: 50px;
@@ -103,6 +132,21 @@ html.ot-drawer-open, html.ot-drawer-open > body {
     outline: none;
 }
 
+.ot-drawer.ot-dr-top > .ot-dr-toggle-button {
+    top: 100% ;
+    right: calc(50% - 25px) ;
+}
+
+.ot-drawer.ot-dr-right > .ot-dr-toggle-button,
+.ot-drawer.ot-dr-left > .ot-dr-toggle-button {
+    top: 0 ;
+}
+
+.ot-drawer.ot-dr-bottom > .ot-dr-toggle-button {
+    bottom: 100% ;
+    left: calc(50% - 25px) ;
+}
+
 .ot-drawer.ot-dr-left > .ot-dr-toggle-button { left: 100% ; }
 .ot-drawer.ot-dr-right > .ot-dr-toggle-button { right: 100% ; }
 
@@ -114,5 +158,15 @@ html.ot-drawer-open, html.ot-drawer-open > body {
 
 .ot-drawer-bckgrnd.ot-dr-open .ot-drawer.ot-dr-right {
     -webkit-transform: translateX(-100%);
-    transform: translate(-100%);
+    transform: translateX(-100%);
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-drawer.ot-dr-top  {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%);
+}
+
+.ot-drawer-bckgrnd.ot-dr-open .ot-drawer.ot-dr-bottom {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
 }
diff --git a/src/widgets/ot_drawer.eliom b/src/widgets/ot_drawer.eliom
@@ -95,8 +95,10 @@ let%shared drawer
   in
   let d = D.div ~a:[a_class [ "ot-drawer"
                             ; match position with
-                            | `Left -> "ot-dr-left"
-                            | `Right -> "ot-dr-right"]]
+                            | `Top -> "ot-dr-top"
+                            | `Right -> "ot-dr-right"
+                            | `Bottom -> "ot-dr-bottom"
+                            | `Left -> "ot-dr-left"]]
       (toggle_button :: (content :> Html_types.div_content elt list))
   in
   let bckgrnd_init_class = if opened then ["ot-dr-open"] else [] in

diff --git a/src/widgets/ot_drawer.eliomi b/src/widgets/ot_drawer.eliomi
@@ -43,7 +43,7 @@
 *)
 val drawer :
   ?a:[< Html_types.div_attrib] Eliom_content.Html.attrib list ->
-  ?position:[ `Left | `Right ] ->
+  ?position:[ `Top | `Right | `Bottom | `Left ] ->
   ?opened:bool ->
   ?swipe:bool ->
   ?onclose:(unit -> unit) Eliom_client_value.t ->