Updated Graph Page Css

src/app/custom-date-adapter.ts

@@ -19,6 +19,9 @@ export class CustomDatePipe implements PipeTransform {
 @Pipe({ name: 'date' })
 @Injectable()
 export class CustomDateAdapter extends NativeDateAdapter implements PipeTransform  {
+  transform(value: any, ...args: any[]) {
+    throw new Error('Method not implemented.');
+  }
 
   getFirstDayOfWeek(): number {
    return 1;

src/app/graphs/graphs.component.css

@@ -1,33 +1,21 @@
 /* https://css-tricks.com/dont-overthink-flexbox-grids/ */
 .flex-grid {
   display: flex;
-
   align-items: center;
 }
 
-.flex-grid .col {
-  flex: 1;
+.flex-grid-plot .col {
+  flex: 2;
 }
 
-.flex-grid-thirds {
-  display: flex;
-  justify-content: space-between;
-}
-
-.flex-grid-thirds .col {
-  width: 32%;
-}
-
-@media (max-width: 400px) {
-  .flex-grid,
-  .flex-grid-thirds {
-    display: block;
+/* @media (max-width: 400px) {
+  .flex-grid {
+    display: flex;
     .col {
-      width: 100%;
       margin: 0 0 10px 0;
     }
   }
-}
+} */
 
 * {
   box-sizing: border-box;
@@ -35,6 +23,7 @@
 
 mat-form-field {
   margin: 20px;
+
 }
 
 mat-card {
@@ -44,6 +33,9 @@ mat-card {
 body {
   padding: 20px;
 }
+button {
+  padding: 20px;
+}
 .flex-grid { 
   margin: 0 20px 20px 0;
 }

src/app/graphs/graphs.component.html

@@ -38,59 +38,46 @@
           style="color:red">{{topBarData[6]}}</span></span>
     </mat-card>
   </div>
-
   <mat-card>
+
     <div class="flex-grid">
-      <div class="col">
-        <h1>Search</h1>
+      <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">
-        <button mat-raised-button class="btn-lg" color="primary" (click)="searchToday()">Today</button>
-      </div>
-      <div class="col">
-        <button mat-raised-button class="btn-lg" color="primary" (click)="searchAll()">All</button>
-      </div>
-      <div class="col">
-        <button mat-raised-button class="btn-lg" color="primary" (click)="updateGraphData()">Run</button>
-      </div>
-
-      <div class="col">
-        <mat-form-field>
-          <mat-date-range-input [rangePicker]="picker">
-            <input matStartDate [(ngModel)]="startDate">
-            <input matEndDate [(ngModel)]="endDate">
-          </mat-date-range-input>
-          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-          <mat-date-range-picker #picker></mat-date-range-picker>
-        </mat-form-field>
-      </div>
-      <div class="col">
+      <div class="col" style="width: flex">
+          <mat-form-field>
+            <mat-date-range-input [rangePicker]="picker">
+              <input matStartDate [(ngModel)]="startDate">
+              <input matEndDate [(ngModel)]="endDate">
+            </mat-date-range-input>
+              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+              <mat-date-range-picker #picker></mat-date-range-picker>
+          </mat-form-field>
         <mat-form-field>
           <mat-label>Location ID(s)</mat-label>
           <textarea matInput [(ngModel)]="form.location" placeholder="Location Codes"></textarea>
         </mat-form-field>
-      </div>
-
-      <div class="col">
+  
         <mat-form-field>
           <mat-label>Student ID(s)</mat-label>
           <textarea matInput [(ngModel)]="form.studentId" placeholder="Ex. 00224483"></textarea>
         </mat-form-field>
-      </div>
-
-      <div class="col">
+  
         <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">
+  <div class="flex-grid flex-grid-plot">
     <mat-card class="col">
       <mat-card-header>
         <h1>{{ChartName}}</h1>

src/app/sidebar/sidebar.component.html

@@ -15,8 +15,8 @@
 
 	<mat-sidenav-content >
 		<p>
-			<mat-checkbox [(ngModel)]="opened">Toggle Sidebar</mat-checkbox>
-		</p>
+            <button mat-raised-button class="btn-sm" color="white" (click)="Toggle()">Toggle Sidebar</button>
+					</p>
 		<router-outlet></router-outlet>
 	</mat-sidenav-content>
 </mat-sidenav-container>

src/app/sidebar/sidebar.component.ts

@@ -8,8 +8,10 @@ import { Component, OnInit } from '@angular/core';
 export class SidebarComponent implements OnInit {
 
   constructor() { }
-  opened: boolean;
-
+  opened: boolean = false;
+  Toggle(){
+    this.opened = !this.opened;
+  }
   ngOnInit(): void {
   }