Style changes for power-ops page
- numerous incorrect CSS classes.
- compacting space to make page height shorter.
Change-Id: Ia40d82dea3eda30ebd3515d1c91c406b054aa5ae
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index 54c31fc..7f61435 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -19,36 +19,36 @@
</div>
<div class="row column">
<div class="row column">
- <h3 class="h4">Select a power operation</h3>
+ <h3 class="h4 subhead">Select a power operation</h3>
</div>
<!-- Power on displays only when server is shutdown -->
<div class="row column power-option" ng-hide="dataService.server_state == 'Running' || dataService.server_state == 'Quiesced'" ng-class="{disabled: dataService.server_unreachable || (confirm && !power_confirm) || dataService.loading, transitionAll: confirm && power_confirm}">
- <button id="power__power-on" class="btn-secondary" ng-click="togglePower()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg">Power on</button>
- <p>Attempts to power on the server</p>
+ <button id="power__power-on" class="btn-secondary inline" ng-click="togglePower()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg">Power on</button>
+ <p class="inline">Attempts to power on the server</p>
<!---<confirm title="power off" message="Power off the server" confirm="power_confirm" ng-show="power_confirm" callback="togglePower"></confirm>-->
</div>
<!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !warmboot_confirm) || dataService.loading, transitionAll: confirm && warmboot_confirm}">
- <button id="power__warm-boot" class="btn-secondary" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Warm reboot</button>
- <p>Attempts to perform an orderly shutdown before restarting the server</p>
+ <button id="power__warm-boot" class="btn-secondary inline" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Warm reboot</button>
+ <p class="inline">Attempts to perform an orderly shutdown before restarting the server</p>
<confirm title="Warm Reboot" message="perform an orderly shutdown" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !coldboot_confirm) || dataService.loading, transitionAll: confirm && coldboot_confirm}">
- <button id="power__cold-boot" class="btn-secondary" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Cold reboot</button>
- <p>Shuts down the server immediately, then restarts it</p>
+ <button id="power__cold-boot" class="btn-secondary inline" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Cold reboot</button>
+ <p class="inline">Shuts down the server immediately, then restarts it</p>
<confirm title="Cold Reboot" message="Shutdown server immediately." confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="coldReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !orderly_confirm) || dataService.loading, transitionAll: confirm && orderly_confirm}">
- <button id="power__soft-shutdown" class="btn-secondary" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Orderly shutdown</button>
- <p>Attempts to stop all software on the server before removing power</p>
+ <button id="power__soft-shutdown" class="btn-secondary inline" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Orderly shutdown</button>
+ <p class="inline">Attempts to stop all software on the server before removing power</p>
<confirm title="Orderly shutdown" message="Attempts to stop all software orderly." confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="orderlyShutdown"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !immediately_confirm) || dataService.loading, transitionAll: confirm && immediately_confirm}">
- <button id="power__hard-shutdown" class="btn-secondary" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Immediate shutdown</button>
- <p>Removes power from the server without waiting for software to stop</p>
+ <button id="power__hard-shutdown" class="btn-secondary inline" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Immediate shutdown</button>
+ <p class="inline">Removes power from the server without waiting for software to stop</p>
<confirm title="Immediate shutdown" message="Removes power from the server immediately." confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="immediateShutdown"></confirm>
</div>
</div>
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 087e375..e6f1d09 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -15,7 +15,7 @@
// Power Curernt status wrapper
.power__current-status {
border-bottom: 1px solid $medgrey;
- margin: 2.625em 0 1.2em 0;
+ margin: 1.3em 0 1.2em 0;
.h4 {
padding: 0;
margin: 0 0 .5em 0;
@@ -42,7 +42,7 @@
.power__indicator-bar {
font-weight: bold;
padding: 1.4em 3em 0;
- margin-bottom: 3.750em;
+ margin-bottom: 3em;
background-size: 200% 100%;
background-image: linear-gradient(to right, $lightgrey 50%, $status-ok-light 50%);
background-position: 0;
@@ -82,7 +82,6 @@
// Power button options
.power-option {
- border-top: 1px solid $medgrey;
padding: 1.8em 0 1em 0;
position: relative;
overflow: hidden;
@@ -95,7 +94,10 @@
}
}
@include mediaQuery(small){
- padding: 1.8em 0 1em 1.8em;
+ padding: 1.8em 0 0 1.8em;
+ }
+ p {
+ margin-left: 2em;
}
}