The scrolling finally works! fix #103

Tanja-4732 · Aug 29, 2019 · db10c97 · db10c97
1 parent 00d5027
commit db10c97
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 162 deletions.
diff --git a/exdateman.code-workspace b/exdateman.code-workspace
@@ -14,6 +14,7 @@
     "cSpell.words": [
       "AGPL",
       "Booter",
+      "ZXing",
       "postgresql",
       "prestart",
       "sessionstorage"

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1,28 +1,34 @@
-<mat-sidenav-container class="sidenav">
-  <!-- The main content (not the sidenav) -->
-  <mat-sidenav-content>
-    <!-- Navigation toolbar -->
-    <mat-toolbar color="primary" class="">
-      <!-- Sidenav toggle button -->
-      <button mat-icon-button (click)="sidenav.toggle()" color="basic">
-        <!-- Burger icon -->
-        <i class="material-icons">menu</i>
-      </button>
-      <!-- Navigation bar heading -->
-      {{ title }}
-    </mat-toolbar>
-    <br />
+<div class="wrap">
+  <!-- Navigation toolbar -->
+  <mat-toolbar color="primary" class="toolbar">
+    <!-- Sidenav toggle button -->
+    <button mat-icon-button (click)="sidenav.toggle()" color="basic">
+      <!-- Burger icon -->
+      <mat-icon>menu</mat-icon>
+    </button>
+    <!-- Navigation bar heading -->
+    {{ title }}
+  </mat-toolbar>
 
-    <!-- Add a bit of space around the edges -->
-    <div class="defaultMargin">
-      <!-- Main app content -->
-      <router-outlet></router-outlet>
-    </div>
-  </mat-sidenav-content>
+  <mat-sidenav-container class="sidenav-container">
+    <!-- The main content (not the sidenav) -->
+    <mat-sidenav-content>
+      <!-- Add a bit of space around the edges -->
+      <div class="defaultMargin">
+        <!-- Main app content -->
+        <router-outlet></router-outlet>
+      </div>
+    </mat-sidenav-content>
 
-  <!-- The sidenav content -->
-  <mat-sidenav #sidenav mode="side" [(opened)]="sideNavOpened">
-    <!-- The SideNav component -->
-    <app-side-nav></app-side-nav>
-  </mat-sidenav>
-</mat-sidenav-container>
+    <!-- The sidenav content -->
+    <mat-sidenav
+      #sidenav
+      mode="side"
+      [(opened)]="sideNavOpened"
+      class="sidenav-main"
+    >
+      <!-- The SideNav component -->
+      <app-side-nav></app-side-nav>
+    </mat-sidenav>
+  </mat-sidenav-container>
+</div>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -1,7 +1,16 @@
-.sidenav {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.wrap {
+  // Use the entire page
+  height: 100%;
+
+  // Put the toolbar above (north of) everything else
+  display: flex;
+
+  // Orient vertically (don't put the toolbar next to the rest)
+  flex-direction: column;
+}
+
+// The stuff below (south of) the toolbar
+.sidenav-container {
+  // Use the entire page
+  height: 100%;
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -37,7 +37,6 @@ import { LoginComponent } from "./components/login/login.component";
 import { RegisterComponent } from "./components/register/register.component";
 import { PageNotFoundComponent } from "./components/page-not-found/page-not-found.component";
 import { InventoriesComponent } from "./components/inventories/inventories.component";
-import { MainNavComponent } from "./components/main-nav/main-nav.component";
 import { LayoutModule } from "@angular/cdk/layout";
 import { WelcomeComponent } from "./components/welcome/welcome.component";
 import { EditInventoryComponent } from "./components/edit-inventory/edit-inventory.component";
@@ -63,7 +62,6 @@ import { SideNavComponent } from "./components/side-nav/side-nav.component";
     RegisterComponent,
     PageNotFoundComponent,
     InventoriesComponent,
-    MainNavComponent,
     WelcomeComponent,
     EditInventoryComponent,
     AddInventoryComponent,

diff --git a/frontend/src/app/components/main-nav/main-nav.component.html b/frontend/src/app/components/main-nav/main-nav.component.html
diff --git a/frontend/src/app/components/main-nav/main-nav.component.scss b/frontend/src/app/components/main-nav/main-nav.component.scss
diff --git a/frontend/src/app/components/main-nav/main-nav.component.spec.ts b/frontend/src/app/components/main-nav/main-nav.component.spec.ts
diff --git a/frontend/src/app/components/main-nav/main-nav.component.ts b/frontend/src/app/components/main-nav/main-nav.component.ts
diff --git a/frontend/src/app/components/side-nav/side-nav.component.html b/frontend/src/app/components/side-nav/side-nav.component.html
@@ -1,5 +1,122 @@
-<!-- Welcome page -->
-<button mat-raised-button routerLink="/welcome" color="basic">
-  <!-- Home icon -->
-  <i class="material-icons">home</i> Home
-</button>
+<mat-nav-list class="mat-typography">
+  <a mat-list-item routerLink="/welcome">
+    <mat-icon>home</mat-icon>
+    &nbsp;Home
+  </a>
+
+  <a mat-list-item routerLink="/login">
+    <mat-icon>vpn_key</mat-icon>
+    &nbsp;Login
+  </a>
+
+  <a mat-list-item routerLink="/inventories">
+    <mat-icon>home</mat-icon>
+    &nbsp;Inventories
+  </a>
+
+  <a mat-list-item routerLink="/events">
+    <mat-icon>blur_on</mat-icon>
+    &nbsp;Events
+  </a>
+
+  <a mat-list-item routerLink="/scan">
+    <mat-icon>camera</mat-icon>
+    &nbsp;Scan
+  </a>
+
+  <!-- Filler content for testing -->
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+  <a mat-list-item>Lorem ipsum</a>
+</mat-nav-list>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -46,9 +46,6 @@
 html,
 body {
   height: 100%;
-}
-
-body {
   margin: 0;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,9 +46,6 @@ @@
     html,
     body {
       height: 100%;
-    }
-    body {
       margin: 0;
     }
@@ Expand Down @@