提交 cac2ea31 编写于 作者: C codecalm

sidenam mobile fixes, sidenav-overlay

上级 bedd5661
......@@ -3,19 +3,17 @@ layout: base
---
<div class="layout d-flex flex-row h-100p">
{% if page.nav-side %}
{% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
{% if page.sidenav %}
{% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded right=page.sidenav-right class=page.sidenav-class %}
{% endif %}
{% include layout/sidenav.html class=page.side-class dark=true %}
<div class="sidenav-overlay" data-toggle="sidenav"></div>
<div class="layout-main d-flex flex-column flex-fill max-w-full">
{% comment %}
{% unless page.nav-side %}
{% unless page.sidenav %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% include layout/topmenu.html %}
{% endunless %}
{% endcomment %}
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
{% include layout/page-title.html %}
......
---
title: Sidebar white
menu: layout.sidebar-white
nav-side: true
sidenav: true
nav-dark: true
page-title: Dashboard
menu: layouts
......
---
title: Folded sidebar
menu: layout.sidebar-folded
nav-side: true
sidenav: true
nav-folded: true
nav-dark: true
page-title: Dashboard
......
---
title: Sidebar left
menu: layout.sidebar-left
nav-side: true
sidenav: true
page-title: Dashboard
menu: layouts
---
......
---
title: Sidebar right
menu: layout.sidebar-right
nav-side: true
sidenav: true
nav-right: true
page-title: Dashboard
menu: layouts
......
---
title: Layout test
side-class: sidenav-expanded-xl sidenav-folded-lg
sidenav-class: sidenav-expanded-xl sidenav-folded-md
sidenav: true
sidenav-dark: true
---
<div class="card" id="card-test">
<div class="card-body">
<a href="#" class="btn btn-secondary btn-block" id="toggle-sidebar">sidebar</a>
<a href="#" class="btn btn-secondary btn-block" data-toggle="sidenav">sidebar</a>
<div id="card-body"></div>
<div>
<h1>Well, she turned me into a newt.</h1>
<p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
<p>And this isn't my nose. This is a false one. But you are dressed as one… Oh, ow! I don't want to talk to you no more, you empty-headed animal food trough water! <strong> I fart in your general direction!</strong> <em> Your mother was a hamster and your father smelt of elderberries!</em> Now leave before I am forced to taunt you a second time!</p>
<h2>Burn her!</h2>
<p>We shall say 'Ni' again to you, if you do not appease us. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
<ol>
<li>Oh, ow!</li><li>Be quiet!</li><li>Well, we did do the nose.</li>
</ol>
<h3>What a strange person.</h3>
<p>Well, she turned me into a newt. And the hat. She's a witch! Well, how'd you become king, then? She looks like one. Look, my liege!</p>
<ul>
<li>We found them.</li><li>Well, how'd you become king, then?</li><li>Did you dress her up like this?</li>
</ul>
<p>It's only a model. I'm not a witch. Who's that then? Did you dress her up like this? Look, my liege!</p>
<p>Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
<p>Oh, ow! Look, my liege! Burn her! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, Mercia's a temperate zone!</p>
<p>Well, how'd you become king, then? How do you know she is a witch? We shall say 'Ni' again to you, if you do not appease us. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!</p>
<p>Look, my liege! I dunno. Must be a king. A newt? What do you mean? Oh, ow! He hasn't got shit all over him.</p>
<p>Now, look here, my good man. She looks like one. And this isn't my nose. This is a false one. Bring her forward!</p>
<p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Camelot! Well, how'd you become king, then? Why?</p>
<p>And the hat. She's a witch! It's only a model. Well, how'd you become king, then? Well, I didn't vote for you. Why?</p>
<p>Ni! Ni! Ni! Ni! Ni! Ni! Ni! Ni! Camelot! We shall say 'Ni' again to you, if you do not appease us. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
<p>Why do you think that she is a witch? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Where'd you get the coconuts? …Are you suggesting that coconuts migrate?</p>
<p>Well, what do you want? Did you dress her up like this? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. On second thoughts, let's not go there. It is a silly place.</p>
</div>
</div>
</div>
......@@ -25,7 +55,7 @@ side-class: sidenav-expanded-xl sidenav-folded-lg
test_width();
});
$('#toggle-sidebar').on('click', function () {
$('[data-toggle="sidenav"]').on('click', function () {
$('body').toggleClass('show-sidenav');
});
});
......
......@@ -281,7 +281,7 @@ $pagination-disabled-color: rgba($text-muted, .5) !default;
$sidenav-width: 16rem !default;
$sidenav-folded-width: 4rem !default;
$sidenav-bg: $white !default;
$sidenav-border-color: $border-color !default;
$sidenav-border-color: $border-color-alpha !default;
$sidenav-dark-bg: $dark !default;
$sidenav-link-padding-x: .75rem !default;
......
......@@ -5,7 +5,7 @@ html {
}
body {
height: 100%;
min-height: 100%;
overflow-y: scroll;
letter-spacing: $body-letter-spacing;
touch-action: manipulation;
......@@ -27,6 +27,11 @@ body *:hover::-webkit-scrollbar-thumb {
background: $gray-500;
}
.layout {
position: relative;
outline: 1px solid red;
}
/**
Remove the cancel buttons in Chrome and Safari on macOS.
*/
......
......@@ -3,8 +3,23 @@ $sidenav-padding-y: 1rem;
$sidenav-active-color: $primary;
$breakpoints: $grid-breakpoints;
@mixin sidenav-overlay {
display: none;
body.show-sidenav & {
display: block;
position: fixed;
z-index: $zindex-fixed - 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba($dark, .1);
}
}
@mixin sidenav-base {
position: absolute;
position: fixed;
top: 0;
left: 0;
bottom: 0;
......@@ -14,7 +29,8 @@ $breakpoints: $grid-breakpoints;
transition: .3s opacity, .3s transform;
will-change: transform;
@include sidenav-expanded;
width: $sidenav-width;
min-width: $sidenav-width;
body.show-sidenav & {
@include sidenav-visible-common;
......@@ -27,9 +43,18 @@ $breakpoints: $grid-breakpoints;
}
@mixin sidenav-expanded {
@include sidenav-visible-common;
width: $sidenav-width;
min-width: $sidenav-width;
& ~ .layout-main {
padding-left: $sidenav-width;
}
& ~ .sidenav-overlay {
display: none !important;
}
&:before {
content: 'sidenav'
}
......@@ -40,6 +65,14 @@ $breakpoints: $grid-breakpoints;
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
& ~ .layout-main {
padding-left: $sidenav-folded-width;
}
& ~ .sidenav-overlay {
display: none !important;
}
&:before {
content: 'sidenav-folded'
}
......@@ -67,8 +100,6 @@ Sidebar
box-shadow: 1px 0 $sidenav-border-color;
/*
Right navbar
*/
......@@ -78,6 +109,10 @@ Sidebar
}
}
.sidenav-overlay {
@include sidenav-overlay;
}
/*
Folded navbar
*/
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册