Revamp UI (fixes #185, fixes #147, fixes #136, fixes #124)

This commit is contained in:
Jakob Borg 2014-05-20 19:36:37 +02:00
parent 36bdd9cb4d
commit dd3d8a6c98
14 changed files with 763 additions and 719 deletions

View File

@ -54,94 +54,94 @@
border-color: #dbdbdb;
}
.btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
background-image: -webkit-linear-gradient(top, #3498db 0%, #2077b2 100%);
background-image: linear-gradient(to bottom, #3498db 0%, #2077b2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff2077b2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #2b669a;
border-color: #1e72aa;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #2d6ca2;
background-color: #2077b2;
background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
background-color: #2d6ca2;
border-color: #2b669a;
background-color: #2077b2;
border-color: #1e72aa;
}
.btn-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
background-image: -webkit-linear-gradient(top, #2ecc71 0%, #239a55 100%);
background-image: linear-gradient(to bottom, #2ecc71 0%, #239a55 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff239a55', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #3e8f3e;
border-color: #219251;
}
.btn-success:hover,
.btn-success:focus {
background-color: #419641;
background-color: #239a55;
background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
background-color: #419641;
border-color: #3e8f3e;
background-color: #239a55;
border-color: #219251;
}
.btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
background-image: -webkit-linear-gradient(top, #9b59b6 0%, #7a4092 100%);
background-image: linear-gradient(to bottom, #9b59b6 0%, #7a4092 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff7a4092', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #28a4c9;
border-color: #743d8b;
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-color: #7a4092;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #2aabd2;
border-color: #28a4c9;
background-color: #7a4092;
border-color: #743d8b;
}
.btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
background-image: -webkit-linear-gradient(top, #f1c40f 0%, #b8960b 100%);
background-image: linear-gradient(to bottom, #f1c40f 0%, #b8960b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffb8960b', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #e38d13;
border-color: #ae8e0a;
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #eb9316;
background-color: #b8960b;
background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
background-color: #eb9316;
border-color: #e38d13;
background-color: #b8960b;
border-color: #ae8e0a;
}
.btn-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
background-image: -webkit-linear-gradient(top, #e74c3c 0%, #cd2a19 100%);
background-image: linear-gradient(to bottom, #e74c3c 0%, #cd2a19 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffcd2a19', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #b92c28;
border-color: #c42818;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c12e2a;
background-color: #cd2a19;
background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
background-color: #c12e2a;
border-color: #b92c28;
background-color: #cd2a19;
border-color: #c42818;
}
.thumbnail,
.img-thumbnail {
@ -159,10 +159,10 @@
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: #357ebd;
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
background-color: #258cd1;
background-image: -webkit-linear-gradient(top, #3498db 0%, #258cd1 100%);
background-image: linear-gradient(to bottom, #3498db 0%, #258cd1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff258cd1', GradientType=0);
background-repeat: repeat-x;
}
.navbar-default {
@ -171,7 +171,7 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-radius: 4px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
}
@ -217,32 +217,32 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
}
.alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
background-image: -webkit-linear-gradient(top, #2ecc71 0%, #27ad60 100%);
background-image: linear-gradient(to bottom, #2ecc71 0%, #27ad60 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff27ad60', GradientType=0);
background-repeat: repeat-x;
border-color: #b2dba1;
border-color: #208e4e;
}
.alert-info {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
background-image: -webkit-linear-gradient(top, #9b59b6 0%, #8747a2 100%);
background-image: linear-gradient(to bottom, #9b59b6 0%, #8747a2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff8747a2', GradientType=0);
background-repeat: repeat-x;
border-color: #9acfea;
border-color: #713b87;
}
.alert-warning {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
background-image: -webkit-linear-gradient(top, #f1c40f 0%, #cea70c 100%);
background-image: linear-gradient(to bottom, #f1c40f 0%, #cea70c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffcea70c', GradientType=0);
background-repeat: repeat-x;
border-color: #f5e79e;
border-color: #aa8a0a;
}
.alert-danger {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
background-image: -webkit-linear-gradient(top, #e74c3c 0%, #e12e1c 100%);
background-image: linear-gradient(to bottom, #e74c3c 0%, #e12e1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffe12e1c', GradientType=0);
background-repeat: repeat-x;
border-color: #dca7a7;
border-color: #bf2718;
}
.progress {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
@ -251,49 +251,49 @@
background-repeat: repeat-x;
}
.progress-bar {
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
background-image: -webkit-linear-gradient(top, #3498db 0%, #217dbb 100%);
background-image: linear-gradient(to bottom, #3498db 0%, #217dbb 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff217dbb', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
background-image: -webkit-linear-gradient(top, #2ecc71 0%, #25a25a 100%);
background-image: linear-gradient(to bottom, #2ecc71 0%, #25a25a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff25a25a', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
background-image: -webkit-linear-gradient(top, #9b59b6 0%, #804399 100%);
background-image: linear-gradient(to bottom, #9b59b6 0%, #804399 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff804399', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
background-image: -webkit-linear-gradient(top, #f1c40f 0%, #c29d0b 100%);
background-image: linear-gradient(to bottom, #f1c40f 0%, #c29d0b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffc29d0b', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
background-image: -webkit-linear-gradient(top, #e74c3c 0%, #d62c1a 100%);
background-image: linear-gradient(to bottom, #e74c3c 0%, #d62c1a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffd62c1a', GradientType=0);
background-repeat: repeat-x;
}
.list-group {
border-radius: 4px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9;
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
text-shadow: 0 -1px 0 #217dbb;
background-image: -webkit-linear-gradient(top, #3498db 0%, #2384c6 100%);
background-image: linear-gradient(to bottom, #3498db 0%, #2384c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff2384c6', GradientType=0);
background-repeat: repeat-x;
border-color: #3278b3;
border-color: #2384c6;
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
@ -306,33 +306,33 @@
background-repeat: repeat-x;
}
.panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
background-image: -webkit-linear-gradient(top, #3498db 0%, #258cd1 100%);
background-image: linear-gradient(to bottom, #3498db 0%, #258cd1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff258cd1', GradientType=0);
background-repeat: repeat-x;
}
.panel-success > .panel-heading {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
background-image: -webkit-linear-gradient(top, #2ecc71 0%, #29b765 100%);
background-image: linear-gradient(to bottom, #2ecc71 0%, #29b765 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff29b765', GradientType=0);
background-repeat: repeat-x;
}
.panel-info > .panel-heading {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
background-image: -webkit-linear-gradient(top, #9b59b6 0%, #8f4bab 100%);
background-image: linear-gradient(to bottom, #9b59b6 0%, #8f4bab 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff8f4bab', GradientType=0);
background-repeat: repeat-x;
}
.panel-warning > .panel-heading {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
background-image: -webkit-linear-gradient(top, #f1c40f 0%, #dab10d 100%);
background-image: linear-gradient(to bottom, #f1c40f 0%, #dab10d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffdab10d', GradientType=0);
background-repeat: repeat-x;
}
.panel-danger > .panel-heading {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
background-image: -webkit-linear-gradient(top, #e74c3c 0%, #e43725 100%);
background-image: linear-gradient(to bottom, #e74c3c 0%, #e43725 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffe43725', GradientType=0);
background-repeat: repeat-x;
}
.well {

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -13,11 +13,11 @@
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-primary: #3498db;
@brand-success: #2ecc71;
@brand-info: #9b59b6;
@brand-warning: #f1c40f;
@brand-danger: #e74c3c;
//== Scaffolding
@ -45,7 +45,7 @@
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@ -63,7 +63,7 @@
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-color: inherit;
@ -95,9 +95,9 @@
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@border-radius-base: 3px;
@border-radius-large: 3px;
@border-radius-small: 0px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
@ -117,7 +117,7 @@
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
@table-condensed-cell-padding: 3px;
//** Default background color used for all tables.
@table-bg: transparent;
@ -296,7 +296,7 @@
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
@grid-float-breakpoint: @screen-xs-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
@ -333,12 +333,12 @@
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-color: #555;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-color: #555;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@ -466,20 +466,20 @@
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-text: darken(spin(@brand-success, -10), 5%);
@state-success-bg: @brand-success;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-info-text: darken(spin(@brand-info, -10), 5%);
@state-info-bg: @brand-info;
@state-info-border: darken(spin(@state-info-bg, -10), 5%);
@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-text: darken(spin(@brand-warning, -10), 5%);
@state-warning-bg: @brand-warning;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-text: darken(spin(@brand-danger, -10), 5%);
@state-danger-bg: @brand-danger;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
@ -595,19 +595,19 @@
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-text: #fff;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-text: #fff;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-text: #fff;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-text: #fff;
@alert-danger-border: @state-danger-border;
@ -677,19 +677,19 @@
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-text: #fff;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-text: #fff;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-text: #fff;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-text: #fff;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;

File diff suppressed because one or more lines are too long

View File

@ -128,21 +128,21 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
$scope.repoClass = function (repo) {
if (typeof $scope.model[repo] === 'undefined') {
return 'text-info';
return 'info';
}
if ($scope.model[repo].invalid !== '') {
return 'text-danger';
return 'danger';
}
var state = '' + $scope.model[repo].state;
if (state == 'idle') {
return 'text-success';
return 'success';
}
if (state == 'syncing') {
return 'text-primary';
return 'primary';
}
return 'text-info';
return 'info';
}
$scope.syncPercentage = function (repo) {
@ -154,7 +154,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
}
var pct = 100 * $scope.model[repo].inSyncBytes / $scope.model[repo].globalBytes;
return Math.ceil(pct);
return Math.floor(pct);
};
$scope.nodeStatus = function (nodeCfg) {
@ -223,6 +223,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
return '?';
};
$scope.findNode = function (nodeID) {
var matches = $scope.nodes.filter(function (n) { return n.NodeID == nodeID; });
if (matches.length != 1) {
return undefined;
}
return matches[0];
};
$scope.nodeName = function (nodeCfg) {
if (nodeCfg.Name) {
return nodeCfg.Name;
@ -231,15 +239,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
};
$scope.thisNodeName = function () {
var nodes = $scope.thisNode();
if (typeof nodes === 'undefined' || nodes.length != 1) {
var node = $scope.thisNode();
if (typeof node === 'undefined') {
return "(unknown node)";
}
var nodeCfg = nodes[0];
if (nodeCfg.Name) {
return nodeCfg.Name;
if (node.Name) {
return node.Name;
}
return nodeCfg.NodeID.substr(0, 6);
return node.NodeID.substr(0, 6);
};
$scope.editSettings = function () {
@ -260,6 +267,13 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
$scope.configInSync = true;
};
$scope.shutdown = function () {
$http.post(urlbase + '/shutdown').success(function () {
setTimeout($scope.refresh(), 250);
});
$scope.configInSync = true;
};
$scope.editNode = function (nodeCfg) {
$scope.currentNode = $.extend({}, nodeCfg);
$scope.editingExisting = true;
@ -338,11 +352,17 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
for (i = 0; i < $scope.nodes.length; i++) {
n = $scope.nodes[i];
if (n.NodeID === $scope.myID) {
return [n];
return n;
}
}
};
$scope.allNodes = function () {
var nodes = $scope.otherNodes();
nodes.push($scope.thisNode());
return nodes;
};
$scope.errorList = function () {
return $scope.errors.filter(function (e) {
return e.Time > $scope.seenError;
@ -570,6 +590,18 @@ syncthing.filter('chunkID', function () {
}
});
syncthing.filter('shortPath', function () {
return function (input) {
if (input === undefined)
return "";
var parts = input.split(/[\/\\]/);
if (!parts || parts.length <= 3) {
return input;
}
return ".../" + parts.slice(parts.length-2).join("/");
}
});
syncthing.directive('optionEditor', function () {
return {
restrict: 'C',

File diff suppressed because one or more lines are too long

View File

@ -16,31 +16,18 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
a.btn {
text-decoration: none;
}
ul+h5 {
margin-top: 1.5em;
}
.text-monospace {
font-family: monospace;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
border-top: none;
}
thead tr th {
text-align: center;
}
.logo {
margin: 0;
padding: 0;
@ -48,23 +35,6 @@
position: relative;
}
.progress {
height: 21px;
margin-bottom: inherit;
}
.progress .progress-bar {
line-height: 21px;
font-size: 12px;
}
.collapsed-visible {
display: none;
}
.collapsed .collapsed-visible {
display: inline;
}
.list-no-bullet {
list-style-type: none
}
@ -88,6 +58,14 @@
.ng-cloak {
display: none !important;
}
.table th {
font-weight: 400;
}
.table td {
padding-left: 20px !important;
}
</style>
</head>
@ -97,8 +75,21 @@
<nav class="navbar navbar-top navbar-default" role="navigation">
<div class="container">
<span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small> | {{thisNodeName()}}</small></span>
<button type="button" class="btn btn-primary btn-sm pull-right navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button>
<span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small class="hidden-xs"> <span class="text-muted">|</span> {{thisNodeName()}}</small></span>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a ng-click="addRepo()"><span class="glyphicon glyphicon-hdd"></span> Add Repository</a></li>
<li><a ng-click="addNode()"><span class="glyphicon glyphicon-globe"></span> Add Node</a></li>
<li class="divider"></li>
<li><a ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li class="divider"></li>
<li><a ng-click="shutdown()"><span class="glyphicon glyphicon-off"></span> Shutdown</a></li>
<li><a ng-click="restart()"><span class="glyphicon glyphicon-refresh"></span> Restart</a></li>
</ul>
</li>
</ul>
</div>
</nav>
@ -128,144 +119,160 @@
<!-- Repository list (top left) -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Repositories</h3></div>
<div class="panel-body">
<ul class="list-unstyled" ng-repeat="repo in repoList()">
<li>
<span class="text-monospace">{{repo.Directory}}</span>
<span ng-if="model[repo.ID].invalid" class="label label-danger">{{model[repo.ID].invalid}}</span>
<ul class="list-no-bullet">
<li>
<div class="li-column" title="Repository ID">
<span class="text-muted glyphicon glyphicon-tag"></span>
<span class="data">{{repo.ID}}</span>
</div>
<div class="li-column" title="Repository synchronization status">
<span class="text-muted glyphicon glyphicon-comment"></span>
<span class="data" ng-class="repoClass(repo.ID)">{{repoStatus(repo.ID)}}</span>
</div>
</li>
<li>
<div class="li-column" title="Global repository files">
<span class="text-muted glyphicon glyphicon-globe"></span>
<span class="data">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</span>
</div>
<div class="li-column" title="Local repository files">
<span class="text-muted glyphicon glyphicon-home"></span>
<span class="data">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</span>
</div>
</li>
<li>
<div class="li-column" title="Unsynchronized files">
<span class="text-muted glyphicon glyphicon-cloud-download"></span>
<span class="data">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</span>
</div>
<div class="li-column">
<span class="text-muted glyphicon glyphicon-cog"></span>
<span class="data"><a href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div>
</li>
</ul>
</li>
</ul>
<div class="panel-group" id="repositories">
<div class="panel panel-{{repoClass(repo.ID)}}" ng-repeat="repo in repoList()">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#repositories" href="#repo-{{repo.ID}}">
<span class="glyphicon glyphicon-hdd"></span> {{repo.Directory | shortPath}}
<span class="pull-right">{{repoStatus(repo.ID)}}</span>
</a>
</h3>
</div>
<div id="repo-{{repo.ID}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-striped">
<tbody>
<tr>
<th><span class="glyphicon glyphicon-tag"></span> Repository ID</th>
<td class="text-right">{{repo.ID}}</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-folder-open"></span> Folder</th>
<td class="text-right">{{repo.Directory}}</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
<td class="text-right">{{repoStatus(repo.ID)}}</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-globe"></span> Global Repository</th>
<td class="text-right">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-home"></span> Local Repository</th>
<td class="text-right">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-cloud-download"></span> Out of Sync</th>
<td class="text-right">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-lock"></span> Master Repository</th>
<td class="text-right">
<span ng-if="repo.ReadOnly">Yes</span>
<span ng-if="!repo.ReadOnly">No</span>
</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-globe"></span> Shared With</th>
<td class="text-right">
<span ng-repeat="n in repo.Nodes">
{{nodeName(findNode(n.NodeID))}}<span ng-if="!$last">, </span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div>
<div class="panel-footer">
<button type="button" class="pull-right btn btn-sm btn-default" ng-click="addRepo()"><span class="glyphicon glyphicon-plus"></span> Add Repository</button>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- Node list (top right) -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Nodes</h3></div>
<div class="panel-body">
<h5>Peer Nodes</h5>
<ul class="list-unstyled" ng-repeat="nodeCfg in otherNodes()">
<li>
<span class="text-monospace">{{nodeName(nodeCfg)}}</span>
<ul class="list-no-bullet">
<li>
<div class="li-column" title="Node address">
<span class="text-muted glyphicon glyphicon-link"></span>
<span class="data">{{nodeAddr(nodeCfg)}}</span>
</div>
<div class="li-column" title="Node synchronization status">
<span class="text-muted glyphicon glyphicon-comment"></span>
<span class="data text-{{nodeClass(nodeCfg)}}">{{nodeStatus(nodeCfg)}}</span>
</div>
</li>
<li>
<div class="li-column" title="Download rate">
<span class="text-muted glyphicon glyphicon-cloud-download"></span>
<span class="data">{{connections[nodeCfg.NodeID].inbps | metric}}bps</span>
</div>
<div class="li-column" title="Upload rate">
<span class="text-muted glyphicon glyphicon-cloud-upload"></span>
<span class="data">{{connections[nodeCfg.NodeID].outbps | metric}}bps</span>
</div>
</li>
<li>
<div class="li-column" title="Node version">
<span class="text-muted glyphicon glyphicon-tag"></span>
<span class="data">{{nodeVer(nodeCfg)}}</span>
</div>
<div class="li-column">
<span class="text-muted glyphicon glyphicon-cog"></span>
<span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div>
</li>
</ul>
</li>
</ul>
<h5>This Node</h5>
<ul class="list-unstyled" ng-repeat="nodeCfg in thisNode()">
<li>
<span class="text-monospace">{{nodeName(nodeCfg)}}</span>&emsp;
<ul class="list-no-bullet">
<li>
<div class="li-column" title="Current RAM utilization">
<span class="text-muted glyphicon glyphicon-th"></span>
<span class="data">{{system.sys | binary}}B RAM</span>
</div>
<div class="li-column" title="Current CPU utilization (10 s)">
<span class="text-muted glyphicon glyphicon-tasks"></span>
<span class="data">{{system.cpuPercent | alwaysNumber | natural:1}}% CPU</span>
</div>
</li>
<li>
<div class="li-column" title="Download rate (total)">
<span class="text-muted glyphicon glyphicon-cloud-download"></span>
<span class="data">{{inbps | metric}}bps</span>
</div>
<div class="li-column" title="Upload rate (total)">
<span class="text-muted glyphicon glyphicon-cloud-upload"></span>
<span class="data">{{outbps | metric}}bps</span>
</div>
</li>
<li>
<div ng-if="system.extAnnounceOK != undefined" class="li-column" title="Global announce server">
<span class="text-muted glyphicon glyphicon-bullhorn"></span>
<span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
<span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
</div>
<div class="li-column">
<span class="text-muted glyphicon glyphicon-cog"></span>
<span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div>
</li>
</ul>
</li>
</ul>
<div class="panel-group" id="nodes">
<div class="panel panel-default" ng-repeat="nodeCfg in [thisNode()]">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}"><span class="glyphicon glyphicon-home"></span> {{nodeName(nodeCfg)}}</a>
</h3>
</div>
<div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse in">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-striped">
<tbody>
<tr>
<th><span class="glyphicon glyphicon-th"></span> RAM Utilization</th>
<td class="text-right">{{system.sys | binary}}B</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-tasks"></span> CPU Utilization</th>
<td class="text-right">{{system.cpuPercent | alwaysNumber | natural:1}}%</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
<td class="text-right">{{inbps | metric}}bps</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
<td class="text-right">{{outbps | metric}}bps </td>
</tr>
<tr ng-if="system.extAnnounceOK != undefined">
<th><span class="glyphicon glyphicon-bullhorn"></span> Announce Server</th>
<td class="text-right">
<span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
<span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-tag"></span> Version</th>
<td class="text-right">{{version}}</td>
</tr>
</tbody>
</table>
</div>
<span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div>
</div>
</div>
<div class="panel panel-{{nodeClass(nodeCfg)}}" ng-repeat="nodeCfg in otherNodes()">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}">
<span class="glyphicon glyphicon-globe"></span>
{{nodeName(nodeCfg)}}
<span class="pull-right">{{nodeStatus(nodeCfg)}}</span>
</a>
</h3>
</div>
<div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-striped">
<tbody>
<tr>
<th><span class="glyphicon glyphicon-link"></span> Address</th>
<td class="text-right">{{nodeAddr(nodeCfg)}}</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
<td class="text-right">{{nodeStatus(nodeCfg)}}</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
<td class="text-right">{{connections[nodeCfg.NodeID].inbps | metric}}bps</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
<td class="text-right">{{connections[nodeCfg.NodeID].outbps | metric}}bps </td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-tag"></span> Version</th>
<td class="text-right">{{nodeVer(nodeCfg)}}</td>
</tr>
</tbody>
</table>
</div>
<span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div>
<div class="panel-footer">
<button type="button" class="pull-right btn btn-sm btn-default" ng-click="addNode()"><span class="glyphicon glyphicon-plus"></span> Add Node</button>
<div class="clearfix"></div>
</div>
</div>
</div>
@ -295,13 +302,12 @@
<nav class="navbar navbar-default navbar-fixed-bottom hidden-xs">
<div class="container">
<p class="navbar-text">{{version}}</p>
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li><a class="navbar-link" href="http://discourse.syncthing.net/">Support / Forum</a></li>
<li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
<li><a class="navbar-link" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
<li><a class="navbar-link" href="http://discourse.syncthing.net/category/documentation">Documentation</a></li>
<li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
<li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing">Source Code</a></li>
<li><a class="navbar-link" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
<li><a class="navbar-link" href="https://github.com/calmh/syncthing">Source Code</a></li>
</ul>
</div>
</nav>