Mercurial > hg > ugly-duckling
changeset 4:5c0d37379879
Some shifting around of CSS rules, and a few components (toolbar, fixed sidebar) on the page.
| author | Lucas Thompson <dev@lucas.im> |
|---|---|
| date | Wed, 26 Oct 2016 14:34:12 +0100 |
| parents | b4a1e0a67389 |
| children | 8d82412dfd50 |
| files | src/app/app.component.css src/app/app.component.html src/index.html src/styles.css |
| diffstat | 4 files changed, 45 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/app.component.css Wed Oct 26 11:42:58 2016 +0100 +++ b/src/app/app.component.css Wed Oct 26 14:34:12 2016 +0100 @@ -1,3 +1,15 @@ app-simple-form { margin-bottom: 10px; } + +.app-toolbar-filler { + flex: 1 1 auto; +} + +md-sidenav-layout { + height: calc(100vh - 64px); /* height of window minus the toolbar height*/ +} + +md-sidenav { + width: 240px; +}
--- a/src/app/app.component.html Wed Oct 26 11:42:58 2016 +0100 +++ b/src/app/app.component.html Wed Oct 26 14:34:12 2016 +0100 @@ -1,27 +1,42 @@ <md-toolbar color="primary"> + <md-icon>face</md-icon> <span>{{title}}</span> <!-- This fills the remaining space of the current row --> - <span class="example-fill-remaining-space"></span> + <span class="app-toolbar-filler"></span> - <span>Right Aligned Text</span> + <!-- menu opens when trigger button is clicked --> + <button md-icon-button [md-menu-trigger-for]="menu"> + <md-icon>more_vert</md-icon> + </button> + + <md-menu x-position="before" #menu="mdMenu"> + <button md-menu-item> Refresh</button> + <button md-menu-item> Settings</button> + <button md-menu-item> Help</button> + <button md-menu-item disabled> Sign Out</button> + </md-menu> </md-toolbar> +<md-sidenav-layout> + <md-sidenav align="end" mode="side" opened> + </md-sidenav> + <md-slider min="1" max="5"></md-slider> -<md-slider min="1" max="5"></md-slider> +</md-sidenav-layout> <!--<h1>--> - <!--{{title}}--> +<!--{{title}}--> <!--</h1>--> <!--<div>--> - <!--<ul>--> - <!--<li *ngFor="let message of mail.messages">{{message.text}}</li>--> - <!--</ul>--> +<!--<ul>--> +<!--<li *ngFor="let message of mail.messages">{{message.text}}</li>--> +<!--</ul>--> - <!--<ul>--> - <!--<app-simple-form--> - <!--*ngFor="let message of mail.messages"--> - <!--[message]="message.text"--> - <!--(update)="onUpdate(message.id, $event.text)"--> - <!-->{{message}}</app-simple-form>--> - <!--</ul>--> - <!--<hr>--> - <!--{{serverUri}}--> +<!--<ul>--> +<!--<app-simple-form--> +<!--*ngFor="let message of mail.messages"--> +<!--[message]="message.text"--> +<!--(update)="onUpdate(message.id, $event.text)"--> +<!-->{{message}}</app-simple-form>--> +<!--</ul>--> +<!--<hr>--> +<!--{{serverUri}}--> <!--</div>-->
--- a/src/index.html Wed Oct 26 11:42:58 2016 +0100 +++ b/src/index.html Wed Oct 26 14:34:12 2016 +0100 @@ -7,7 +7,6 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <app-root>Loading...</app-root>
--- a/src/styles.css Wed Oct 26 11:42:58 2016 +0100 +++ b/src/styles.css Wed Oct 26 14:34:12 2016 +0100 @@ -1,10 +1,8 @@ /* You can add global styles to this file, and also import other style files */ +@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/core/theming/prebuilt/indigo-pink.css'; body { margin: 0; + font-family: Roboto, sans-serif; } - -.example-fill-remaining-space { - flex: 1 1 auto; -}