moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-22 08:52:15 -05:00
Code Issues Releases Wiki Activity

Sticky footer in desktop nav

Browse Source
This commit is contained in:
Mario Volke 2014-12-15 10:59:32 +01:00 committed by Tankred Hase
parent 67384695f1
commit a5c6400601
4 changed files with 53 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/sass/blocks/layout/_app.scss
View File

@ -19,6 +19,19 @@
width: $aside-width;
background: $color-main;
color: $color-main-text;
@include respond-to(smaller-lg) {
transform: translateX(-100%);
}
@include respond-to(lg) {
width: $aside-width-lg;
background: $color-bg;
color: $color-text;
}
}
&__aside-scroll {
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
@include scrollbar(main);
@ -28,13 +41,7 @@
display: none;
}
@include respond-to(smaller-lg) {
transform: translateX(-100%);
}
@include respond-to(lg) {
width: $aside-width-lg;
background: $color-bg;
color: $color-text;
@include scrollbar(base);
}
}

63
src/sass/blocks/layout/_nav.scss
View File

@ -1,13 +1,14 @@
// Main Navigation Menu
.nav {
$nav-padding-left: 8px;
$nav-entry-indentation: 8px;
$nav-padding-sm: 15px;
$nav-padding-h: 10px;
$footer-height: 30px;
min-height: 100%;
position: relative;
padding: $nav-padding-h + 5px;
padding: $nav-padding-sm;
background: $color-main;
color: $color-main-text;
@ -78,7 +79,7 @@
font-weight: bold;
}
&__secondary {
margin: 30px 0 15px;
margin: 30px 0 0;
border-top: 1px solid $color-main-text;
padding: 15px 0 0;
list-style: none;
@ -108,12 +109,10 @@
}
}
}
& > footer {
display: none;
}
@include respond-to(lg) {
padding: $nav-padding-h;
padding-left: $nav-padding-h;
padding-right: $nav-padding-h;
padding-top: 27px; // magic number to valign logo with action bar
padding-bottom: $footer-height;
background: $color-bg;
@ -141,7 +140,7 @@
}
&__folder {
font-size: $font-size-base;
padding-left: $nav-padding-left;
padding-left: $nav-entry-indentation;
padding-right: 20px;
margin-bottom: 16px;
a {
@ -170,11 +169,11 @@
}
}
&__secondary {
margin-bottom: 15px;
border-top-color: $color-border-light;
& > li {
font-size: $font-size-small;
padding-left: $nav-padding-left;
padding-right: 5px;
padding-left: $nav-entry-indentation;
a {
color: $color-text-light;
& > svg {
@ -183,24 +182,32 @@
}
}
}
& > footer {
display: block;
position: absolute;
bottom: 0;
left: $nav-padding-h;
right: $nav-padding-h;
height: $footer-height;
border-top: 1px solid $color-border-light;
font-size: $font-size-smaller;
line-height: $footer-height - 4px;
color: $color-text-light;
svg {
display: inline-block;
height: 1.5em;
width: 1.5em;
padding-right: 0.5em;
fill: $color-text-light;
vertical-align: middle;
}
@at-root {
.nav-footer {
display: none;
@include respond-to(lg) {
display: block;
position: absolute;
bottom: 0;
left: $nav-padding-h;
right: $nav-padding-h;
height: $footer-height;
border-top: 1px solid $color-border-light;
background: $color-bg;
font-size: $font-size-smaller;
line-height: $footer-height - 4px;
color: $color-text-light;
svg {
display: inline-block;
height: 1.5em;
width: 1.5em;
padding-right: 0.5em;
fill: $color-text-light;
vertical-align: middle;
}
}
}
}

5
src/tpl/desktop.html
View File

@ -1,5 +1,8 @@
<div class="app" ng-class="{'app--show-aside': state.nav.open}">
<aside class="app__aside" ng-include="'tpl/nav.html'"></aside>
<aside class="app__aside">
<div class="app__aside-scroll" ng-include="'tpl/nav.html'"></div>
<footer class="nav-footer" ng-include="'tpl/status-display.html'"></footer>
</aside>
<div class="app__container" ng-click="state.nav.toggle(false)">
<header class="app__header" ng-include="'tpl/action-bar.html'"></header>
<main class="app__main">

2
src/tpl/nav.html
View File

@ -78,6 +78,4 @@
</a>
</li>
</ul><!--/nav__secondary-->
<footer ng-include="'tpl/status-display.html'"></footer>
</nav>