Merge pull request #5 from sartography/dashboard

A little css cleanup.

src/app/app.component.html

@@ -1,6 +1,8 @@
 <div class="mat-typography">
   <app-navbar></app-navbar>
-  <router-outlet *ngIf="!loading; else loadingMessage"></router-outlet>
+  <div class="content">
+    <router-outlet *ngIf="!loading; else loadingMessage"></router-outlet>
+  </div>
   <app-footer></app-footer>
 </div>
 

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.content {
+  padding-top: 64px;
+}

src/app/graphs/graphs.component.css

@@ -2,19 +2,8 @@
 .flex-grid {
   display: flex;
   align-items: center;
-}
-
-.flex-grid-plot .col {
-  flex: 2;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-mat-form-field {
-  margin: 20px;
-
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 mat-card {
@@ -24,13 +13,10 @@ mat-card {
 body {
   padding: 20px;
 }
-button {
-  padding: 20px;
-}
-.flex-grid { 
-  margin: 0 20px 20px 0;
-}
-.col {
+
+.graph {
+  max-width: 800px;
   padding: 20px;
+  flex: 2;
 }
 

src/app/graphs/graphs.component.html

@@ -40,16 +40,13 @@
   </div>
   <mat-card>
 
+    <h1>Search</h1>
     <div class="flex-grid">
-      <div class="col" style="width: 300px">
-        <h1>Search</h1> 
         <button mat-raised-button class="btn-lg" color="primary" (click)="searchToday()">Today</button>
         <button mat-raised-button class="btn-lg" color="primary" (click)="searchAll()">All</button>
         <button mat-raised-button class="btn-lg" color="primary" (click)="updateGraphData()">Run</button>
         <br>
         <mat-checkbox [(ngModel)]="form.includeTests">Include Test Labels</mat-checkbox>
-      </div>
-      <div class="col" style="width: flex">
           <mat-form-field>
             <mat-date-range-input [rangePicker]="picker">
               <input matStartDate [(ngModel)]="startDate">
@@ -62,23 +59,21 @@
           <mat-label>Location ID(s)</mat-label>
           <textarea matInput [(ngModel)]="form.location" placeholder="Location Codes"></textarea>
         </mat-form-field>
-  
+
         <mat-form-field>
           <mat-label>Student ID(s)</mat-label>
           <textarea matInput [(ngModel)]="form.studentId" placeholder="Ex. 00224483"></textarea>
         </mat-form-field>
-  
+
         <mat-form-field>
           <mat-label>Compute ID(s)</mat-label>
           <textarea matInput [(ngModel)]="form.computeId" placeholder="Ex. ECC8Z"></textarea>
         </mat-form-field>
-        
-      </div>
     </div>
-  
+
   </mat-card>
   <div class="flex-grid flex-grid-plot">
-    <mat-card class="col">
+    <mat-card class="graph">
       <mat-card-header>
         <h1>{{ChartName}}</h1>
       </mat-card-header>
@@ -90,7 +85,7 @@
       </div>
     </mat-card>
 
-    <mat-card class="col">
+    <mat-card class="graph">
       <mat-card-header>
         <h1>Average Count By Weekday For {{form.startDate |changed_date : 0}} - {{form.endDate |changed_date : 0}}</h1>
       </mat-card-header>
@@ -102,7 +97,7 @@
       </div>
     </mat-card>
 
-    <mat-card class="col">
+    <mat-card class="graph">
       <mat-card-header>
         <h1>Average Count By Hour For {{form.startDate |changed_date : 0}} - {{form.endDate |changed_date : 0}}</h1>
       </mat-card-header>
@@ -165,11 +160,11 @@
     </table>
     <mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
     (page)="updatePage($event)">
-  </mat-paginator> 
+  </mat-paginator>
   </mat-card>
 
 </div>
 
-<!-- 
+<!--
 
--->
+-->

src/material-theme.scss

@@ -16,7 +16,6 @@
 
   body {
     margin: 0;
-    padding-top: $header-height;
   }
 
   app-navbar {
@@ -324,7 +323,7 @@
 
   mat-form-field {
     &.mat-form-field, &.mat-form-field-should-float label {
-      font-size: 20px;
+      font-size: 1.2em;
     }
   }