Adjusting spacing on main page

mtlynch · May 19, 2018 · 77f6332 · 77f6332
1 parent 91d88b7
commit 77f6332
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/src/app/public/home-page/home-page.component.html b/src/app/public/home-page/home-page.component.html
@@ -1,9 +1,9 @@
-<mat-toolbar>
-  <span>Ingredient Parser Demo</span>
+<mat-toolbar color="primary">
+  <span>Ingredient Parser - Developer Demo</span>
 </mat-toolbar>
 <form>
     <mat-form-field class="input-full-width" floatPlaceholder="never" hideRequiredMarker>
-      <input matInput placeholder="2 cups brown sugar" name="ingredientRaw" [(ngModel)]="ingredientRaw" required>
+      <input matInput placeholder="1 1/2 cups finely chopped red onions" name="ingredientRaw" [(ngModel)]="ingredientRaw" required>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult || !ingredientRaw">Parse</button>
     <button mat-raised-button (click)="reset()" [disabled]="!ingredientRaw">Reset</button>
@@ -34,8 +34,6 @@
       <mat-card-subtitle>preparation instructions</mat-card-subtitle>
   </mat-card>
 </div>
-<mat-list role="list" *ngIf="requestsRemaining !== null">
-  <mat-list-item role="listitem">
-    <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
-  </mat-list-item>
-</mat-list>  
+<div *ngIf="requestsRemaining !== null">
+  <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
+</div>
diff --git a/src/app/public/home-page/home-page.component.scss b/src/app/public/home-page/home-page.component.scss
@@ -3,7 +3,11 @@
 mat-toolbar {
   margin-bottom: 10%;
   @include respond-to('small') {
-    margin-bottom: 25%;
+    font-size: 14pt;
+    margin-bottom: 10px;
+  }
+  @include respond-to('x-small') {
+    font-size: 12pt;
   }
 }
 
@@ -30,11 +34,19 @@ div.error {
 }
 
 div.result-cards {
+  padding: 25px 0px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 
   @include respond-to('medium') {
     flex-direction: column;
   }
+}
+
+mat-card {
+  margin-right: 25px;
+  @include respond-to('medium') {
+    margin-right: 2px;
+  }
 }
diff --git a/src/styles/_breakpoints.scss b/src/styles/_breakpoints.scss
@@ -1,6 +1,6 @@
 // Screen widths for responsive design breakpoints.
 $breakpoints: (
-  'x-small': 480px,
+  'x-small': 350px,
   'small': 768px,
   'medium': 992px,
   'large': 1200px

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,4 +1,4 @@
-@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import './breakpoints';
 @import './fonts';
 @import './global';