diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 9376561ae..250f9091b 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -889,13 +889,6 @@ .ui[class*="equal height"].grid { display: table; table-layout: fixed; - width: @tableWidth; -} -.ui[class*="equal height"].relaxed.grid { - width: @relaxedTableWidth; -} -.ui[class*="equal height"][class*="very relaxed"].grid { - width: @veryRelaxedTableWidth; } .ui[class*="equal height"].grid > .row, diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index a217253a2..363bd2fce 100644 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -55,7 +55,7 @@ $.fn.sidebar = function(parameters) { $context = $(settings.context), $style = $('style[title=' + namespace + ']'), - $sidebars = $context.children(selector.sidebar), + $sidebars = $module.children(selector.sidebar), $pusher = $context.children(selector.pusher), element = this, @@ -79,11 +79,11 @@ $.fn.sidebar = function(parameters) { settings.useLegacy = true; } - module.setup.context(); + module.set.pushable(); module.set.direction(); module.set.transition(); - // avoid locking rendering to change layout if included in onReady + // avoid locking rendering if included in onReady requestAnimationFrame(module.setup.layout); module.instantiate(); @@ -175,10 +175,6 @@ $.fn.sidebar = function(parameters) { $module.detach().prependTo($context); } module.refresh(); - }, - context: function() { - module.verbose('Adding pusshable class to wrapper'); - $context.addClass(className.pushable); } }, @@ -216,8 +212,12 @@ $.fn.sidebar = function(parameters) { module.error(error.overlay); settings.transition = 'overlay'; } - if(settings.transition !== 'overlay') { - module.hideAll(); + module.refresh(); + if(module.othersVisible() && module.get.transition() != 'overlay') { + module.debug('Other sidebars currently open'); + if(settings.exclusive) { + module.hideOthers(); + } } animateMethod(function() { $.proxy(callback, element)(); @@ -252,12 +252,29 @@ $.fn.sidebar = function(parameters) { } }, - hideAll: function() { + othersVisible: function() { + return ($sidebars.not($module).filter('.' + className.visible).size() > 0); + }, + othersActive: function() { + return ($sidebars.not($module).filter('.' + className.active).size() > 0); + }, + + hideOthers: function(callback) { var - $visibleSidebars = $sidebars.find('.' + className.visible) + $otherSidebars = $sidebars.not($module).filter('.' + className.visible), + callback = callback || function(){}, + sidebarCount = $otherSidebars.size(), + callbackCount = 0 ; - $visibleSidebars - .sidebar('hide') + console.log($sidebars); + $otherSidebars + .sidebar('hide', function() { + callbackCount++; + console.log('callback count'); + if(callbackCount == sidebarCount) { + callback(); + } + }) ; }, @@ -276,7 +293,7 @@ $.fn.sidebar = function(parameters) { transition = module.get.transition(), $transition = (transition == 'safe') ? $context - : (transition == 'overlay') + : (transition == 'overlay' || module.othersActive()) ? $module : $pusher, animate, @@ -286,13 +303,15 @@ $.fn.sidebar = function(parameters) { ? callback : function(){} ; - module.remove.outward(); + module.set.inward(); animate = function() { - module.set.inward(); - module.set.visible(); - requestAnimationFrame(function() { + if(!module.othersActive()) { + if(settings.dimPage) { + $pusher.addClass(className.dimmed); + } module.set.pushed(); - }); + } + module.set.visible(); }; transitionEnd = function(event) { if( event.target == $transition[0] ) { @@ -304,17 +323,10 @@ $.fn.sidebar = function(parameters) { } }; $transition.on(transitionEvent + eventNamespace, transitionEnd); - module.verbose('Adding context push state', $context); - if(transition === 'overlay') { - animate(); - } - else { - if(settings.transition == 'scale down' || module.is.mobile()) { - module.scrollToTop(); - } - module.remove.allVisible(); - animate(); + if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) { + module.scrollToTop(); } + animate(); }, pullPage: function(callback) { @@ -322,7 +334,7 @@ $.fn.sidebar = function(parameters) { transition = module.get.transition(), $transition = (transition == 'safe') ? $context - : (transition == 'overlay') + : (transition == 'overlay' || module.othersActive()) ? $module : $pusher, animate, @@ -333,12 +345,16 @@ $.fn.sidebar = function(parameters) { : function(){} ; module.verbose('Removing context push state', module.get.direction()); - animate = function() { + if(!module.othersActive()) { module.unbind.clickaway(); - module.remove.inward(); + } + animate = function() { module.set.outward(); module.remove.active(); - module.remove.pushed(); + if(settings.dimPage && !module.othersActive()) { + $pusher.removeClass(className.dimmed); + module.remove.pushed(); + } }; transitionEnd = function(event) { if( event.target == $transition[0] ) { @@ -370,8 +386,10 @@ $.fn.sidebar = function(parameters) { module.debug('Using javascript to push context', properties); module.set.visible(); module.set.transition(); - module.set.direction(); module.set.inward(); + if(settings.dimPage) { + $pusher.addClass(className.dimmed); + } module.set.pushed(); $context .animate(properties, settings.duration, settings.easing, function() { @@ -398,6 +416,9 @@ $.fn.sidebar = function(parameters) { module.unbind.clickaway(); module.set.outward(); module.remove.active(); + if(settings.dimPage && !module.othersVisible()) { + $pusher.removeClass(className.dimmed); + } module.remove.pushed(); $context .animate(properties, settings.duration, settings.easing, function() { @@ -423,11 +444,11 @@ $.fn.sidebar = function(parameters) { set: { // container pushed: function() { - if(settings.dimPage) { - $pusher.addClass(className.dimmed); - } $context.addClass(className.pushed); }, + pushable: function() { + $context.addClass(className.pushable); + }, // sidebar active: function() { @@ -449,16 +470,19 @@ $.fn.sidebar = function(parameters) { }, visible: function() { $module.addClass(className.visible); + }, + overlay: function() { + $module.addClass(className.overlay); } }, remove: { // context pushed: function() { - if(settings.dimPage) { - $pusher.removeClass(className.dimmed); - } $context.removeClass(className.pushed); }, + pushable: function() { + $context.removeClass(className.pushable); + }, // sidebar active: function() { @@ -481,11 +505,8 @@ $.fn.sidebar = function(parameters) { visible: function() { $module.removeClass(className.visible); }, - allVisible: function() { - if($sidebars.hasClass(className.visible)) { - module.debug('Other sidebars visible, hiding'); - $sidebars.removeClass(className.visible); - } + overlay: function() { + $module.removeClass(className.overlay); } }, @@ -760,7 +781,7 @@ $.fn.sidebar = function(parameters) { } else { if(instance !== undefined) { - module.destroy(); + module.invoke('destroy'); } module.initialize(); } @@ -800,7 +821,7 @@ $.fn.sidebar.settings = { }, context : 'body', - exclusive : true, + exclusive : false, dimPage : true, scrollLock : false, diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index 0d201a7a5..b12777ed4 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -29,11 +29,10 @@ position: fixed; top: 0; left: 0; - visibility: hidden; backface-visibility: hidden; transition: none; will-change: transform; - backface-visibility: hidden; + visibility: hidden; height: 100% !important; border-radius: 0em !important; @@ -55,19 +54,28 @@ overflow-y: visible !important; } +.ui.left.sidebar { + right: auto; + left: 0px; + transform: translate3d(-100%, 0, 0); +} + .ui.top.sidebar { top: 0px !important; bottom: auto !important; + transform: translate3d(0, -100%, 0); } .ui.right.sidebar { right: 0px !important; left: auto !important; + transform: translate3d(0, 100%, 0); } .ui.bottom.sidebar { top: auto !important; bottom: 0px !important; + transform: translate3d(0, 100%, 0); } @@ -116,7 +124,6 @@ .pushable > .pusher:after { position: fixed; - position: absolute; top: 0px; right: 0px; content: ''; @@ -145,9 +152,6 @@ Pushed ---------------*/ -.pushable.pushed { - overflow-x: hidden; -} .pushable.pushed > .pusher:after { z-index: @dimmerLayer; @@ -224,7 +228,8 @@ transform: translate3d(-100%, 0, 0); } /* Pushed */ -.pushable.pushed .ui.visible.left.overlay.sidebar { +.pushable.pushed .ui.inward.left.overlay.sidebar, +.pushable.pushed .ui.active.left.overlay.sidebar { transform: translate3d(0%, 0, 0); } @@ -235,7 +240,8 @@ transform: translate3d(100%, 0, 0); } /* Pushed */ -.pushable.pushed .ui.visible.right.overlay.sidebar { +.pushable.pushed .ui.inward.right.overlay.sidebar, +.pushable.pushed .ui.active.right.overlay.sidebar { transform: translate3d(0%, 0, 0); } @@ -246,7 +252,8 @@ transform: translate3d(0%, -100%, 0); } /* Pushed */ -.pushable.pushed .ui.visible.top.overlay.sidebar { +.pushable.pushed .ui.inward.top.overlay.sidebar, +.pushable.pushed .ui.active.top.overlay.sidebar { transform: translate3d(0%, 0%, 0); } @@ -257,7 +264,8 @@ transform: translate3d(0%, 100%, 0); } /* Pushed */ -.pushable.pushed .ui.visible.bottom.overlay.sidebar { +.pushable.pushed .ui.inward.bottom.overlay.sidebar, +.pushable.pushed .ui.active.bottom.overlay.sidebar { transform: translate3d(0%, 0%, 0); } @@ -265,67 +273,59 @@ Push ---------------*/ -/* Set-Up */ +/* Initial */ .pushable > .ui.push.sidebar { transition: transform @duration @easing; z-index: @topLayer; } +.pushable > .ui.left.push.sidebar { + transform: translate3d(-100%, 0, 0); +} +.pushable > .ui.right.push.sidebar { + transform: translate3d(100%, 0, 0); +} + +/* Animating */ .pushable > .ui.visible.push.sidebar ~ .pusher, .pushable > .ui.visible.push.sidebar ~ .pusher { transform: translate3d(0px, 0, 0); } -/*--- Left ---*/ - -/* Set-Up */ -.pushable > .ui.left.push.sidebar { - transform: translate3d(-100%, 0, 0); -} -/* Pushed */ -.pushable.pushed > .visible.ui.left.push.sidebar { +/* Inward */ +.pushable.pushed > .inward.ui.push.sidebar, +.pushable.pushed > .active.ui.push.sidebar { transform: translate3d(0%, 0, 0); } + +/* Visible */ .pushable.pushed > .visible.ui.left.push.sidebar ~ .fixed, .pushable.pushed > .visible.ui.left.push.sidebar ~ .pusher { transform: translate3d(@sidebarWidth, 0, 0); } - -/*--- Right ---*/ - -/* Set-Up */ -.pushable > .ui.right.push.sidebar { - transform: translate3d(100%, 0, 0); -} -/* Pushed */ -.pushable.pushed > .visible.ui.right.push.sidebar { - transform: translate3d(0%, 0, 0); -} .pushable.pushed > .visible.ui.right.push.sidebar ~ .fixed, .pushable.pushed > .visible.ui.right.push.sidebar ~ .pusher { transform: translate3d(-@sidebarWidth, 0, 0); } + /*-------------- Uncover ---------------*/ -/* Set-Up */ -.pushable > .ui.uncover.sidebar { +/* Initial */ +.ui.left.uncover.sidebar, +.ui.right.uncover.sidebar, +.ui.top.uncover.sidebar, +.ui.bottom.uncover.sidebar { + transform: translate3d(0, 0, 0); transition: transform @duration @easing; - transform: translate3d(0px, 0, 0); - z-index: @bottomLayer; } -/*--- Left ---*/ -/* Pushed */ +/* Visible */ .pushable.pushed > .visible.ui.left.uncover.sidebar ~ .fixed, .pushable.pushed > .visible.ui.left.uncover.sidebar ~ .pusher { transform: translate3d(@sidebarWidth, 0, 0); } - -/*--- Right ---*/ - -/* Set-Up */ .pushable.pushed > .visible.ui.right.uncover.sidebar ~ .fixed, .pushable.pushed > .visible.ui.right.uncover.sidebar ~ .pusher { transform: translate3d(-@sidebarWidth, 0, 0); @@ -341,8 +341,8 @@ transition: transform @duration @easing; z-index: @bottomLayer; } -.pushable > .ui.slide.along.sidebar.inward ~ .pusher, -.pushable > .ui.slide.along.sidebar.outward ~ .pusher { +.pushable > .ui.slide.along.sidebar ~ .pusher, +.pushable > .ui.slide.along.sidebar ~ .pusher { transform: translate3d(0px, 0, 0); } diff --git a/src/themes/default/collections/grid.variables b/src/themes/default/collections/grid.variables index 483ad72a6..66c0cfde6 100644 --- a/src/themes/default/collections/grid.variables +++ b/src/themes/default/collections/grid.variables @@ -20,8 +20,6 @@ @rowSpacing: 2rem; @tableWidth: ~"calc(100% + "@gutterWidth~")"; -@relaxedTableWidth: ~"calc(100% + "@relaxedGutterWidth~")"; -@veryRelaxedTableWidth: ~"calc(100% + "@veryRelaxedGutterWidth~")"; @columnMaxImageWidth: 100%; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index e10faa20a..71212cbf5 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -115,7 +115,7 @@ --------------------*/ @loaderSpeed: 0.6s; -@loaderLineWidth: 0.3em; +@loaderLineWidth: 0.2em; @loaderFillColor: rgba(0, 0, 0, 0.1); @loaderLineColor: @darkGrey; @invertedLoaderFillColor: rgba(255, 255, 255, 0.15);