Homepage updated for support for smaller screens (#303)

* initial commit

* fix title styling

* updated css names

Author: ryanslatten

web-app/src/app/feed-panel/feed-panel-tab.component.html

@@ -1,7 +1,7 @@
 <div class="tab">
   <div *ngIf="tab?.iconUrl" class="img" [ngClass]="{'img__active': active}" [ngStyle]="imageStyle"></div>
-  <mat-icon *ngIf="tab?.icon" [ngClass]="{'icon__active': active, 'icon': true }">{{tab.icon}}</mat-icon>
-
-  <span class="tab--title" [ngClass]="{'tab--title__active': active }">{{tab?.title}}</span>
-</div>
-
+  <mat-icon *ngIf="tab?.icon" [ngClass]="{'icon__active': active, 'icon': true }" [matTooltip]="tab?.title"
+    matTooltipPosition="right">
+    {{tab.icon}}
+  </mat-icon>
+</div>

web-app/src/app/feed-panel/feed-panel-tab.component.scss

@@ -24,7 +24,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 16px;
+  padding: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   cursor: hand;
@@ -41,7 +41,7 @@
   color: var(--mdc-theme-primary, #1E88E5);
 }
 
-.tab > mat-icon {
+.tab>mat-icon {
   font-size: 24px;
   height: 24px;
   width: 24px;

web-app/src/app/feed-panel/feed-panel.component.scss

@@ -38,21 +38,13 @@ user-feed {
   position: absolute;
   background-color: white;
   border-right: 1px solid rgba(0, 0, 0, 0.20);
-  width: 57px;
+  width: 3rem;
   height: 100%;
   z-index: 10;
-  overflow-y: auto;
-  -webkit-transition: width .3s linear;
-  transition: width .3s linear;
-  -webkit-transform: translateZ(0) scale(1, 1);
-}
-
-.feeds-nav:hover {
-  width: 240px;
 }
 
 .feeds-content {
   position: relative;
-  margin-left: 56px;
+  margin-left: 3rem;
   width: 100%;
 }

web-app/src/app/home/home.component.html

@@ -5,16 +5,16 @@
 
   <div class="home-content">
     <mat-sidenav-container hasBackdrop="false">
-      <mat-sidenav #feed mode="side" position="start" opened>
+      <mat-sidenav #feed mode="side" position="start" class="feeds-nav">
         <feed-panel class="feed" [event]="event" [observationLocation]="newObservation"></feed-panel>
       </mat-sidenav>
-    
+
       <mat-sidenav #preferences mode="slide" position="end" disableClose="true">
         <preferences></preferences>
       </mat-sidenav>
-    
+
       <map (addObservation)="onAddObservation($event)"></map>
-    
+
     </mat-sidenav-container>
   </div>
 

web-app/src/app/home/home.component.scss

@@ -26,10 +26,14 @@ mat-sidenav-container {
   background: #e1e2e1;
   order: 1;
   width: 500px;
+  max-width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   position: relative;
   transition: margin-left .3s linear;
-  z-index: 1;
+}
+
+.feeds-nav {
+  max-width: 100%;
 }

web-app/src/app/home/home.module.ts

@@ -141,6 +141,7 @@ import { IngressModule } from '../ingress/ingress.module';
 import { FilterControlComponent } from '../map/controls/filter.component';
 import { ExportControlComponent } from '../map/controls/export.component';
 import { BannerModule } from '../banner/banner.module';
+import { MatMenuModule } from '@angular/material/menu';
 
 const routes: Routes = [{
   path: '',
@@ -177,6 +178,7 @@ const routes: Routes = [{
     MatGridListModule,
     MatIconModule,
     MatInputModule,
+    MatMenuModule,
     MatMomentDatetimeModule,
     MatPaginatorModule,
     MatProgressBarModule,
@@ -295,7 +297,7 @@ class AngularModule { }
     InputMaskModule.forRoot(),
     RouterModule.forChild(routes)
   ],
-  exports: [ RouterModule ]
+  exports: [RouterModule]
 })
 export class HomeModule {
 }

web-app/src/app/navigation/navigation.component.html

@@ -1,43 +1,60 @@
 <mat-toolbar color="primary">
   <div class="container">
     <div class="menu">
-      <button mat-icon-button class="navigation-options">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-
       <button mat-icon-button *ngIf="state === 'map'" (click)="toggleFeed()">
         <mat-icon>menu</mat-icon>
       </button>
-
-      <span class="title">Mage</span>
     </div>
 
-    <div>
+    <div class="event-title">
       <span class="filter-event">{{filteredEvent.name}}</span>
       <span *ngIf="filteredTeams" class="filter-teams"><span>> {{filteredTeams}}</span></span>
       <span *ngIf="filteredInterval" class="filter-interval"> {{filteredInterval}}</span>
     </div>
 
-    <div>
+    <div class="collapsed-menu">
       <button mat-button (click)="togglePreferences()">
         <mat-icon>tune</mat-icon>
       </button>
-
-      <a [routerLink]="['/profile']" mat-button>
-        <mat-icon>account_circle</mat-icon>
-      </a>
-
-      <a [routerLink]="['/about']" mat-button>
-        <mat-icon>info</mat-icon>
-      </a>
-
-      <a *ngIf="isAdmin" mat-button href="admin/#/admin/">
-        <mat-icon>admin_panel_settings</mat-icon>
-      </a>
-
-      <a mat-button (click)="onLogout()">
-        <mat-icon>logout</mat-icon>
-      </a>
+      <button mat-icon-button class="navigation-options" [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu>
+        <a mat-menu-item [routerLink]="['/profile']">
+          <mat-icon>account_circle</mat-icon>
+          <span>Profile</span>
+        </a>
+        <a mat-menu-item [routerLink]="['/about']">
+          <mat-icon>info</mat-icon>
+          <span>About</span>
+        </a>
+        <a mat-menu-item *ngIf="isAdmin" href="admin/#/admin/">
+          <mat-icon>admin_panel_settings</mat-icon>
+          <span>Admin</span>
+        </a>
+        <a mat-menu-item (click)="onLogout()">
+          <mat-icon>logout</mat-icon>
+          <span>Logout</span>
+        </a>
+      </mat-menu>
+
+      <div class="actions">
+        <a [routerLink]="['/profile']" mat-button>
+          <mat-icon>account_circle</mat-icon>
+        </a>
+
+        <a [routerLink]="['/about']" mat-button>
+          <mat-icon>info</mat-icon>
+        </a>
+
+        <a *ngIf="isAdmin" mat-button href="admin/#/admin/">
+          <mat-icon>admin_panel_settings</mat-icon>
+        </a>
+
+        <a mat-button (click)="onLogout()">
+          <mat-icon>logout</mat-icon>
+        </a>
+      </div>
     </div>
   </div>
 </mat-toolbar>

web-app/src/app/navigation/navigation.component.scss

@@ -10,15 +10,20 @@
   justify-content: space-between;
 }
 
-.menu {
+.collapsed-menu {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 }
 
-.title {
-  margin-left: 16px;
+.actions {
+  display: none;
+}
+
+.event-title {
+  margin-top: 0.2rem;
+  font-size: 0.75em;
 }
 
 .profile-avatar {
@@ -30,9 +35,10 @@
 
 @media(min-width:900px) {
   .navigation-options {
-    visibility: hidden;
     display: none;
-    width: 0;
-    padding: 0;
+  }
+
+  .actions {
+    display: block;
   }
 }