From 6b260594e1077031cd690b547f4d7285427a60ee Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Wed, 1 Jan 2020 18:19:11 +0100
Subject: [PATCH] toolbar is really fixed now

---
 src/app/components/home/home.component.sass   |  35 +--
 .../main-navigation.component.html            |  16 +-
 .../main-navigation.component.sass            |  21 +-
 .../components/profile/profile.component.html | 200 +++++++++---------
 .../components/profile/profile.component.sass |   6 +
 .../components/search/search.component.sass   |  15 +-
 6 files changed, 136 insertions(+), 157 deletions(-)

diff --git a/src/app/components/home/home.component.sass b/src/app/components/home/home.component.sass
index 2ae2205..fb10907 100644
--- a/src/app/components/home/home.component.sass
+++ b/src/app/components/home/home.component.sass
@@ -1,38 +1,6 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
-#content
-  position: fixed
-  width: 100%
-  height: calc(100% - 56px)
-
-#chat
-  box-sizing: content-box
-  height: 100%
-  width: 25%
-  float: left
-  overflow-y: auto
-  
-#feed
-  box-sizing: content-box
-  height: 100%
-  width: 50%
-  float: left
-  overflow-y: auto
-
-#social
-  box-sizing: content-box
-  height: 100%
-  width: 25%
-  float: left
-  overflow-y: auto
-
-.mat-toolbar.mat-primary 
-  width: 100%
-  position: sticky
-  top: 0
-  z-index: 1
-
 /deep/ .mat-tab-body-wrapper
   height: 100% 
 
@@ -45,8 +13,9 @@
   height: 100%
 
 .tab-content
-  height: 50%
+  box-sizing: content-box
   width: 100%
 
 
 
+
diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html
index d9866e1..28c6ce6 100644
--- a/src/app/components/main-navigation/main-navigation.component.html
+++ b/src/app/components/main-navigation/main-navigation.component.html
@@ -1,5 +1,7 @@
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-<mat-sidenav-container class="sidenav-container" class="mat-typography">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts-->
+<mat-sidenav-container class="mat-typography">
+
+  <!-- SIDENAV -->
   <mat-sidenav #drawer class="sidenav" 
       fxShow="true" fxHide.gt-sm="true"
       fixedInViewport="false"
@@ -21,8 +23,12 @@
       </div>
     </mat-nav-list>
   </mat-sidenav>
+
+  <!-- TOOLBAR -->
   <mat-sidenav-content>
     <mat-toolbar color="primary" class="mat-elevation-z4">
+
+      <!--content on SMALL SCREEN-->
       <button
         type="button"
         aria-label="Toggle sidenav"
@@ -32,7 +38,6 @@
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
       <span>Greenvironment</span>
-        <!--The following menu items will be hidden on both SM and XS screen sizes -->
       <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
         <div [hidden]="!loggedIn">
         <a mat-tab-link class="link"
@@ -57,15 +62,19 @@
           </a>
         </div>
       </nav>
+
+      <!--content on BIG SCREEN-->
       <div id="menu-button-box">
         <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span>
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
           <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon>
         </button>
+
         <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
           <mat-icon>more_vert</mat-icon>
         </button>
       </div>
+
       <mat-menu #requestMenu="matMenu">
         <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
         <button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
@@ -96,6 +105,7 @@
           </button> 
         </div>
       </mat-menu>
+
     </mat-toolbar>
     <router-outlet></router-outlet>
   </mat-sidenav-content>
diff --git a/src/app/components/main-navigation/main-navigation.component.sass b/src/app/components/main-navigation/main-navigation.component.sass
index b650cc7..4daa65d 100644
--- a/src/app/components/main-navigation/main-navigation.component.sass
+++ b/src/app/components/main-navigation/main-navigation.component.sass
@@ -1,23 +1,19 @@
-.sidenav-container 
-  height: 100%
-
 .mat-sidenav-container 
-  height: 100%
-
-.mat-sidenav-content 
-  height: 100vh
+  margin-top: 56px
+  height: calc(100vh - 56px)
 
 .sidenav 
   width: 200px
 
 .sidenav .mat-toolbar
-  background: inherit
+  //background: inherit
 
 .mat-toolbar.mat-primary
   height: 56px
