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

feat(aio): positioning UX for nav and search

This commit is contained in:
Stefanie Fluin 2017-04-14 15:50:14 -07:00 committed by Pete Bacon Darwin
parent 16673fa38b
commit 8f9ba62dc3
4 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@
<md-sidenav-container class="sidenav-container"> <md-sidenav-container class="sidenav-container">
<md-sidenav #sidenav class="sidenav" [opened]="isOpened" [mode]="mode"> <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
<aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu> <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu> <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
</md-sidenav> </md-sidenav>

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

@ -5,10 +5,10 @@ aio-search-results {
.search-results { .search-results {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: scroll; overflow: auto;
padding-top: 50px; padding: 68px 32px 0;
color: $offwhite; color: $offwhite;
width: 100%; width: auto;
max-height: 40%; max-height: 40%;
position: fixed; position: fixed;
top: 0; top: 0;
@ -16,7 +16,7 @@ aio-search-results {
right: 0; right: 0;
z-index: 5; z-index: 5;
background-color: $darkgray; background-color: $darkgray;
border: 24px solid $darkgray; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
@media (max-width: 480px) { @media (max-width: 480px) {
display: block; display: block;

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

@ -6,15 +6,20 @@ aio-nav-menu.top-menu .vertical-menu-item {
.mat-sidenav.sidenav { .mat-sidenav.sidenav {
box-shadow: 6px 0 6px rgba(0,0,0,0.10); box-shadow: 6px 0 6px rgba(0,0,0,0.10);
background-color: $offwhite; background-color: $offwhite;
padding: 10px 0px 0px; padding: 80px 0px 0px;
min-width: 260px; min-width: 260px;
} }
md-sidenav.mat-sidenav.sidenav.collapsed {
padding-top: 32px;
}
md-sidenav-container.sidenav-container { md-sidenav-container.sidenav-container {
min-height: 100%; min-height: 100%;
height: auto !important; height: auto !important;
margin: 0 auto; margin: 0 auto;
transform: none; transform: none;
padding-top: 52px;
} }
// md-sidenav.sidenav.mat-sidenav.mat-sidenav-side.mat-sidenav-opened { // md-sidenav.sidenav.mat-sidenav.mat-sidenav-side.mat-sidenav-opened {
@ -145,3 +150,14 @@ a.selected.level-1,
max-width: 100%; max-width: 100%;
} }
} }
aio-nav-menu.top-menu {
aio-nav-item:first-child .vertical-menu-item {
padding-top: 48px;
}
aio-nav-item:last-child div {
border-bottom: 2px solid rgba($mediumgray, 0.5);
}
}

5
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -55,7 +55,10 @@ aio-top-menu {
} }
md-toolbar.mat-toolbar { md-toolbar.mat-toolbar {
position: relative; position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10; z-index: 10;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
padding: 0 16px 0 0; padding: 0 16px 0 0;