mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 19:56:05 +00:00
Made new sidebar layout responsive
This commit is contained in:
parent
baea92b206
commit
d8e1f52ddd
@ -8,6 +8,7 @@ let componentMapping = {
|
||||
'expand-toggle': require('./expand-toggle'),
|
||||
'entity-selector-popup': require('./entity-selector-popup'),
|
||||
'entity-selector': require('./entity-selector'),
|
||||
'sidebar': require('./sidebar'),
|
||||
};
|
||||
|
||||
window.components = {};
|
||||
|
16
resources/assets/js/components/sidebar.js
Normal file
16
resources/assets/js/components/sidebar.js
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
class Sidebar {
|
||||
|
||||
constructor(elem) {
|
||||
this.elem = elem;
|
||||
this.toggleElem = elem.querySelector('.sidebar-toggle');
|
||||
this.toggleElem.addEventListener('click', this.toggle.bind(this));
|
||||
}
|
||||
|
||||
toggle(show = true) {
|
||||
this.elem.classList.toggle('open');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
module.exports = Sidebar;
|
@ -204,21 +204,4 @@
|
||||
background-color: #F8F8F8;
|
||||
padding: $-m;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
#sidebar .scroll-body {
|
||||
&.fixed {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding-right: $-m;
|
||||
width: 30%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
//background-color: $primary-faded;
|
||||
border-left: 1px solid #DDD;
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
}
|
@ -58,8 +58,84 @@ body.flexbox {
|
||||
.flex.sidebar + .flex.content {
|
||||
flex: 3;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 $-l;
|
||||
border-left: 1px solid #DDD;
|
||||
max-width: 100%;
|
||||
}
|
||||
.flex.sidebar .sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include smaller-than($xl) {
|
||||
body.sidebar-layout {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.flex.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
padding-right: 30px;
|
||||
width: 360px;
|
||||
box-shadow: none;
|
||||
transform: translate3d(-330px, 0, 0);
|
||||
transition: transform ease-in-out 120ms;
|
||||
}
|
||||
.flex.sidebar.open {
|
||||
box-shadow: 1px 2px 2px 1px rgba(0,0,0,.10);
|
||||
transform: translate3d(0, 0, 0);
|
||||
.sidebar-toggle i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.flex.sidebar .sidebar-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
opacity: 0.9;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 30px;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
border: 1px solid #DDD;
|
||||
border-top: 1px solid #BBB;
|
||||
padding-top: $-m;
|
||||
cursor: pointer;
|
||||
i {
|
||||
opacity: 0.5;
|
||||
transition: all ease-in-out 120ms;
|
||||
padding: 0;
|
||||
}
|
||||
&:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#sidebar .scroll-body.fixed {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include larger-than($xl) {
|
||||
#sidebar .scroll-body.fixed {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding-right: $-m;
|
||||
width: 30%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
//background-color: $primary-faded;
|
||||
border-left: 1px solid #DDD;
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** Rules for all columns */
|
||||
div[class^="col-"] img {
|
||||
|
@ -85,7 +85,7 @@ header {
|
||||
}
|
||||
header .search-box {
|
||||
display: inline-block;
|
||||
margin-top: $-s;
|
||||
margin-top: 10px;
|
||||
input {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
|
@ -1,5 +1,7 @@
|
||||
@extends('base')
|
||||
|
||||
@section('body-class', 'sidebar-layout')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="toolbar-container">
|
||||
@ -15,7 +17,9 @@
|
||||
|
||||
<div class="flex-fill flex" @yield('container-attrs') >
|
||||
|
||||
<div class="sidebar flex print-hidden" id="sidebar">
|
||||
<div sidebar class="sidebar flex print-hidden" id="sidebar">
|
||||
<div class="sidebar-toggle primary-background-light"><i class="zmdi zmdi-caret-right-circle"></i>
|
||||
</div>
|
||||
<div class="scroll-body">
|
||||
@yield('sidebar')
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user