-  position: sticky
+  position: fixed
+  //position: sticky
   top: 0
-  z-index: 1000
+  z-index: 999
   .mat-tab-nav-bar
     width: 50%
     height: 56px
@@ -35,13 +31,8 @@
 
 /deep/ .mat-tab-link
   min-width: 5em!important
-
-#login-button
   
 #menu-button-box
   text-align: right
   width: 100%
 
-
-
-
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 267060a..a6fca4f 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,105 +1,107 @@
-<mat-toolbar color="primary">Profile</mat-toolbar>
-<div id="profile">
-    <div id="profilecontainer" [hidden]="profileNotFound">
-        <div id="profile-card-container">
-        <mat-card class="mat-elevation-z8">
-            <mat-card-header>
-                <div mat-card-avatar class="profile-picture"></div>
-                <mat-card-title>{{user.username}}</mat-card-title>
-                <mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                <table id="profile-table">
-                    <tr>
-                        <div class="mat-header-cell">name: </div>
-                        <td>{{user.username}}</td>
-                    </tr>
-                    <mat-divider></mat-divider>
-                    <tr>
-                        <div class="mat-header-cell">handle: </div>
-                        <td>{{user.handle}}</td>
-                    </tr>
-                    <mat-divider></mat-divider>
-                    <tr>
-                        <div class="mat-header-cell">profileID: </div>
-                        <td>{{user.userID}}</td>
-                    </tr>
-                    <mat-divider></mat-divider>
-                    <tr>
-                        <div class="mat-header-cell">points: </div>
-                        <td>{{user.points}}</td>
-                    </tr>
-                    <mat-divider></mat-divider>
-                    <tr>
-                        <div class="mat-header-cell">level: </div>
-                        <td>{{user.level}}</td>
-                    </tr>
-                    <mat-divider></mat-divider>
-                    <tr>
-                        <div class="mat-header-cell">level name: </div>
-                        <td>{{rankname}}</td>
-                    </tr>
-                </table>
-            </mat-card-content>
-        </mat-card>
-        </div>
-        <br>
-        <h1>What does the level mean?</h1>
-            <p>There are different levels you can reach through green behaviour.
-                Collect 100 points to level up! The levels are called: 
-            </p>
-            <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
-                <ng-container matColumnDef="level">
-                    <th mat-header-cell *matHeaderCellDef> level </th>
-                    <td mat-cell *matCellDef="let level"> {{level.level}} </td>
-                </ng-container>
-                <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef> level name </th>
-                    <td mat-cell *matCellDef="let level"> {{level.name}} </td>
-                </ng-container>
-                <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
-            </table>
+<div id="profile-page">
+    <mat-toolbar color="primary">Profile</mat-toolbar>
+    <div id="profile">
+        <div id="profilecontainer" [hidden]="profileNotFound">
+            <div id="profile-card-container">
+            <mat-card class="mat-elevation-z8">
+                <mat-card-header>
+                    <div mat-card-avatar class="profile-picture"></div>
+                    <mat-card-title>{{user.username}}</mat-card-title>
+                    <mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
+                </mat-card-header>
+                <mat-card-content>
+                    <table id="profile-table">
+                        <tr>
+                            <div class="mat-header-cell">name: </div>
+                            <td>{{user.username}}</td>
+                        </tr>
+                        <mat-divider></mat-divider>
+                        <tr>
+                            <div class="mat-header-cell">handle: </div>
+                            <td>{{user.handle}}</td>
+                        </tr>
+                        <mat-divider></mat-divider>
+                        <tr>
+                            <div class="mat-header-cell">profileID: </div>
+                            <td>{{user.userID}}</td>
+                        </tr>
+                        <mat-divider></mat-divider>
+                        <tr>
+                            <div class="mat-header-cell">points: </div>
+                            <td>{{user.points}}</td>
+                        </tr>
+                        <mat-divider></mat-divider>
+                        <tr>
+                            <div class="mat-header-cell">level: </div>
+                            <td>{{user.level}}</td>
+                        </tr>
+                        <mat-divider></mat-divider>
+                        <tr>
+                            <div class="mat-header-cell">level name: </div>
+                            <td>{{rankname}}</td>
+                        </tr>
+                    </table>
+                </mat-card-content>
+            </mat-card>
+            </div>
             <br>
