Update SNMP page layout

This change applies global styles to improve
page layout consistency and removes unnecessary
custom styling.

- Adds page, section, form field and actions styles
- Removes unused styles

Tested:
- Passes DAP

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I96bb4732fdf160b2cc9eff0ad3ed9309ab1b9ea4

2 files changed, 98 insertions, 150 deletions

diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
index 45ef681..6280a82 100644
--- a/app/configuration/controllers/snmp-controller.html
+++ b/app/configuration/controllers/snmp-controller.html
@@ -1,96 +1,96 @@
 <loader loading="loading"></loader>
-<div id="configuration-snmp">
-  <div class="row column">
-    <h1>SNMP settings</h1>
-    <div class="small-12 snmp_description">
-      Set the Simple Network Management Protocol (SNMP) with a host name or IP address and a port.
+<div id="configuration-snmp" class="page">
+  <h1 class="page-title">SNMP settings</h1>
+  <section class="section">
+    <p class="section-content">
+      Set the Simple Network Management Protocol (SNMP) with a host name or IP
+      address and a port.
+    </p>
+  </section>
+  <section class="section">
+    <div class="section-header">
+      <h2 class="section-title">Managers</h2>
     </div>
-    <div class="page-header">
-      <h2>Managers</h2>
-    </div>
-  </div>
-  <div class="row column">
-    <div class="small-8">
-      <div class="row column manager_group">
-        <div class="small-5 snmp__address">
-          <h3 id="host-name-ip-label">Host name or IP Address</h3>
-        </div>
-        <div class="small-5 snmp__port label">
-          <h3 id="port-label">Port</h3>
-        </div>
-      </div>
-      <div class="row column manager_group empty" ng-if="managers.length < 1">
+    <div class="section-content">
+      <p class="manager_group empty" ng-if="managers.length < 1">
         No managers have been added yet.
-      </div>
-      <form id="snmp__form" name="snmp__form" novalidate>
-        <div class="row column manager_group" ng-form="manager_group" ng-repeat="manager in managers track by $index">
-          <div class="small-11 snmp__fields">
-            <div class="row column">
-              <div class="small-10">
-                <div class="row column">
-                  <div id="snmp-manager{{$index+1}}-port-description" class="small-offset-6 small-6 help__text snmp__port">
-                    Value must be between 0-65,535
-                  </div>
-                </div>
-                <fieldset>
-                  <div class="row column" ng-class="{'submitted':submitted}">
-                    <div class="small-6 snmp__address">
-                      <input id="snmp-manager{{$index+1}}-address"
-                            name="snmp-manager{{$index+1}}-address"
-                            type="text"
-                            ng-change="manager.updateAddress=true"
-                            ng-model="manager.address"
-                            required
-                            aria-labeledby="host-name-ip-label"/>
-                      <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
-                        <p ng-message="required" role="alert">Field is required</p>
-                      </div>
-                    </div>
-                    <div class="small-6 snmp__port">
-                      <input id="snmp-manager{{$index+1}}-port"
-                            name="snmp-manager{{$index+1}}-port"
-                            type="number"
-                            min="0"
-                            max="65535"
-                            step="1"
-                            ng-change="manager.updatePort=true"
-                            ng-model="manager.port"
-                            required
-                            aria-labeledby="port-label"
-                            aria-describedby="snmp-manager{{$index+1}}-port-description"/>
-                      <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
-                        <div ng-message-exp="['min', 'max', 'number', 'step']">
-                          Invalid format
-                        </div>
-                        <p ng-message="required" role="alert">Field is required</p>
-                      </div>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div class="small-1 align-self-center snmp__buttons trash">
-                <button
-                  class="btn trash_button"
-                  type="button"
-                  ng-click="removeSNMPManager($index)"
-                  aria-label="Remove">
-                  <icon file="icon-trashcan.svg" aria-hidden="true"></icon>
-                </button>
-              </div>
+      </p>
+    </div>
+    <form id="snmp__form" name="snmp__form" novalidate>
+      <div class="section-content">
+        <div
+          class="row manager_group"
+          ng-form="manager_group"
+          ng-repeat="manager in managers track by $index">
+          <div class="small-12 medium-5 large-4 form__field snmp-field">
+            <label
+              for="snmp-manager{{ $index + 1 }}-address"
+              class="content-label">
+              Host name or IP Address
+            </label>
+            <input
+              id="snmp-manager{{ $index + 1 }}-address"
+              name="snmp-manager{{ $index + 1 }}-address"
+              type="text"
+              ng-change="manager.updateAddress=true"
+              ng-model="manager.address"
+              required/>
+            <div
+              ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error"
+              class="form-error"
+              ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
+              <p ng-message="required" role="alert">Field is required</p>
             </div>
           </div>
