Mercurial > hg > ugly-duckling

changeset 190:5e8a2eb8bdbf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Bodge in a footer - for no good reason.
author Lucas Thompson <dev@lucas.im>
date Wed, 22 Mar 2017 16:20:50 +0000
parents a50feba0d7f0
children ea735ebeed0e
files src/app/app.component.css src/app/app.component.html src/styles.css
diffstat 3 files changed, 86 insertions(+), 31 deletions(-) [+]
line wrap: on
line diff
--- a/src/app/app.component.css	Wed Mar 22 14:34:43 2017 +0000
+++ b/src/app/app.component.css	Wed Mar 22 16:20:50 2017 +0000
@@ -3,17 +3,32 @@
 }
 
 md-sidenav-container {
-  height: calc(100vh - 64px); /* height of window minus the toolbar height*/
+  height: 100%;
+  width: 100%;
+  position: absolute;
 }
 
 md-sidenav {
   text-align: center;
 }
 
-md-tab-group {
-  height: calc(100vh - 64px); /* height of window minus the toolbar height*/
+.app-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: pink;
 }
 
-md-tab-group >>> .md-tab-body-wrapper {
-  align-items: center;
+.app-header {
+  flex: 0 0 auto;
 }
+
+.app-content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  position: relative;
+}
+
+.app-footer {
+  flex: 0 0 auto;
+}
--- a/src/app/app.component.html	Wed Mar 22 14:34:43 2017 +0000
+++ b/src/app/app.component.html	Wed Mar 22 16:20:50 2017 +0000
@@ -1,32 +1,66 @@
-<md-toolbar color="primary">
-  <md-icon svgIcon="duck"></md-icon>
+<div class="app-container">
+  <div class="app-header">
+    <md-toolbar color="primary">
+      <md-icon svgIcon="duck"></md-icon>
 
-  <span class="app-toolbar-filler"></span>
+      <span class="app-toolbar-filler"></span>
 
-  <app-playback-control></app-playback-control>
-  <ugly-recording-control
-    (finishedRecording)="onFileOpened($event)"
-  ></ugly-recording-control>
+      <app-playback-control></app-playback-control>
+      <ugly-recording-control
+        (finishedRecording)="onFileOpened($event)"
+      ></ugly-recording-control>
 
-  <!-- This fills the remaining space of the current row -->
-  <span class="app-toolbar-filler"></span>
+      <!-- This fills the remaining space of the current row -->
+      <span class="app-toolbar-filler"></span>
 
 
-  <app-audio-file-open (fileOpened)="onFileOpened($event)"></app-audio-file-open>
-  <!-- menu opens when trigger button is clicked -->
-  <button md-icon-button (click)="sidenav.toggle()">
-    <md-icon>extension</md-icon>
-  </button>
-</md-toolbar>
+      <app-audio-file-open
+        (fileOpened)="onFileOpened($event)"
+      ></app-audio-file-open>
+      <!-- menu opens when trigger button is clicked -->
+      <button md-icon-button (click)="sidenav.toggle()">
+        <md-icon>extension</md-icon>
+      </button>
+    </md-toolbar>
+  </div>
 
-<md-sidenav-container>
-  <md-sidenav #sidenav align="start" mode="over">
-    <app-feature-extraction-menu
-      (requestOutput)="extractFeatures($event)"
-      [disabled]="!canExtract">
-    </app-feature-extraction-menu>
-  </md-sidenav>
-  <ugly-notebook-feed
-    [audioBuffer]="audioBuffer"></ugly-notebook-feed>
-  <ugly-progress-spinner [isVisible]="isProcessing"></ugly-progress-spinner>
-</md-sidenav-container>
+  <div class="app-content">
+    <md-sidenav-container>
+      <md-sidenav #sidenav align="start" mode="over">
+        <app-feature-extraction-menu
+          (requestOutput)="extractFeatures($event)"
+          [disabled]="!canExtract">
+        </app-feature-extraction-menu>
+      </md-sidenav>
+      <ugly-notebook-feed
+        [audioBuffer]="audioBuffer"></ugly-notebook-feed>
+      <ugly-progress-spinner [isVisible]="isProcessing"></ugly-progress-spinner>
+    </md-sidenav-container>
+  </div>
+
+  <div class="app-footer">
+    <md-toolbar color="primary">
+      <md-icon svgIcon="duck"></md-icon>
+
+      <span class="app-toolbar-filler"></span>
+
+      <app-playback-control></app-playback-control>
+      <ugly-recording-control
+        (finishedRecording)="onFileOpened($event)"
+      ></ugly-recording-control>
+
+      <!-- This fills the remaining space of the current row -->
+      <span class="app-toolbar-filler"></span>
+
+
+      <app-audio-file-open
+        (fileOpened)="onFileOpened($event)"
+      ></app-audio-file-open>
+      <!-- menu opens when trigger button is clicked -->
+      <button md-icon-button (click)="sidenav.toggle()">
+        <md-icon>extension</md-icon>
+      </button>
+    </md-toolbar>
+
+  </div>
+</div>
--- a/src/styles.css	Wed Mar 22 14:34:43 2017 +0000
+++ b/src/styles.css	Wed Mar 22 16:20:50 2017 +0000
@@ -27,4 +27,10 @@
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
+  overflow: hidden;
+  height: 100%;
 }
+
+html {
+  height: 100%;
+}