Starship/CoreID
1
0
Fork 0
Code Issues 8 Pull Requests Releases 34 Wiki Activity

Make sidebar functional on mobule

Browse Source
This commit is contained in:
garrettmills 2020-08-12 22:28:52 -05:00
parent 98234c0ef4
commit 455e78bf14
No known key found for this signature in database
GPG Key ID: 6ACD58D6ADACFC6E
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/app/dash/SideBar.component.js
View File

@ -6,7 +6,7 @@ import { session } from '../service/Session.service.js'
const template = ` const template = `
<div class="bg-light border-right coreid-sidebar-wrapper" id="sidebar-wrapper" v-bind:class="{ collapsed: isCollapsed }"> <div class="bg-light border-right coreid-sidebar-wrapper" id="sidebar-wrapper" v-bind:class="{ collapsed: isCollapsed }">
<div class="sidebar-heading">{{ app_name }}</div> <div class="sidebar-heading"><i id="sidebar-collapser" @click="toggle()" class="fa fa-arrow-left"></i> {{ app_name }}</div>
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<a <a
href="#" href="#"
@ -18,8 +18,6 @@ const template = `
</div> </div>
` `
// TODO figure out why this doesn't show up in mobile layouts
export default class SideBarComponent extends Component { export default class SideBarComponent extends Component {
static get selector() { return 'coreid-sidebar' } static get selector() { return 'coreid-sidebar' }
static get props() { return ['app_name'] } static get props() { return ['app_name'] }

20
app/assets/less/dashboard.less
View File

@ -28,7 +28,7 @@ body {
margin-left: 0; margin-left: 0;
} }
@media (min-width: 768px) { //@media (min-width: 768px) {
#sidebar-wrapper { #sidebar-wrapper {
margin-left: 0; margin-left: 0;
} }
@ -41,6 +41,24 @@ body {
#wrapper.toggled #sidebar-wrapper { #wrapper.toggled #sidebar-wrapper {
margin-left: -15rem; margin-left: -15rem;
} }
#sidebar-collapser {
display: none;
}
//}
@media (max-width: 768px) {
#sidebar-wrapper {
position: absolute;
z-index: 1000;
}
#sidebar-collapser {
display: inline;
margin-right: 15px;
color: #666;
font-size: 15px;
}
} }
.coreid-sidebar-wrapper { .coreid-sidebar-wrapper {