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

fix(aio): reimplement the top menu dropping into the side bar 

I couldn't find the CSS for the `.small` class to make it look nice.
This commit is contained in:
Peter Bacon Darwin 2017-03-06 15:08:34 +00:00 committed by Igor Minar
parent 55189b1b85
commit ebd446397a
3 changed files with 78 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
aio/src/app/app.component.html Normal file
View File

@ -0,0 +1,26 @@
<md-toolbar color="primary" class="app-toolbar">
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
<aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
<md-input-container >
<input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
</md-input-container>
<span class="fill-remaining-space"></span>
</md-toolbar>
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
<aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
<aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
</md-sidenav>
<section class="sidenav-content">
<div class="search-results">
<div *ngFor="let result of (searchResults | async)?.results">
<a href="{{ result.path }}">{{ result.title }}</a>
</div>
</div>
<aio-doc-viewer [doc]="currentDocument | async"></aio-doc-viewer>
</section>
</md-sidenav-container>

50
aio/src/app/app.component.scss Normal file
View File

@ -0,0 +1,50 @@
.fill-remaining-space {
flex: 1 1 auto;
}
md-input-container {
margin-left: 10px;
input {
min-width:200px;
}
}
.md-input-element {
font-size: 70%;
font-style: italic;
}
@media (max-width: 600px) {
aio-menu {
display: none;
}
}
.sidenav-container {
width: 100%;
height: 100vh;
}
.sidenav-content {
height: 100%;
width: 100%;
margin: auto;
padding: 1rem;
}
.sidenav-content button {
min-width: 50px;
}
.sidenav {
padding: 0;
}
// md-toolbar {
// display: none;
// padding-left: 10px !important;
// }
// md-toolbar.active {
// display: block;
// }

80
aio/src/app/app.component.ts
View File

@ -6,84 +6,8 @@ import { SearchService, QueryResults } from 'app/search/search.service';
@Component({
selector: 'aio-shell',
template: `
<md-toolbar color="primary" class="app-toolbar">
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
<aio-top-menu [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
<md-input-container >
<input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
</md-input-container>
<span class="fill-remaining-space"></span>
</md-toolbar>
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "this.isSideBySide ? 'side' : 'over'">
<aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
</md-sidenav>
<section class="sidenav-content">
<div class="search-results">
<div *ngFor="let result of (searchResults | async)?.results">
<a href="{{ result.path }}">{{ result.title }}</a>
</div>
</div>
<aio-doc-viewer [doc]="currentDocument | async"></aio-doc-viewer>
</section>
</md-sidenav-container>`,
styles: [
`.fill-remaining-space {
flex: 1 1 auto;
}
md-input-container {
margin-left: 10px;
input {
min-width:200px;
}
}
.md-input-element {
font-size: 70%;
font-style: italic;
}
@media (max-width: 600px) {
aio-menu {
display: none;
}
}
.sidenav-container {
width: 100%;
height: 100vh;
}
.sidenav-content {
height: 100%;
width: 100%;
margin: auto;
padding: 1rem;
}
.sidenav-content button {
min-width: 50px;
}
.sidenav {
padding: 0;
}
// md-toolbar {
// display: none;
// padding-left: 10px !important;
// }
// md-toolbar.active {
// display: block;
// }`
]
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
readonly sideBySideWidth = 600;