From 44daa6ce83ef8ce0f43283d64d7bc08adeba67de Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 10 Sep 2014 18:05:18 -0400 Subject: [PATCH] Continuing to iterate on sidebar --- server/documents/modules/dropdown.html.eco | 33 ++++++ server/documents/modules/sidebar.html.eco | 102 +++++++++++++++--- server/files/javascript/sidebar.js | 6 ++ src/definitions/modules/dropdown.less | 54 +++++++++- src/definitions/modules/sidebar.js | 4 +- src/definitions/modules/sidebar.less | 7 +- .../default/modules/sidebar.variables | 2 - 7 files changed, 183 insertions(+), 25 deletions(-) diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index 780b90576..439967990 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -546,6 +546,39 @@ themes : ['Default'] +
+
Bottom pointing dropdown menus have sub-menus open upwards
+
+ +
+
+ + New +
+
Document
+
Image
+
+
+
Save
+
Edit
+
+
+
+ +
+
+ + New +
+
Document
+
Image
+
+
+
Save
+
Edit
+
+
+
diff --git a/server/documents/modules/sidebar.html.eco b/server/documents/modules/sidebar.html.eco index ea3320068..38a4c0a34 100755 --- a/server/documents/modules/sidebar.html.eco +++ b/server/documents/modules/sidebar.html.eco @@ -66,7 +66,10 @@ themes : ['Default']

Direction

-
Only left and right sidebars support all animations. Bottom sidebars must be overlays and top sidebars are limited to push, reveal, and overlay
+
Only top and bottom sidebars support dropdown menus. This is because elements with scrollbars cannot have absolutely positioned content escape the container.
+
+ Only left and right sidebars support all animations. Top and bottom sidebars must overlay page content. +

A sidebar can appear on different sides of the page

Left @@ -636,22 +639,93 @@ themes : ['Default'] Health Sports
-
+
File Permissions Share on Social Share by E-mail Edit Permissions Delete Permanently
-
-
Top Sidebar menu
- One - Two - Three -
-
-
Bottom Sidebar menu
- One - Two - Three -
+
+
+ + Home + +
+ + Shopping +
+
Categories
+
+ + Clothing +
+
Mens
+
Shirts
+
Pants
+
Jeans
+
Shoes
+
+
Womens
+
Dresses
+
Shoes
+
Bags
+
+
+
Home Goods
+
Bedroom
+
+
Order
+
Status
+
Cancellations
+
+
+ + Forums + + + Contact Us + +
+
+
+ + Home + +
+ + Shopping +
+
Categories
+
+ + Clothing +
+
Mens
+
Shirts
+
Pants
+
Jeans
+
Shoes
+
+
Womens
+
Dresses
+
Shoes
+
Bags
+
+
+
Home Goods
+
Bedroom
+
+
Order
+
Status
+
Cancellations
+
+
+ + Forums + + + Contact Us + +
+
\ No newline at end of file diff --git a/server/files/javascript/sidebar.js b/server/files/javascript/sidebar.js index e8565e306..9e305b27f 100755 --- a/server/files/javascript/sidebar.js +++ b/server/files/javascript/sidebar.js @@ -9,6 +9,12 @@ semantic.sidebar.ready = function() { handler ; + $('.ui.sidebar .ui.dropdown') + .dropdown({ + on: 'hover' + }) + ; + $('.left.sidebar') .sidebar() ; diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 79d7fad3b..ee6dfb683 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -633,12 +633,20 @@ select.ui.dropdown { z-index: @pointingArrowZIndex; } -/* Directions */ .ui.pointing.dropdown > .menu:after { top: @pointingArrowOffset; left: 50%; margin: 0em 0em 0em @pointingArrowOffset; } + +/* Top Left Pointing */ +.ui.top.left.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: @pointingArrowDistanceFromEdge 0em 0em; +} .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; @@ -653,6 +661,7 @@ select.ui.dropdown { margin: 0em; transform: rotate(45deg); } +/* Top Right Pointing */ .ui.top.right.pointing.dropdown > .menu { top: 100%; bottom: auto; @@ -668,6 +677,7 @@ select.ui.dropdown { transform: rotate(45deg); } +/* Left Pointing */ .ui.left.pointing.dropdown > .menu { top: 0%; left: 100%; @@ -681,6 +691,7 @@ select.ui.dropdown { transform: rotate(-45deg); } +/* Right Pointing */ .ui.right.pointing.dropdown > .menu { top: 0%; left: auto; @@ -695,4 +706,45 @@ select.ui.dropdown { transform: rotate(135deg); } +/* Bottom Pointing */ +.ui.bottom.pointing.dropdown > .menu { + top: auto; + bottom: 100%; + left: 0%; + right: auto; + margin: 0em 0em @pointingArrowDistanceFromEdge ; +} +.ui.bottom.pointing.dropdown > .menu:after { + top: auto; + bottom: @pointingArrowOffset; + right: auto; + margin: 0em; + transform: rotate(-135deg); +} +/* Reverse Sub-Menu Direction */ +.ui.bottom.pointing.dropdown > .menu .menu { + top: auto !important; + bottom: 0px !important; +} + +/* Bottom Left */ +.ui.bottom.left.pointing.dropdown > .menu { + left: 0%; + right: auto; +} +.ui.bottom.left.pointing.dropdown > .menu:after { + left: @pointingArrowDistanceFromEdge; + right: auto; +} + +/* Bottom Right */ +.ui.bottom.right.pointing.dropdown > .menu { + right: 0%; + left: auto; +} +.ui.bottom.right.pointing.dropdown > .menu:after { + left: auto; + right: @pointingArrowDistanceFromEdge; +} + .loadUIOverrides(); \ No newline at end of file diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index a419282e3..adf073c4c 100755 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -777,15 +777,15 @@ $.fn.sidebar.settings = { defaultTransition : { computer: { - top : 'reveal', left : 'reveal', right : 'reveal', + top : 'overlay', bottom : 'overlay' }, mobile: { - top : 'reveal', left : 'reveal', right : 'reveal', + top : 'overlay', bottom : 'overlay' } }, diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index ff30c5491..e1448b880 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -50,7 +50,7 @@ .ui.top.sidebar, .ui.bottom.sidebar { width: 100% !important; - height: @sidebarHeight !important; + height: auto !important; overflow-y: visible !important; } @@ -330,11 +330,6 @@ .pushable.right.reveal.pushed > .pusher { transform: translate3d(-@sidebarWidth, 0, 0); } -/*--- Top ---*/ -.pushable.top.reveal.pushed > .fixed, -.pushable.top.reveal.pushed > .pusher { - transform: translate3d(0, @sidebarHeight, 0); -} /*-------------- Slide Along diff --git a/src/themes/packages/default/modules/sidebar.variables b/src/themes/packages/default/modules/sidebar.variables index 5c7c5b624..3aabf1740 100755 --- a/src/themes/packages/default/modules/sidebar.variables +++ b/src/themes/packages/default/modules/sidebar.variables @@ -3,9 +3,7 @@ *******************************/ @sidebarWidth: 260px; -@sidebarHeight: 37px; @sidebarBackground: @black; -@sidebarTransition: transform 0.5s linear; @dimmerColor: rgba(0, 0, 0, 0.4);