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
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;
}
}