honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(aio): fixed sidenav, moved footer inside of sidenav container (#16028) 

When content pages were short, the footer would take up a large part
of the display area and the side nav would look like it was shorter than
it really was.

This change moves the footer into the main content area so that the
nav always extends to the full length the browser.
This commit is contained in:
Stefanie Fluin 2017-04-16 03:10:17 -07:00 committed by Pete Bacon Darwin
parent 9a5084412d
commit 4a3c66fe22
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
aio/src/app/app.component.html
View File

@ -21,10 +21,12 @@
<aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt> <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
</section> </section>
<footer>
<aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
</footer>
</md-sidenav-container> </md-sidenav-container>
<aio-search-results #searchResults></aio-search-results> <aio-search-results #searchResults></aio-search-results>
<footer>
<aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
</footer>

8
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -3,11 +3,13 @@ aio-nav-menu.top-menu .vertical-menu-item {
text-transform: uppercase; text-transform: uppercase;
} }
.mat-sidenav.sidenav { md-sidenav.mat-sidenav.sidenav {
box-shadow: 6px 0 6px rgba(0,0,0,0.10); position: fixed;
background-color: $offwhite; bottom: 0;
padding: 80px 0px 0px; padding: 80px 0px 0px;
min-width: 260px; min-width: 260px;
background-color: $offwhite;
box-shadow: 6px 0 6px rgba(0,0,0,0.10);
} }
md-sidenav.mat-sidenav.sidenav.collapsed { md-sidenav.mat-sidenav.sidenav.collapsed {