+          <div class="small-9 medium-5 large-4 form__field snmp-field">
+            <label for="snmp-manager{{ $index + 1 }}-port" class="content-label">Port</label>
+            <input
+              id="snmp-manager{{ $index + 1 }}-port"
+              name="snmp-manager{{ $index + 1 }}-port"
+              type="number"
+              min="0"
+              max="65535"
+              step="1"
+              ng-change="manager.updatePort=true"
+              ng-model="manager.port"
+              required/>
+            <div
+              ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error"
+              class="form-error"
+              ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
+              <p ng-message="required" role="alert">Value must be between 0 - 65,535</p>
+            </div>
+          </div>
+          <div class="small-3 medium-2 large-4 snmp-field">
+            <button
+              class="btn btn-tertiary trash_button"
+              type="button"
+              ng-click="removeSNMPManager($index)"
+              aria-label="Remove">
+              <icon file="icon-trashcan.svg" aria-hidden="true"></icon>
+            </button>
+          </div>
         </div>
-        <div class="row column">
-          <button class="btn  btn-tertiary  btn-add" type="button" ng-click="submitted=false; addNewSNMPManager();">
-            <icon file="icon-plus.svg"></icon>Add manager</button>
-        </div>
-      </form>
-    </div>
-  </div>
-  <div class="row column">
-    <div class="snmp__submit-wrapper">
-      <button type="button" ng-click="submitted=true;  snmp__form.$valid && setSNMP();" class="btn  btn-primary">Save settings</button>
-      <button type="button" class="btn  btn-secondary" ng-click="refresh()">Cancel</button>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+      </div>
+      <div class="section-content">
+        <button
+          class="btn btn-tertiary btn-add-manager"
+          type="button"
+          ng-click="submitted=false; addNewSNMPManager();">
+          <icon file="icon-plus.svg" aria-hidden="true"></icon>Add manager
+        </button>
+      </div>
+      <div class="form__actions">
+        <button
+          type="submit"
+          class="btn btn-primary"
+          ng-click="submitted=true;  snmp__form.$valid && setSNMP();">
+          Save settings
+        </button>
+        <button type="button" class="btn btn-secondary" ng-click="refresh()">
+          Cancel
+        </button>
+      </div>
+    </form>
+  </section>
+</div>
diff --git a/app/configuration/styles/snmp.scss b/app/configuration/styles/snmp.scss
index 08429c8..a249118 100644
--- a/app/configuration/styles/snmp.scss
+++ b/app/configuration/styles/snmp.scss
@@ -1,66 +1,14 @@
 #configuration-snmp {
-  .row {
-    padding-left: 0;
+  .page-title {
+    margin-bottom: 1rem;
   }
-  .snmp_description {
-    padding:1em 0 1em 0;
+  .trash_button {
+    margin-top: 2rem;
   }
-  .help__text {
-    font-size: 0.8rem;
-    color: $text-02;
-    padding-top: .3em;
-    display: none;
+  .snmp-field {
+    padding-right: 1.5rem;
   }
-  .form-error{
-    display: none;
-  }
-  .manager_group {
-    &.ng-invalid {
-      input {
-        color: black;
-        border-style: solid;
-      }
-      .help__text {
-        display: block;
-      }
-      .form-error {
-        display: block;
-      }
-    }
-    &.empty {
-      color: $text-02;
-      padding: 1em 0 1em 0;
-    }
-  }
-  .snmp__port {
-    padding: .3em 0 .3em 1em;
-    &.label {
-      padding: .3em 0 .3em 0em;
-    }
-  }
-  .snmp__address {
-    padding: .3em 1em .3em 0;
-  }
-
-  .snmp__buttons {
-    text-align: right;
-    .btn{
-      padding: 0;
-      width: auto;
-      svg {
-        fill: $primary-accent;
-        width: auto;
-        height: 1.3em;
-      }
-    }
-  }
-
-  .snmp__submit-wrapper {
-    width: 100%;
-    border-top: 1px solid $border-color-01;
-    button {
-      float: right;
-      margin: .5em;
-    }
+  .btn-add-manager {
+    padding: 0;
   }
 }