grid styling updates

pwillikins · Oct 16, 2019 · 932a5bd · 932a5bd
1 parent e096920
commit 932a5bd
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 48 deletions.
diff --git a/app/assets/javascripts/home/_home.html b/app/assets/javascripts/home/_home.html
@@ -8,53 +8,57 @@
       <md-tooltip md-direction="top">Create Recipe</md-tooltip>
     </md-button>
 
-    <md-grid-list 
-      class="recipe-grid-list" 
-      md-cols-xs="1" 
-      md-cols-sm="3" 
-      md-cols-gt-sm="4" 
-      md-row-height="90"
-      md-row-height-gt-xs="200">
-
-      <md-grid-tile class="recipe-grid-tile" ng-repeat="recipe in recipes">
-        <div flex-align="center center" flex-container="column" class="recipe-tile">
-          <!-- Tile Actions: Checkbox & Remove Icon -->
-          <div flex-container="row" class="tile-actions" flex-item="40">
+    <h1>Recipe Library</h1>
+
+    <div class="grid-list-container">
+      <md-grid-list 
+        class="recipe-grid-list" 
+        md-cols-xs="1" 
+        md-cols-sm="3" 
+        md-cols-gt-sm="4" 
+        md-row-height="90"
+        md-row-height-gt-xs="200">
+
+        <md-grid-tile class="recipe-grid-tile" ng-repeat="recipe in recipes">
+          <div flex-align="center center" flex-container="column" class="recipe-tile">
+            <!-- Tile Actions: Checkbox & Remove Icon -->
+            <div flex-container="row" class="tile-actions" flex-item="40">
+              <div 
+                class="checkbox" 
+                flex-container="row" 
+                ng-class="{'show-checkbox': areRecipesSelected()}" 
+                flex-align="start center" 
+                flex-item="50">
+                <md-checkbox 
+                  aria-label="Checkbox No Ink"
+                  ng-model="recipe.selected"
+                  ng-change="selectRecipe()">
+                </md-checkbox>
+              </div>
+              <div class="remove-icon" flex-container="row" flex-align="end center" flex-item="50">
+                <i class="material-icons" ng-click="removeRecipe(recipe.id)">delete</i>
+              </div>
+            </div>
+
             <div 
-              class="checkbox" 
+              class="recipe-name" 
+              flex-item="40" 
               flex-container="row" 
-              ng-class="{'show-checkbox': areRecipesSelected()}" 
-              flex-align="start center" 
-              flex-item="50">
-              <md-checkbox 
-                aria-label="Checkbox No Ink"
-                ng-model="recipe.selected"
-                ng-change="selectRecipe()">
-              </md-checkbox>
+              flex-align="center center" 
+              ng-click="navigateToRecipe(recipe.id)">
+              {{ recipe.attributes.name | uppercase }}
             </div>
-            <div class="remove-icon" flex-container="row" flex-align="end center" flex-item="50">
-              <i class="material-icons" ng-click="removeRecipe(recipe.id)">delete</i>
+            <div 
+              class="recipe-description" 
+              flex-item="20" 
+              flex-container="row" 
+              flex-align="end end" 
+              ng-click="navigateToRecipe(recipe.id)">
+              <span>Ingredients: {{ recipe.attributes.products.length }}</span>
+              <!-- {{ recipe.attributes.products.length }} INGREDIENTS -->
             </div>
           </div>
-
-          <div 
-            class="recipe-name" 
-            flex-item="40" 
-            flex-container="row" 
-            flex-align="center center" 
-            ng-click="navigateToRecipe(recipe.id)">
-            {{ recipe.attributes.name | uppercase }}
-          </div>
-          <div 
-            class="recipe-description" 
-            flex-item="20" 
-            flex-container="row" 
-            flex-align="end end" 
-            ng-click="navigateToRecipe(recipe.id)">
-            <span>Ingredients: {{ recipe.attributes.products.length }}</span>
-            <!-- {{ recipe.attributes.products.length }} INGREDIENTS -->
-          </div>
-        </div>
-      </md-grid-tile>
-    </md-grid-list>
+        </md-grid-tile>
+      </md-grid-list>
+    </div>
 </div>
diff --git a/app/assets/stylesheets/partials/body.scss b/app/assets/stylesheets/partials/body.scss
@@ -70,7 +70,7 @@
 
  .page-container {
     height: 100vh;
-    padding-top: 76px;
+    padding-top: 58px;
     background-color: white;
   }
 

diff --git a/app/assets/stylesheets/partials/home.scss b/app/assets/stylesheets/partials/home.scss
@@ -1,7 +1,13 @@
 .home-container {
-    width: 100%;
+    // width: 100%;
     height: calc(100vh - 81px);
     overflow: auto;
+    padding: 0 20px;
+
+    h1 {
+        padding: 0 7px;
+        margin: 10px 0;
+    }
 
     .md-button.md-fab {
         top: auto;
@@ -25,9 +31,13 @@
         bottom: 95px !important;
     }
 
+    .grid-list-container {
+        width: 100%;
+        height: 100%;
+    }
+
     .recipe-grid-tile {
         height: calc(198px) !important;
-        margin: 10px;
 
         .recipe-tile {
             text-align: center;
@@ -64,7 +74,7 @@
                 outline: none;
                 font-size: 25px;
                 font-weight: 200; 
-                width: 100%; 
+                width: 98%; 
             }
 
             .recipe-description {