richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Attempting to fix overflow issues with sidebar

pull/1129/head
jlukic 10 years ago
parent
2ed6218097
commit
cdb0bc644b
7 changed files with 139 additions and 116 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      server/documents/modules/sidebar.html.eco
  2. 2
      server/files/javascript/semantic.js
  3. 42
      server/files/stylesheets/semantic.css
  4. 2
      server/layouts/default.html.eco
  5. 69
      src/definitions/modules/sidebar.js
  6. 126
      src/definitions/modules/sidebar.less
  7. 8
      src/themes/packages/default/modules/sidebar.variables

6
server/documents/modules/sidebar.html.eco
View File

@ -31,6 +31,9 @@ themes : ['Default']
<div class="animation example">
<h4 class="ui header">Animation</h4>
<p>A sidebar can use different animations to change contexts</p>
<div class="ui button" data-animation="safe">
Safe
</div>
<div class="ui button" data-animation="overlay">
Overlay
</div>
@ -52,9 +55,6 @@ themes : ['Default']
<div class="ui button" data-animation="scale up">
Scale Up
</div>
<div class="ui button" data-animation="recede">
Recede
</div>
<div class="ui button" data-animation="open door">
Open Door
</div>

2
server/files/javascript/semantic.js
View File

@ -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'),

42
server/files/stylesheets/semantic.css
View File

@ -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 {

2
server/layouts/default.html.eco
View File

@ -247,7 +247,7 @@
</div>
</div>
</div>
<div class="ui black huge launch right attached button">
<div class="ui black huge launch right attached fixed button">
<i class="content icon"></i>
<span class="text">Menu</span>
</div>

69
src/definitions/modules/sidebar.js
View File

@ -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'

126
src/definitions/modules/sidebar.less
View File

@ -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);

8
src/themes/packages/default/modules/sidebar.variables
View File

@ -10,6 +10,12 @@
@canvasBackground: @lightBlack;
@pageBackground: @bodyBackground;
@perspective: 1500px;
@duration: 0.5s;
@easing: ease;
@easing: ease;
@bottomLayer: 1001;
@middleLayer: 1002;
@dimmerLayer: 1003;
@topLayer: 1004;
Write Preview
Loading…
Cancel
Save