-        <h1>How to level up?</h1>
-            <p>There is an always growing list of things you can do,
-                 to support your environment
-                and earn points to level up at the same time.
-                 You can get a different amount of points
-                for differnet actions you can see in the list below:
-            </p>
-            <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
-                <!--- Note that these columns can be defined in any order.
-                        The actual rendered columns are set as a property on the row definition" -->
-                
-                <!-- Position Column -->
-                <ng-container matColumnDef="points">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
-                    <td mat-cell *matCellDef="let action"> {{action.points}} </td>
-                </ng-container>
+            <h1>What does the level mean?</h1>
+                <p>There are different levels you can reach through green behaviour.
+                    Collect 100 points to level up! The levels are called: 
+                </p>
+                <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
+                    <ng-container matColumnDef="level">
+                        <th mat-header-cell *matHeaderCellDef> level </th>
+                        <td mat-cell *matCellDef="let level"> {{level.level}} </td>
+                    </ng-container>
+                    <ng-container matColumnDef="name">
+                        <th mat-header-cell *matHeaderCellDef> level name </th>
+                        <td mat-cell *matCellDef="let level"> {{level.name}} </td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
+                </table>
+                <br>
+            <h1>How to level up?</h1>
+                <p>There is an always growing list of things you can do,
+                    to support your environment
+                    and earn points to level up at the same time.
+                    You can get a different amount of points
+                    for differnet actions you can see in the list below:
+                </p>
+                <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+                    <!--- Note that these columns can be defined in any order.
+                            The actual rendered columns are set as a property on the row definition" -->
+                    
+                    <!-- Position Column -->
+                    <ng-container matColumnDef="points">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
+                        <td mat-cell *matCellDef="let action"> {{action.points}} </td>
+                    </ng-container>
 
-                <!-- Name Column -->
-                <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
-                    <td mat-cell *matCellDef="let action"> {{action.name}} </td>
-                </ng-container>
+                    <!-- Name Column -->
+                    <ng-container matColumnDef="name">
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
+                        <td mat-cell *matCellDef="let action"> {{action.name}} </td>
+                    </ng-container>
 
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-            <!--<table style="width:100%">
-                <tr>
-                    <th>points </th>
-                    <th>action</th>
-                </tr>
-                <tr *ngFor= "let action of actionlist.actions">
-                    <td>{{action.points}}</td>
-                    <td>{{action.name}}</td>
-                </tr>
-            </table>-->
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table>
+                <!--<table style="width:100%">
+                    <tr>
+                        <th>points </th>
+                        <th>action</th>
+                    </tr>
+                    <tr *ngFor= "let action of actionlist.actions">
+                        <td>{{action.points}}</td>
+                        <td>{{action.name}}</td>
+                    </tr>
+                </table>-->
+            </div>
+        <div id="profilecontainer" *ngIf="profileNotFound">
+                <h1>Profile not found :(</h1>
         </div>
-    <div id="profilecontainer" *ngIf="profileNotFound">
-            <h1>Profile not found :(</h1>
     </div>
-  </div>
+</div>
   
\ No newline at end of file
diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass
index c108503..4d0369e 100644
--- a/src/app/components/profile/profile.component.sass
+++ b/src/app/components/profile/profile.component.sass
@@ -1,6 +1,12 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
+#profile-page
+  position: fixed
+  width: 100%
+  height: calc(100% - 56px)
+  overflow: scroll
+
 #profile 
   padding: 2em
   max-width: 1200px
diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass
index 2989fc4..a256f6a 100644
--- a/src/app/components/search/search.component.sass
+++ b/src/app/components/search/search.component.sass
@@ -1,16 +1,17 @@
 
 #search 
-    width: 100% 
-    height: 100%
+  width: 100%
+  overflow-x: hidden
+  height: 100%
 
 #input
-    width: 100%
-    padding-left: 0.5em
-    padding-right: 0.5em
+  width: 100%
+  padding-left: 0.5em
+  padding-right: 0.5em
 
 #category-chooser
-    padding-left: 0.5em
-    padding-right: 0.5em
+  padding-left: 0.5em
+  padding-right: 0.5em
 
 #friendlist
   padding: 0.5em