Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

aside feature

Browse Source
This commit is contained in:
codecalm
2018-07-19 21:56:19 +02:00
parent 36fc428b72
commit f0f746d8ae
3 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/_layouts/base.html
View File

@@ -6,7 +6,7 @@
</head> </head>
<body class="{{ page.body-class }}"> <body class="{{ page.body-class }}">
<div class="page"> <div class="page d-flex flex-column justify-content-center">
{{ content }} {{ content }}
</div> </div>

22
src/_layouts/default.html
View File

@@ -6,10 +6,21 @@ layout: base
{% include aside.html %} {% include aside.html %}
{% endcomment %} {% endcomment %}
<div class="flex-fill"> <div class="flex-fill d-flex">
<div class="aside">
<div class="aside-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda blanditiis consectetur culpa, cumque expedita illo in pariatur quibusdam voluptates? Eligendi est ex vero voluptate! In maxime optio perspiciatis repellat!
</div>
<div class="aside-footer">
Aside footer
</div>
</div>
<div class="flex-fill d-flex flex-column">
{% include header.html %} {% include header.html %}
<div class="my-3 my-md-5"> <div class="my-3 my-md-5 flex-fill">
{% if page.page-title %} {% if page.page-title %}
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
@@ -20,7 +31,8 @@ layout: base
{{ content }} {{ content }}
</div> </div>
</div>
{% include footer-sub.html %} {% include footer-sub.html %}
{% include footer.html %} {% include footer.html %}
</div>
</div>

19
src/assets/scss/dashboard/_aside.scss
View File

@@ -1,22 +1,9 @@
.aside { .aside {
position: fixed; background: #fff;
top: 0;
right: 0;
bottom: 0;
width: $aside-width;
background: #ffffff;
border-left: 1px solid $border-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
z-index: 100; width: 16rem;
visibility: hidden; border-right: 1px solid $border-color;
box-shadow: 0 0 5px 2px rgba(#000, .05);
body.aside-opened & {
@media (min-width: 1600px) {
visibility: visible;
}
}
} }
.aside-body { .aside-body {