From cdb0bc644b4cc0f15b3720d06623d4b010f7ef05 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 3 Sep 2014 13:38:56 -0400 Subject: [PATCH] Attempting to fix overflow issues with sidebar --- server/documents/modules/sidebar.html.eco | 6 +- server/files/javascript/semantic.js | 2 +- server/files/stylesheets/semantic.css | 42 ++---- server/layouts/default.html.eco | 2 +- src/definitions/modules/sidebar.js | 69 +++++++--- src/definitions/modules/sidebar.less | 126 +++++++++--------- .../default/modules/sidebar.variables | 8 +- 7 files changed, 139 insertions(+), 116 deletions(-) diff --git a/server/documents/modules/sidebar.html.eco b/server/documents/modules/sidebar.html.eco index 0edc99da8..f32adad6b 100755 --- a/server/documents/modules/sidebar.html.eco +++ b/server/documents/modules/sidebar.html.eco @@ -31,6 +31,9 @@ themes : ['Default']

Animation

A sidebar can use different animations to change contexts

+
+ Safe +
Overlay
@@ -52,9 +55,6 @@ themes : ['Default']
Scale Up
-
- Recede -
Open Door
diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index d0909a068..c8b0ca696 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -59,7 +59,7 @@ semantic.ready = function() { $overview = $('.overview.item, .overview.button'), $designer = $('.designer.item'), - $sidebarButton = $('.attached.launch.button'), + $sidebarButton = $('.fixed.launch.button'), $code = $('div.code').not('.existing'), $existingCode = $('.existing.code'), diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 958069304..2906c1158 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -217,9 +217,9 @@ a:hover { #example .main.menu { top: 0px; - left: -1px; + left: auto; min-width: 320px; - width: calc(100% - 15px); + width: 100%; z-index: 900; -webkit-box-sizing: border-box; @@ -253,24 +253,6 @@ a:hover { margin-left: 2em; } -/*-------------- - Pushed ----------------*/ - -/*#example.show .main.menu, -#example.pushed .main.menu, -#example.hide .main.menu { - left: -1px; - top: -1px; - width: calc(100% + 2px); -} -*/ -#example.hide .attached.launch.button, -#example.show .attached.launch.button { - transition: none !important; - pointer-events: none !important; - animation: none !important; -} /*-------------- Intro @@ -582,10 +564,10 @@ body#example.index { #example .stripe .message { margin: 2em 0em; } -#example .attached.launch.button { +#example .fixed.launch.button { position: fixed; top: 63px; - left: -1px; + left: auto; z-index: 500; width: 55px; height: 50px; @@ -606,7 +588,7 @@ body#example.index { 0.3s width ease ; } -#example .attached.launch.button .text { +#example .fixed.launch.button .text { position: absolute; top: 15px; left: 54px; @@ -627,12 +609,16 @@ body#example.index { 0.3s opacity 0.3s ; } -#example .attached.launch.button:hover { +#example .fixed.launch.button:hover { width: 130px; } -#example .attached.launch.button:hover .text { +#example .fixed.launch.button:hover .text { opacity: 1; } +#example.index .fixed.launch.button { + top: 96px; +} + #example .shortcuts { float: right; @@ -647,10 +633,6 @@ body#example.index { #example.index pre.console { height: 120px; } -#example.index .attached.launch.button { - top: 96px; -} - #example .main.container { position: relative; padding-bottom: 2em; @@ -1416,7 +1398,7 @@ body.progress .ui.progress .bar { margin: 0px auto; max-width: 9999px; } - #example .attached.launch.button { + #example .fixed.launch.button { display: none; } #example .fixed .launch { diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index 0355c0738..0f788f163 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -247,7 +247,7 @@
-
+
Menu
diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index 58da5e755..b2e36f6c4 100755 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -58,6 +58,7 @@ $.fn.sidebar = function(parameters) { $sidebars = $context.children(selector.sidebar), $pusher = $context.children(selector.pusher), $page = $pusher.children(selector.page), + $fixed = $pusher.find(selector.fixed), element = this, instance = $module.data(moduleNamespace), @@ -110,6 +111,7 @@ $.fn.sidebar = function(parameters) { bind: { clickaway: function() { $context + .on('scroll' + eventNamespace, module.event.preventScroll) .on('click' + eventNamespace, module.event.clickaway) .on('touchend' + eventNamespace, module.event.clickaway) ; @@ -118,8 +120,7 @@ $.fn.sidebar = function(parameters) { unbind: { clickaway: function() { $context - .off('click' + eventNamespace) - .off('touchend' + eventNamespace) + .off(eventNamespace) ; } }, @@ -131,6 +132,32 @@ $.fn.sidebar = function(parameters) { $sidebars = $context.children(selector.sidebar); $pusher = $context.children(selector.pusher); $page = $pusher.children(selector.page); + $fixed = $pusher.find(selector.fixed); + }, + + convert: { + toAbsolute: function() { + /* var + scrollTop = $(document).scrollTop() + ; + $fixed + .each(function() { + console.log('translate3d(0, ' + scrollTop + 'px, 0px)'); + $(this) + .css({ + transform: 'translate3d(0, ' + scrollTop + 'px, 0px)' + }) + ; + }) + ;*/ + }, + toFixed: function() { + /* $fixed + .css({ + transform: 'translate3d(0, 0px, 0px)' + }) + ;*/ + } }, setup: { @@ -147,10 +174,15 @@ $.fn.sidebar = function(parameters) { .wrapAll($pusher) ; } - if($module.parent()[0] !== $context[0]) { + if($module.prevAll($page)[0] !== $page[0]) { module.debug('Moved sidebar to correct parent element'); - $module.detach().appendTo($context); + $module.detach().prependTo($context); } + $fixed + .css({ + transform: 'translate3d(0, 0px, 0px)' + }) + ; module.refresh(); }, context: function() { @@ -192,6 +224,7 @@ $.fn.sidebar = function(parameters) { if(settings.animation !== 'overlay') { module.hideAll(); } + module.convert.toAbsolute(); module.pushPage(function() { $.proxy(callback, element)(); $.proxy(settings.onShow, element)(); @@ -212,6 +245,7 @@ $.fn.sidebar = function(parameters) { module.debug('Hiding sidebar', callback); if(module.is.visible()) { module.pullPage(function() { + module.convert.toFixed(); $.proxy(callback, element)(); $.proxy(settings.onHidden, element)(); }); @@ -241,16 +275,18 @@ $.fn.sidebar = function(parameters) { pushPage: function(callback) { var - $transition = (settings.animation == 'overlay') - ? $module - : $pusher + $transition = (settings.animation == 'safe') + ? $context + : (settings.animation == 'overlay') + ? $module + : $pusher ; callback = $.isFunction(callback) ? callback : function(){} ; module.verbose('Adding context push state', $context); - if(settings.animation != 'overlay') { + if(settings.animation !== 'overlay') { module.remove.allVisible(); } $transition @@ -267,17 +303,19 @@ $.fn.sidebar = function(parameters) { module.set.visible(); module.set.animation(); module.set.direction(); - setTimeout(function() { + requestAnimationFrame(function() { module.set.inward(); module.set.pushed(); - }, 500); + }); }, pullPage: function(callback) { var - $transition = (settings.animation == 'overlay') - ? $module - : $pusher + $transition = (settings.animation == 'safe') + ? $context + : (settings.animation == 'overlay') + ? $module + : $pusher ; callback = $.isFunction(callback) ? callback @@ -648,8 +686,8 @@ $.fn.sidebar.settings = { verbose : false, performance : false, - animation : 'scale down', - mobileAnimation : 'reveal', + animation : 'safe', + mobileAnimation : 'safe', context : 'body', useCSS : true, @@ -677,6 +715,7 @@ $.fn.sidebar.settings = { selector: { sidebar : '.ui.sidebar', + fixed : '.ui.fixed', pusher : '.pusher', page : '.page', omitted : 'script, link, style, .ui.modal, .ui.nag' diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index 6d6147d0e..55e0dbd13 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -26,7 +26,7 @@ /* Sidebar Menu */ .ui.sidebar { - position: absolute; + position: fixed; top: 0; left: 0; visibility: hidden; @@ -53,7 +53,7 @@ background: @canvasBackground !important; position: relative; height: 100%; - overflow: hidden; + overflow-x: hidden; } /*-------------- @@ -61,14 +61,10 @@ ---------------*/ .pushable > .pusher { - position: relative; background: @canvasBackground; - left: 0; height: 100%; - z-index: 2; - transform: translate3d(0px, 0, 0); + z-index: 1002; transition: transform @duration @easing; - will-change: transform; } /*-------------- @@ -76,10 +72,8 @@ ---------------*/ .pushable > .pusher > .page { + position: relative; background: @bodyBackground; - overflow-y: auto; - height: 100%; - -webkit-overflow-scrolling: touch; } /*-------------- @@ -87,7 +81,7 @@ ---------------*/ .pushable > .pusher > .page:after { - position: fixed; + position: absolute; top: 0px; right: 0px; content: ''; @@ -96,7 +90,7 @@ height: 0px; overflow: hidden; opacity: 0; - z-index: 999; + z-index: @dimmerLayer; transition: opacity @duration; will-change: opacity; } @@ -110,6 +104,10 @@ Pushed ---------------*/ +.pushable.pushed { + overflow-x: hidden; +} + /* Show Dimmer */ .pushable.pushed > .pusher > .page:after { width: 100% !important; @@ -157,7 +155,7 @@ /* Set-up */ .pushable.overlay > .visible.ui.sidebar { transform: translate3d(-100%, 0, 0); - z-index: 3; + z-index: @topLayer; } /* Pushed */ @@ -196,6 +194,32 @@ transition: transform @duration @easing; } +/*-------------- + Safe Mode +---------------*/ + +/* Set-Up */ +.pushable.safe > .pusher { + position: relative; + transform: none !important; + transition: none !important; +} +.pushable.safe > .pusher { + transform: none !important; + transition: none !important; +} + +/* Pushed */ +.pushable.safe.pushed { + margin-left: @sidebarWidth !important; +} + +.pushable.safe.show, +.pushable.safe.hide { + transition: margin @duration @easing !important; +} + + /*-------------- Reveal @@ -204,10 +228,9 @@ /* Set-up */ .pushable.reveal > .pusher { transform: translate3d(0px, 0, 0); - z-index: 2; + z-index: @bottomLayer; } .pushable.reveal > .visible.ui.sidebar { - z-index: 1; transition: none; } @@ -224,12 +247,10 @@ /* Set-up */ .pushable.slide.along > .pusher { transform: translate3d(0px, 0, 0); - z-index: 3; + z-index: @bottomLayer; } .pushable.slide.along > .visible.ui.sidebar { - z-index: 2; transform: translate3d(-50%, 0, 0); - transition: transform @duration @easing; } /* Pushed */ @@ -240,6 +261,11 @@ transform: translate3d(0%, 0, 0); } +.pushable.slide.along.show > .visible.ui.sidebar, +.pushable.slide.along.hide > .visible.ui.sidebar { + transition: transform @duration @easing; +} + /*-------------- Slide Out @@ -251,7 +277,6 @@ } .pushable.slide.out > .visible.ui.sidebar { transform: translate3d(50%, 0, 0); - transition: transform @duration @easing; } /* Pushed */ @@ -262,6 +287,12 @@ transform: translate3d(0%, 0, 0); } +.pushable.slide.out.show > .visible.ui.sidebar, +.pushable.slide.out.hide > .visible.ui.sidebar { + transition: transform @duration @easing; +} + + /*-------------- Scale Down @@ -269,20 +300,22 @@ /* Set-up */ .pushable.scale.down { - perspective: 1500px; + perspective: @perspective; } .pushable.scale.down > .pusher { transform-style: preserve-3d; - z-index: 2; + z-index: @bottomLayer; + transform-origin: 75% 50%; + overflow: hidden; } .pushable.scale.down > .visible.ui.sidebar { transform: translate3d(-100%, 0, 0); - z-index: 3; + z-index: @topLayer; } /* Pushed */ .pushable.scale.down.pushed > .pusher { - transform: translate3d(210px, 0px, -500px); + transform: scale(0.75); } .pushable.scale.down.pushed > .visible.ui.sidebar { transform: translate3d(0, 0, 0); @@ -301,16 +334,12 @@ /* Set-up */ .pushable.scale.up { - perspective: 1500px; + perspective: @perspective; perspective-origin: 0% 50%; } .pushable.scale.up > .ui.sidebar { - z-index: 1; transform: translate3d(0, 0, -@sidebarWidth); } -.pushable.scale.up > .pusher { - z-index: 2; -} /* Pushed */ .pushable.scale.up.pushed > .pusher { @@ -327,55 +356,22 @@ } -/*-------------- - Recede ----------------*/ - -/* Set-up */ -.pushable.recede { - perspective: 1500px; -} -.pushable.recede > .ui.sidebar { - opacity: 1; - transform: translate3d(-100%, 0, 0); - z-index: 3; -} -.pushable.recede > .pusher { - transform: translate3d(0%, 0px, 0px) rotateY(0deg); - z-index: 2; -} - -/* Pushed */ -.pushable.recede.pushed > .pusher { - transform: translate3d(15%, 0px, -400px) rotateY(-15deg); -} -.pushable.recede.pushed > .visible.ui.sidebar { - transform: translate3d(0, 0, 0); -} - -/* Animation */ -.pushable.recede.show > .ui.sidebar, -.pushable.recede.hide > .ui.sidebar { - transition: transform @duration @easing; -} - /*-------------- Open Door ---------------*/ /* Set-up */ .pushable.open.door { - perspective: 1500px; + perspective: @perspective; } .pushable.open.door > .ui.sidebar { opacity: 1; transform: translate3d(-100%, 0, 0); - z-index: 3; + z-index: @topLayer; } .pushable.open.door > .pusher { transform-origin: 100% 50%; transform: rotateY(0deg); - z-index: 2; } @@ -399,11 +395,11 @@ /* Set-up */ .pushable.rotate.in { - perspective: 1500px; + perspective: @perspective; perspective-origin: 0% 50%; } .pushable.rotate.in > .pusher { - transform-style: preserve-3d; + perspective: none; } .pushable.rotate.in > .ui.sidebar { transform: translate3d(-100%, 0, 0) rotateY(90deg); diff --git a/src/themes/packages/default/modules/sidebar.variables b/src/themes/packages/default/modules/sidebar.variables index 35ddfca24..b07eab6bd 100755 --- a/src/themes/packages/default/modules/sidebar.variables +++ b/src/themes/packages/default/modules/sidebar.variables @@ -10,6 +10,12 @@ @canvasBackground: @lightBlack; @pageBackground: @bodyBackground; +@perspective: 1500px; @duration: 0.5s; -@easing: ease; \ No newline at end of file +@easing: ease; + +@bottomLayer: 1001; +@middleLayer: 1002; +@dimmerLayer: 1003; +@topLayer: 1004; \ No newline at end of file