Product form formatting

Author: learning-zone

shopping-cart/client/css/style.css

@@ -227,3 +227,7 @@ md-list-item._md-button-wrap>div.md-button:first-child {
 .custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
 }
+
+.md-block {
+ margin: 12px;
+}

shopping-cart/client/views/pages/products.html

@@ -42,12 +42,12 @@
  </md-input-container>
 
  <div layout-gt-sm="row"> 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Barcode</label>
  <input type="text" name="barcode" ng-model="product.barcode">
  </md-input-container>
 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Warehouse</label>
  <md-select name="warehouse" ng-model="product.warehouse">
  <md-option value="None">None</md-option>
@@ -58,7 +58,7 @@
  </md-select>
  </md-input-container>
 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Category</label>
  <md-select name="category" ng-model="product.category">
  <md-option value="Electronics">Electronics</md-option>
@@ -69,48 +69,48 @@
  </div>
 
  <div layout="row">
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Product SKU</label>
  <input type="text" name="sku" ng-model="product.sku">
  </md-input-container>
 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Product Serial Number</label>
  <input type="text" name="serial_number" ng-model="product.serial_number">
  </md-input-container>
 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Product Quantity</label>
  <input type="number" name="quantity" ng-model="product.quantity">
  </md-input-container>
  </div>
 
  <div layout="row">
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Reorder Stock Amount</label>
  <input type="number" name="reordered_stock_amount" ng-model="product.reordered_stock_amount">
  </md-input-container>
 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Product Purchase Price</label>
  <input type="number" name="purchase_price" ng-model="product.purchase_price">
  </md-input-container>
 
- <md-input-container flex-gt-sm>
+ <md-input-container flex-gt-sm class="md-block">
  <label>Product Selling Price</label>
  <input type="number" name="selling_price" ng-model="product.selling_price">
  </md-input-container>
  </div>
 
  <div layout="row">
- <md-input-container flex="25">
+ <md-input-container flex="25" class="md-block">
  <input type="file" aria-label="File Upload" onchange="angular.element(this).scope().SelectFile(event)" class="custom-file-input" file-model="product.file" />
  <hr />
  <img ng-src="{{PreviewImage}}" ng-show="PreviewImage != null" alt="" style="height:100px;" />
  </md-input-container>
  </div>
 
- <div>
+ <div class="md-block">
  <md-button md-no-ink class="md-raised md-primary" type="submit" ng-click="submit()">Submit</md-button>
  </div>