Added confirmation page for monitoring + a few tweaks.

This commit is contained in:
baldo 2016-05-18 22:50:06 +02:00
parent 1b173b79d4
commit 0bdce5debb
24 changed files with 431 additions and 72 deletions

View file

@ -179,9 +179,9 @@ $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%);
$state-danger-text: darken($brand-danger, 10%);
$state-danger-bg: lighten($brand-danger, 30%);
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 3%);
$state-success-text: darken($brand-success, 10%);
$state-success-bg: lighten($brand-success, 30%);
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%);
$state-success-text: darken($brand-success, 20%);
$state-success-bg: lighten($brand-success, 35%);
$state-success-border: darken(adjust-hue($state-success-bg, -10), 7%);
$state-info-text: darken($brand-info, 20%);
$state-info-bg: lighten($brand-info, 30%);
$state-info-border: darken(adjust-hue($state-info-bg, -10), 10%);

View file

@ -11,6 +11,7 @@
@import "views/_newNodeForm";
@import "views/_updateNodeForm";
@import "views/_deleteNodeForm";
@import "views/_confirmMonitoring";
@import "views/directives/_help";
@import "views/directives/_nodeForm";
@import "views/directives/_nodeSaved";

View file

@ -0,0 +1,55 @@
.confirm-monitoring {
@extend .jumbotron, .container;
.actions {
text-align: center;
margin-top: 30px;
}
.back-button {
@extend .btn, .btn-lg, .btn-info;
}
.summary {
@extend .well;
display: table;
margin: {
left: auto;
right: auto;
top: 30px;
bottom: 30px;
};
border: 3px dashed $gray;
.icon {
@extend .fa, .fa-heartbeat;
display: table-cell;
color: $brand-primary;
font-size: 64px;
}
.node {
@extend .dl-horizontal;
display: table-cell;
overflow: hidden;
font-family: monospace;
font-size: 24px;
dt {
width: 100px;
}
dd {
text-overflow: ellipsis;
margin-left: 120px;
}
}
}
}

View file

@ -10,7 +10,7 @@
}
.actions {
margin-bottom: 10px;
margin-top: 30px;
}
.token-hint {
@ -24,18 +24,32 @@
}
.summary {
.node {
@extend .well;
@extend .well;
border: 3px dashed $gray;
font-family: monospace;
font-size: 32px;
}
display: table;
margin: {
left: auto;
right: auto;
top: 30px;
bottom: 30px;
}
border: 3px dashed $gray;
font-family: monospace;
font-size: 32px;
.icon {
@extend .fa, .fa-trash;
display: table-cell;
padding-right: 18px;
}
.node {
display: table-cell;
}
}
.back-button {

View file

@ -55,26 +55,47 @@ f-node-form {
color: $brand-primary;
}
.monitoring-active-info {
@extend .alert-success;
}
.monitoring-confirmation-info {
@extend .alert, .alert-info;
@extend .alert-info;
}
.monitoring-confirmation-pending-info {
@extend .alert, .alert-warning;
@extend .alert-warning;
}
.monitoring-confirmation-info, .monitoring-confirmation-pending-info {
.monitoring-active-info,
.monitoring-confirmation-info,
.monitoring-confirmation-pending-info {
@extend .alert;
display: table;
.icon, .message {
display: table-cell;
}
.icon {
@extend .fa, .fa-exclamation-triangle;
@extend .fa;
font-size: 24px;
padding-right: 15px;
}
}
.icon, .message {
display: table-cell;
.monitoring-active-info {
.icon {
@extend .fa-heartbeat;
}
}
.monitoring-confirmation-info,
.monitoring-confirmation-pending-info {
.icon {
@extend .fa-exclamation-triangle;
}
}