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