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; width: $aside-width;
background: $color-main; background: $color-main;
color: $color-main-text; 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; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@include scrollbar(main); @include scrollbar(main);
@ -28,13 +41,7 @@
display: none; display: none;
} }
@include respond-to(smaller-lg) {
transform: translateX(-100%);
}
@include respond-to(lg) { @include respond-to(lg) {
width: $aside-width-lg;
background: $color-bg;
color: $color-text;
@include scrollbar(base); @include scrollbar(base);
} }
} }

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

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

4
src/tpl/nav.html
View File

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