From 319c5caf949e60d13305f2c2a99dddf3b6f63547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20H=C3=B6ning?= Date: Wed, 27 Apr 2022 11:32:37 +0200 Subject: [PATCH 1/4] new styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Nicolas Höning --- flexmeasures/ui/static/css/flexmeasures.css | 741 +++++++++++++++++++ flexmeasures/ui/templates/base.html | 4 +- flexmeasures/ui/templates/crud/asset.html | 4 +- flexmeasures/ui/templates/views/sensors.html | 2 +- 4 files changed, 746 insertions(+), 5 deletions(-) diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css index 3c7f7ceb7..9a8dcd6b7 100644 --- a/flexmeasures/ui/static/css/flexmeasures.css +++ b/flexmeasures/ui/static/css/flexmeasures.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + body { padding-top: 100px; /* This default is overridden by flexmeasures.js to support a fluid navbar */ } @@ -506,3 +508,742 @@ i.icon-wind:hover:before { .icon-bidirectional_charging_stations:before { content: '\e805'; } /* '' */ .litepicker { font-size: 14px;} + + +body *:not(.fa) { + font-family: 'Poppins', sans-serif !important; +} + +.navbar-default { + background-color: #1a3443; + border: none; + z-index: 999991; +} + +.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { + color: #FFF !important; + background-color: #f1a122 !important; +} + +.nav .open>a, .nav .open>a:focus, .nav .open>a:hover { + background-color: #f1a122 !important; + color: #FFF !important; + border: none; +} + +.navbar-default .dropdown-menu { + border: none !important; +} + +.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { + color: #f1a122; + background-color: transparent; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.navbar-default .navbar-nav>li>a { + color: #FFF; + font: 500 14px/14px 'Poppins'; +} + +.navbar-brand { + display: inline-block; + width: 200px; + height: 100%; +} + +.navbar-brand a { + display: inline-block; +} + +.navbar-brand a span { + display: inline-block; + color: #f1a122 !important; +} + +.navbar-brand a span img { + width: 200px; +} + +@media (min-width: 768px) { + .navbar-nav>li>a { + padding-top: 28px; + padding-bottom: 28px; + } + + .navbar-default .dropdown-menu a { + transition: .3s; + -webkit-transition: .3s; + -moz-transition: .3s; + -ms-transition: .3s; + -o-transition: .3s; + } + + .navbar-default .dropdown-menu a:hover { + letter-spacing: 1px; + } +} + +@media (max-width: 767px) { + .navbar-default .navbar-nav .open .dropdown-menu>li>a { + color: #FFF; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + + .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { + color: #f1a122; + background-color: transparent; + } +} + +.page-footer { + padding-top: 1px; + background: #1a3443; +} + +.footer { + color: #FFF!important; +} + +.footer a { + color: #f1a122; +} + +.footer-logo { + width: 50px; + margin-top: 15px; + margin-bottom: 20px; +} + +.leaflet-bar a { + text-decoration: none; +} + +.floatThead-wrapper { + margin-top: 50px; + margin-bottom: 50px; + overflow-y: auto; + box-shadow: 0 0 10px rgba(0,0,0,.2); + border-radius: 6px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + -ms-border-radius: 6px; + -o-border-radius: 6px; +} + +.floatThead-wrapper .table { + margin-bottom: 0 !important; +} + +.floatThead-wrapper .table>thead>tr>th { + border-bottom: none !important; + color: #1a3443; + +} + +.floatThead-wrapper .table>tbody>tr>td, .floatThead-wrapper .table>tbody>tr>th, .floatThead-wrapper .table>tfoot>tr>td, .floatThead-wrapper .table>tfoot>tr>th, .floatThead-wrapper .table>thead>tr>td, .table>thead>tr>th { + padding: 15px !important; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid #eeeeee ; +} + +h3 { + margin: 0; + padding-top: 10px; + font-size: 30px; + font-weight: 600; + color: #1a3443; +} + +.navbar-default .navbar-collapse, .navbar-default .navbar-form { + border-color: #102029; +} + +.navbar-toggle { + position: relative; + float: right; + padding: 9px 10px; + margin-top: 8px; + margin-right: 15px; + margin-bottom: 8px; + background-color: transparent; + background-image: none; + border: none !important; + border-radius: 4px; +} + +.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { + background: none !important; +} + +.navbar-default .navbar-toggle .icon-bar { + background-color: #FFF; +} + +#mapid { + margin-top: 20px; + border-radius: 6px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + -ms-border-radius: 6px; + -o-border-radius: 6px; +} + +.leaflet-bar a { + background-color: #1a3443; + border-bottom: #102029 1px solid !important; + color: #FFF; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.leaflet-bar a:last-child { + border-bottom: none !important; +} + +.leaflet-bar a:hover { + background-color: #152b38; + color: #FFF; +} + +.leaflet-control-layers { + box-shadow: 0 1px 5px rgba(0,0,0,0.4); + background: #1a3443; + border-radius: 5px; +} + +.leaflet-control-layers-overlays label span { + color: #FFF; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.leaflet-control-layers-overlays label span:hover { + color: #f1a122; +} + +.leaflet-bar a.leaflet-disabled { + cursor: default; + background-color: #152b38; + color: #bbb; +} + +.navbar-toggle { + margin-top: 20px !important; +} + +.modal { + z-index: 999993 !important; + color: #1a3443; +} + +.modal-backdrop { + z-index: 999992 !important; +} + +.close:focus, .close:hover { + color: #c21431; + transition: .3s; + -webkit-transition: .3s; + -moz-transition: .3s; + -ms-transition: .3s; + -o-transition: .3s; +} + +#tzwarn { + margin-top: 20px; + margin-bottom: 20px; + background: rgba(241, 161, 34, .2); + color: #ff9d00; + border: none; +} + +.month-item-name, .month-item-year { + padding: 7px !important; + outline: none; + border-radius: 4px; + border: 1px solid #ddd; + font-size: 13px; + color: #f1a122; + background: #1a3443; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; +} + +#datepicker { + margin-top: 50px; + margin-bottom: 30px; +} + +.container__predefined-ranges { + padding: 20px; + margin-right: 10px; + box-shadow: 0 0 10px rgba(0,0,0,.1) !important; + border-radius: 6px !important; + -webkit-border-radius: 6px !important; + -moz-border-radius: 6px !important; + -ms-border-radius: 6px !important; + -o-border-radius: 6px !important; +} + +.container__predefined-ranges button { + font-size: 14px; + font-weight: 500; + cursor: pointer !important; +} + +.container__months { + border-radius: 6px !important; + -webkit-border-radius: 6px !important; + -moz-border-radius: 6px !important; + -ms-border-radius: 6px !important; + -o-border-radius: 6px !important; +} + +.month-item-weekdays-row { + font-size: 14px; +} + +.week-number { + font-size: 14px !important; +} + +.litepicker .container__days .day-item.is-today { + background: rgba(241, 161, 34, .2); + color: #f1a122; +} + +.litepicker .container__days .day-item { + color: var(--litepicker-day-color); + font-size: 14px; + cursor: pointer; + width: 38px; + height: 38px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + box-shadow: none !important; + border-radius: 50%; + transition: .4s; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.litepicker .container__days .day-item:hover { + border: none; + background: rgba(26, 52, 67, .2); + color: #1a3443; +} + +.litepicker .container__days .day-item.is-in-range { + background-color: rgba(26, 52, 67, .2); + border-radius: 0; + color: #1a3443; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; +} + +.litepicker .container__days .day-item.is-start-date.is-end-date { + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; +} + +.litepicker .container__days .day-item.is-end-date { + color: #f1a122; + background-color: #1a3443; + border-radius: 0 50% 50% 0; + -webkit-border-radius: 0 50% 50% 0; + -moz-border-radius: 0 50% 50% 0; + -ms-border-radius: 0 50% 50% 0; + -o-border-radius: 0 50% 50% 0; +} + +.litepicker .container__days .day-item.is-start-date { + color: #f1a122; + background-color: #1a3443; + border-radius: 50% 0 0 50%; + -webkit-border-radius: 50% 0 0 50%; + -moz-border-radius: 50% 0 0 50%; + -ms-border-radius: 50% 0 0 50%; + -o-border-radius: 50% 0 0 50%; +} + +.litepicker .container__days .day-item.is-end-date.is-flipped { + border-radius: 50% 0 0 50%; + -webkit-border-radius: 50% 0 0 50%; + -moz-border-radius: 50% 0 0 50%; + -ms-border-radius: 50% 0 0 50%; + -o-border-radius: 50% 0 0 50%; +} + +.litepicker .container__days .day-item.is-start-date.is-flipped { + border-radius: 0 50% 50% 0; + -webkit-border-radius: 0 50% 50% 0; + -moz-border-radius: 0 50% 50% 0; + -ms-border-radius: 0 50% 50% 0; + -o-border-radius: 0 50% 50% 0; +} + +.month-item { + padding: 15px !important; +} + +.litepicker .container__months.columns-2 { + width: auto; +} + +.litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges button { + transition: .3s; + -webkit-transition: .3s; + -moz-transition: .3s; + -ms-transition: .3s; + -o-transition: .3s; +} + +.litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges button:hover { + cursor: pointer; + opacity: 1; + transform: translatex(5px); + -webkit-transform: translatex(5px); + -moz-transform: translatex(5px); + -ms-transform: translatex(5px); + -o-transform: translatex(5px); +} + +.litepicker .container__months .month-item-header .button-next-month:hover>svg { + fill: #f1a122 !important; +} + +.litepicker .container__months .month-item-header .button-previous-month:hover>svg { + fill: #f1a122 !important; +} + +.sensor-data .col-sm-12 { + padding: 0; +} + +#sensorchart { + padding: 20px 15px 20px 15px; + box-shadow: 0 0 10px rgba(0,0,0,.1); + border-radius: 6px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + -ms-border-radius: 6px; + -o-border-radius: 6px; +} + +.role-title-text text { + font-size: 20px; + fill: #1a3443; +} + +.sensor-data .row { + margin: 0 !important; +} + +.container__months { + justify-content: center; +} + +hr { + border-top: none; + padding: 0; +} + +#sensorchart { + margin-bottom: 40px; +} + +@media (max-width:525px) { + #datepicker .container__main { + flex-wrap: wrap; + margin-left: 15px; + margin-right: 15px; + } + + #datepicker .container__predefined-ranges { + width: 100%; + margin-right: 0; + margin-bottom: 15px; + } +} + +.header-action-button { + padding-top: 30px; + display: flex; + justify-content: flex-end; + padding-right: 15px; +} + +.header-action-button .col-sm-1 { + width: auto !important; + padding: 0; +} + +.header-action-button .col-sm-1 * { + float: none !important; +} + +.header-action-button .col-sm-1 button { + font-size: 15px; + padding: 17px 35px; + border: none; + line-height: 16px; + outline: none !important; + box-shadow: none; + border-radius: 0px; + text-align: center; + background: #1a3443; + border-right: 1px solid #102029; + transition: .4s; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + -ms-border-radius: 0px; + -o-border-radius: 0px; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.header-action-button .col-sm-1 button:hover { + background: #152b38; +} + +.header-action-button .col-sm-1:first-child button { + border-radius: 15px 0 0 15px; + -webkit-border-radius: 15px 0 0 15px; + -moz-border-radius: 15px 0 0 15px; + -ms-border-radius: 15px 0 0 15px; + -o-border-radius: 15px 0 0 15px; +} + +.header-action-button .col-sm-1:last-child button { + border-radius: 0 15px 15px 0; + border-right: none; + -webkit-border-radius: 0 15px 15px 0; + -moz-border-radius: 0 15px 15px 0; + -ms-border-radius: 0 15px 15px 0; + -o-border-radius: 0 15px 15px 0; +} + +.header-action-button #delete-asset-button:hover { + color: #c21431; +} + +.form-horizontal { + margin-top: 30px; +} + +small { + font-size: 13px; + font-style: italic; + color: #a1a1a1; + line-height: 13px; + padding-top: 5px !important; + display: inline-block; +} + +.col-sm-4 .form-group { + display: block !important; + float: none !important; +} + +.col-sm-4 .form-group .control-label { + width: auto !important; + display: inline-block; + float: none !important; + text-align: left !important; + font-size: 16px; + line-height: 16px; + margin-bottom: 10px; + padding-top: 0; + color: #1a3443; +} + +.col-sm-4 .form-group input { + padding: 15px 15px !important; + height: auto; + border: 1px solid rgb(230, 230, 230); +} + +.col-sm-4 .form-group input:focus { + border-color: #f1a122; + box-shadow: 0 0 10px rgba(241, 161, 34, .2); +} + +.col-sm-4:first-child .form-group { + margin-top: 20px !important; +} + +.col-sm-4 .form-group .col-sm-6 { + width: auto !important; + display: block; + float: none !important; +} + +.col-sm-4 button[type="submit"] { + background: #1a3443 !important; + outline: none !important; + border: none; + padding: 12px 30px; + font-size: 15px; + margin-left: 0; + margin-left: -15px; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.col-sm-4 button[type="submit"]:hover { + background: #f1a122 !important; +} + + +.bk-canvas { + margin-top: 15px; +} + +@media (max-widt: 767px) { + .col-sm-4 button[type="submit"]:hover { + margin-bottom: 30px; + } + + .bk-canvas { + margin-bottom: 30px; + } +} + +.sensors-asset { + padding-top: 50px; +} + +.sensors-asset #DataTables_Table_0_wrapper { + margin-top: 30px; +} + +.sensors-asset #DataTables_Table_0_filter { + margin-bottom: 20px; +} + +.sensors-asset #DataTables_Table_0_filter input { + border: #e2e2e2 1px solid; + padding: 10px; + outline: none; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.sensors-asset #DataTables_Table_0_filter input:focus { + box-shadow: 0 0 10px rgba(0,0,0,.1); + border-color: #f1a122; +} + +.sensors-asset .dataTables_length select { + border: #e2e2e2 1px solid !important; + padding: 10px !important; + outline: none !important; + transition: .4s; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.sensors-asset .dataTables_length select:focus { + box-shadow: 0 0 10px rgba(0,0,0,.1); + border-color: #f1a122 !important; +} + +.sensors-asset td a { + padding: 10px 20px; + color: #FFF; + background: #1a3443; + white-space: nowrap; + line-height: 14px; + text-decoration: none; + transition: .4s; + border-radius: 6px; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + -ms-border-radius: 6px; + -o-border-radius: 6px; +} + +.sensors-asset td a:hover { + background: #f1a122; +} + +.sensors-asset td { + font-size: 14px; +} + +.sensors-asset .floatThead-wrapper { + margin-bottom: 10px; +} + +h1 { + font-size: 35px; + color: #1a3443; + margin-bottom: 0; + line-height: 35px; +} + +#analysischart { + margin-top: 40px; + overflow-x: auto; +} + +@media (min-width: 768px) { + h1 { + margin-bottom: 30px; + } +} + +#spinner { + padding-top: 50px !important; + padding-bottom: 50px !important; +} + +#actuatorschart { + margin-top: 40px; + margin-bottom: 100px; +} \ No newline at end of file diff --git a/flexmeasures/ui/templates/base.html b/flexmeasures/ui/templates/base.html index 335f5546c..e60857e8c 100644 --- a/flexmeasures/ui/templates/base.html +++ b/flexmeasures/ui/templates/base.html @@ -73,7 +73,7 @@ {% if menu_logo %} {% else %} - {{ FLEXMEASURES_PLATFORM_NAME }} {% if not "Error" in self.title() %} - {{ self.title() }} {% endif %} + flex-measures {% endif %} @@ -387,7 +387,7 @@

Icons from Flaticon {% endblock technical_info %}
- +
diff --git a/flexmeasures/ui/templates/crud/asset.html b/flexmeasures/ui/templates/crud/asset.html index 8e3204ae5..f9758a3f2 100644 --- a/flexmeasures/ui/templates/crud/asset.html +++ b/flexmeasures/ui/templates/crud/asset.html @@ -7,7 +7,7 @@ {% block divs %}
-
+
@@ -119,7 +119,7 @@

Location

-
+

All sensors for this asset

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html index af814a544..4e9af41bc 100644 --- a/flexmeasures/ui/templates/views/sensors.html +++ b/flexmeasures/ui/templates/views/sensors.html @@ -6,7 +6,7 @@ {% block divs %} -
+
From 5f6c626c478d7fd3c2a90409e497d05e3ed86bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20H=C3=B6ning?= Date: Sun, 1 May 2022 17:59:10 +0200 Subject: [PATCH 2/4] add changelog entry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Nicolas Höning --- documentation/changelog.rst | 1 + 1 file changed, 1 insertion(+) diff --git a/documentation/changelog.rst b/documentation/changelog.rst index 02cbf1fb0..c202113d3 100644 --- a/documentation/changelog.rst +++ b/documentation/changelog.rst @@ -8,6 +8,7 @@ v0.10.0 | April XX, 2022 New features ----------- +* New design for FlexMeasures' UI backoffice [see `PR #425 `_] * Improve legibility of chart axes [see `PR #413 `_] * API provides health readiness check at /api/v3_0/health/ready [see `PR #416 `_] From 59b83aa70cf934a8d565213462383228d7aa8c3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20H=C3=B6ning?= Date: Tue, 3 May 2022 01:00:54 +0200 Subject: [PATCH 3/4] define colors as vars; style login user(s) and new asset pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Nicolas Höning --- flexmeasures/ui/static/css/flexmeasures.css | 496 ++++++++++++++---- .../ui/templates/admin/forgot_password.html | 2 +- .../ui/templates/admin/logged_in_user.html | 11 +- .../ui/templates/admin/login_user.html | 2 +- .../ui/templates/admin/reset_password.html | 2 +- flexmeasures/ui/templates/crud/asset.html | 2 +- flexmeasures/ui/templates/crud/asset_new.html | 2 +- flexmeasures/ui/templates/views/sensors.html | 2 +- 8 files changed, 409 insertions(+), 110 deletions(-) diff --git a/flexmeasures/ui/static/css/flexmeasures.css b/flexmeasures/ui/static/css/flexmeasures.css index 9a8dcd6b7..d3ca2f557 100644 --- a/flexmeasures/ui/static/css/flexmeasures.css +++ b/flexmeasures/ui/static/css/flexmeasures.css @@ -1,3 +1,18 @@ +:root { + --primary-color: #1a3443; + --primary-border-color: #102029; + --primary-hover-color: #152b38; + --primary-transparent: rgba(26, 52, 67, .2); + --secondary-color: #f1a122; + --secondary-hover-color: #ff9d00; + --secondary-transparent: rgba(241, 161, 34, .2); + --white: #FFF; + --black: #000; + --light-gray: #eeeeee; + --gray: #bbb; + --red: #c21431; +} + @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); body { @@ -509,25 +524,24 @@ i.icon-wind:hover:before { .litepicker { font-size: 14px;} - -body *:not(.fa) { +body *:not(.fa, .glyphicon) { font-family: 'Poppins', sans-serif !important; } .navbar-default { - background-color: #1a3443; + background-color: var(--primary-color); border: none; z-index: 999991; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { - color: #FFF !important; - background-color: #f1a122 !important; + color: var(--white) !important; + background-color: var(--secondary-color) !important; } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { - background-color: #f1a122 !important; - color: #FFF !important; + background-color: var(--secondary-color) !important; + color: var(--white) !important; border: none; } @@ -536,7 +550,7 @@ body *:not(.fa) { } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { - color: #f1a122; + color: var(--secondary-color); background-color: transparent; transition: .4s; -webkit-transition: .4s; @@ -546,7 +560,7 @@ body *:not(.fa) { } .navbar-default .navbar-nav>li>a { - color: #FFF; + color: var(--white); font: 500 14px/14px 'Poppins'; } @@ -562,7 +576,7 @@ body *:not(.fa) { .navbar-brand a span { display: inline-block; - color: #f1a122 !important; + color: var(--secondary-color) !important; } .navbar-brand a span img { @@ -590,7 +604,7 @@ body *:not(.fa) { @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu>li>a { - color: #FFF; + color: var(--white); transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; @@ -599,22 +613,22 @@ body *:not(.fa) { } .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { - color: #f1a122; + color: var(--secondary-color); background-color: transparent; } } .page-footer { padding-top: 1px; - background: #1a3443; + background: var(--primary-color); } .footer { - color: #FFF!important; + color: var(--white)!important; } .footer a { - color: #f1a122; + color: var(--secondary-color); } .footer-logo { @@ -629,7 +643,7 @@ body *:not(.fa) { .floatThead-wrapper { margin-top: 50px; - margin-bottom: 50px; + margin-bottom: 20px; overflow-y: auto; box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 6px; @@ -645,7 +659,7 @@ body *:not(.fa) { .floatThead-wrapper .table>thead>tr>th { border-bottom: none !important; - color: #1a3443; + color: var(--primary-color); } @@ -653,7 +667,7 @@ body *:not(.fa) { padding: 15px !important; line-height: 1.42857143; vertical-align: top; - border-top: 1px solid #eeeeee ; + border-top: 1px solid var(--light-gray) ; } h3 { @@ -661,11 +675,11 @@ h3 { padding-top: 10px; font-size: 30px; font-weight: 600; - color: #1a3443; + color: var(--primary-color); } .navbar-default .navbar-collapse, .navbar-default .navbar-form { - border-color: #102029; + border-color: var(--primary-border-color); } .navbar-toggle { @@ -686,7 +700,7 @@ h3 { } .navbar-default .navbar-toggle .icon-bar { - background-color: #FFF; + background-color: var(--white); } #mapid { @@ -699,9 +713,9 @@ h3 { } .leaflet-bar a { - background-color: #1a3443; - border-bottom: #102029 1px solid !important; - color: #FFF; + background-color: var(--primary-color); + border-bottom: var(--primary-border-color) 1px solid !important; + color: var(--white); transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; @@ -714,18 +728,18 @@ h3 { } .leaflet-bar a:hover { - background-color: #152b38; - color: #FFF; + background-color: var(--primary-hover-color); + color: var(--white); } .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); - background: #1a3443; + background: var(--primary-color); border-radius: 5px; } .leaflet-control-layers-overlays label span { - color: #FFF; + color: var(--white); transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; @@ -734,13 +748,13 @@ h3 { } .leaflet-control-layers-overlays label span:hover { - color: #f1a122; + color: var(--secondary-color); } .leaflet-bar a.leaflet-disabled { cursor: default; - background-color: #152b38; - color: #bbb; + background-color: var(--primary-hover-color); + color: var(--gray); } .navbar-toggle { @@ -749,7 +763,7 @@ h3 { .modal { z-index: 999993 !important; - color: #1a3443; + color: var(--primary-color); } .modal-backdrop { @@ -757,7 +771,7 @@ h3 { } .close:focus, .close:hover { - color: #c21431; + color: var(--red); transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; @@ -768,8 +782,8 @@ h3 { #tzwarn { margin-top: 20px; margin-bottom: 20px; - background: rgba(241, 161, 34, .2); - color: #ff9d00; + background: var(--secondary-transparent); + color: var(--secondary-hover-color); border: none; } @@ -779,8 +793,8 @@ h3 { border-radius: 4px; border: 1px solid #ddd; font-size: 13px; - color: #f1a122; - background: #1a3443; + color: var(--white); + background: var(--primary-color); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; @@ -826,8 +840,8 @@ h3 { } .litepicker .container__days .day-item.is-today { - background: rgba(241, 161, 34, .2); - color: #f1a122; + background: var(--secondary-transparent); + color: var(--secondary-color); } .litepicker .container__days .day-item { @@ -855,14 +869,14 @@ h3 { .litepicker .container__days .day-item:hover { border: none; - background: rgba(26, 52, 67, .2); - color: #1a3443; + background: var(--primary-transparent); + color: var(--primary-color); } .litepicker .container__days .day-item.is-in-range { - background-color: rgba(26, 52, 67, .2); + background-color: var(--secondary-transparent); border-radius: 0; - color: #1a3443; + color: var(--primary-color); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; @@ -878,8 +892,8 @@ h3 { } .litepicker .container__days .day-item.is-end-date { - color: #f1a122; - background-color: #1a3443; + color: var(--primary-color); + background-color: var(--secondary-color); border-radius: 0 50% 50% 0; -webkit-border-radius: 0 50% 50% 0; -moz-border-radius: 0 50% 50% 0; @@ -888,8 +902,8 @@ h3 { } .litepicker .container__days .day-item.is-start-date { - color: #f1a122; - background-color: #1a3443; + color: var(--primary-color); + background-color: var(--secondary-color); border-radius: 50% 0 0 50%; -webkit-border-radius: 50% 0 0 50%; -moz-border-radius: 50% 0 0 50%; @@ -940,14 +954,14 @@ h3 { } .litepicker .container__months .month-item-header .button-next-month:hover>svg { - fill: #f1a122 !important; + fill: var(--secondary-color) !important; } .litepicker .container__months .month-item-header .button-previous-month:hover>svg { - fill: #f1a122 !important; + fill: var(--secondary-color) !important; } -.sensor-data .col-sm-12 { +.sensor-data .sensor-chart-main { padding: 0; } @@ -963,7 +977,7 @@ h3 { .role-title-text text { font-size: 20px; - fill: #1a3443; + fill: var(--primary-color); } .sensor-data .row { @@ -1002,18 +1016,19 @@ hr { display: flex; justify-content: flex-end; padding-right: 15px; + width: 100% !important; } -.header-action-button .col-sm-1 { +.header-action-button>div { width: auto !important; padding: 0; } -.header-action-button .col-sm-1 * { +.header-action-button>div * { float: none !important; } -.header-action-button .col-sm-1 button { +.header-action-button>div button { font-size: 15px; padding: 17px 35px; border: none; @@ -1022,8 +1037,8 @@ hr { box-shadow: none; border-radius: 0px; text-align: center; - background: #1a3443; - border-right: 1px solid #102029; + background: var(--primary-color); + border-right: 1px solid var(--primary-border-color) !important; transition: .4s; -webkit-border-radius: 0px; -moz-border-radius: 0px; @@ -1035,29 +1050,56 @@ hr { -o-transition: .4s; } -.header-action-button .col-sm-1 button:hover { - background: #152b38; +.header-action-button>div button:hover, .header-action-button>div button:focus { + background: var(--primary-hover-color) !important; + border-right: 1px solid var(--primary-border-color) !important; +} + +.header-action-button>div button { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } -.header-action-button .col-sm-1:first-child button { - border-radius: 15px 0 0 15px; - -webkit-border-radius: 15px 0 0 15px; - -moz-border-radius: 15px 0 0 15px; - -ms-border-radius: 15px 0 0 15px; - -o-border-radius: 15px 0 0 15px; +.header-action-button>div:first-child button { + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; } -.header-action-button .col-sm-1:last-child button { - border-radius: 0 15px 15px 0; +.header-action-button>div:last-child button { border-right: none; - -webkit-border-radius: 0 15px 15px 0; - -moz-border-radius: 0 15px 15px 0; - -ms-border-radius: 0 15px 15px 0; - -o-border-radius: 0 15px 15px 0; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; + } .header-action-button #delete-asset-button:hover { - color: #c21431; + color: var(--red); +} + +@media screen and (max-width: 767px) { + .header-action-button { + padding-left: 15px; + flex-direction: column; + align-items: center; + width: 100%; + } + + .header-action-button>div button { + margin-bottom: 15px; + border-radius: 15px !important; + -webkit-border-radius: 15px !important; + -moz-border-radius: 15px !important; + -ms-border-radius: 15px !important; + -o-border-radius: 15px !important; + } + + .header-action-button>div { + width: 100% !important; + padding-left: 15px; + padding-right: 15px; + } } .form-horizontal { @@ -1073,12 +1115,12 @@ small { display: inline-block; } -.col-sm-4 .form-group { +.asset-form .form-group { display: block !important; float: none !important; } -.col-sm-4 .form-group .control-label { +.asset-form .form-group .control-label { width: auto !important; display: inline-block; float: none !important; @@ -1087,38 +1129,38 @@ small { line-height: 16px; margin-bottom: 10px; padding-top: 0; - color: #1a3443; + color: var(--primary-color); } -.col-sm-4 .form-group input { +.asset-form .form-group input { padding: 15px 15px !important; height: auto; - border: 1px solid rgb(230, 230, 230); + border: 1px solid var(--light-gray); } -.col-sm-4 .form-group input:focus { - border-color: #f1a122; - box-shadow: 0 0 10px rgba(241, 161, 34, .2); +.asset-form .form-group input:focus { + border-color: var(--secondary-color); + box-shadow: 0 0 10px var(--secondary-transparent); } -.col-sm-4:first-child .form-group { +.asset-form:first-child .form-group { margin-top: 20px !important; } -.col-sm-4 .form-group .col-sm-6 { +.asset-form .form-group>div { width: auto !important; display: block; float: none !important; } -.col-sm-4 button[type="submit"] { - background: #1a3443 !important; +form button[type="submit"] { + background: var(--primary-color) !important; outline: none !important; border: none; padding: 12px 30px; font-size: 15px; margin-left: 0; - margin-left: -15px; + /* margin-left: -15px; */ transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; @@ -1126,8 +1168,8 @@ small { -o-transition: .4s; } -.col-sm-4 button[type="submit"]:hover { - background: #f1a122 !important; + .asset-form button[type="submit"]:hover { + background: var(--secondary-color) !important; } @@ -1135,16 +1177,26 @@ small { margin-top: 15px; } -@media (max-widt: 767px) { - .col-sm-4 button[type="submit"]:hover { +@media (max-width: 767px) { + .asset-form button[type="submit"] { margin-bottom: 30px; } - .bk-canvas { + .bk-plot-layout { margin-bottom: 30px; } } +@media screen and (max-width: 640px) { + .dataTables_wrapper .dataTables_filter { + float: right !important; + } + + .dataTables_wrapper .dataTables_length { + float: left !important; + } +} + .sensors-asset { padding-top: 50px; } @@ -1158,7 +1210,7 @@ small { } .sensors-asset #DataTables_Table_0_filter input { - border: #e2e2e2 1px solid; + border: var(--light-gray) 1px solid; padding: 10px; outline: none; transition: .4s; @@ -1170,11 +1222,11 @@ small { .sensors-asset #DataTables_Table_0_filter input:focus { box-shadow: 0 0 10px rgba(0,0,0,.1); - border-color: #f1a122; + border-color: var(--secondary-color); } .sensors-asset .dataTables_length select { - border: #e2e2e2 1px solid !important; + border: var(--light-gray) 1px solid !important; padding: 10px !important; outline: none !important; transition: .4s; @@ -1186,13 +1238,13 @@ small { .sensors-asset .dataTables_length select:focus { box-shadow: 0 0 10px rgba(0,0,0,.1); - border-color: #f1a122 !important; + border-color: var(--secondary-color) !important; } .sensors-asset td a { padding: 10px 20px; - color: #FFF; - background: #1a3443; + color: var(--white); + background: var(--primary-color); white-space: nowrap; line-height: 14px; text-decoration: none; @@ -1209,7 +1261,7 @@ small { } .sensors-asset td a:hover { - background: #f1a122; + background: var(--secondary-color); } .sensors-asset td { @@ -1217,12 +1269,12 @@ small { } .sensors-asset .floatThead-wrapper { - margin-bottom: 10px; + margin-bottom: 10px !important; } h1 { font-size: 35px; - color: #1a3443; + color: var(--primary-color); margin-bottom: 0; line-height: 35px; } @@ -1246,4 +1298,250 @@ h1 { #actuatorschart { margin-top: 40px; margin-bottom: 100px; -} \ No newline at end of file +} + +.user-overview { + padding-left: 15px; +} + +.user-action-button { + width: auto; + padding-right: 0 ; + margin-top: 20px; + margin-bottom: 0px; +} + +.user-action-button button { + border-radius: 50px; + transition: .4s; + -webkit-border-radius: 50px; + -moz-border-radius: 50px; + -ms-border-radius: 50px; + -o-border-radius: 50px; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.user-action-button button:hover { + background: var(--primary-hover-color) !important; +} + +.user-data-table { + margin-left: 0 !important; + margin-right: 0 !important; + margin-bottom: 30px; +} + +.user-data-table>div table { + box-shadow: 0 0 10px var(--primary-transparent); + border-radius: 6px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + -ms-border-radius: 6px; + -o-border-radius: 6px; +} + +.user-data-table>div table tr:nth-child(even) { + background: var(--light-gray); +} + +.user-data-table>div table tr td { + padding: 15px; + word-break: break-all; + border: none; +} + +.user-data-table>div table tr:first-child td { + border-top: none !important; +} + +@media screen and (max-width: 575.98px) { + + .user-action-button { + padding-right: 15px; + } + + .user-action-button button { + width: 100%; + } +} + +.dataTables_wrapper { + margin-bottom: 20px; +} + +.dataTables_wrapper .paginate_button { + outline: none; +} + +body .dataTables_wrapper .dataTables_paginate .paginate_button { + color: var(--secondary-color) !important; + border: none !important; + border-radius: 4px !important; + background: var(--primary-color); + transition: .3s; + -webkit-transition: .3s; + -moz-transition: .3s; + -ms-transition: .3s; + -o-transition: .3s; + -webkit-border-radius: 4px !important; + -moz-border-radius: 4px !important; + -ms-border-radius: 4px !important; + -o-border-radius: 4px !important; +} + +body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled, .current):hover { + background: var(--primary-hover-color) !important; + color: var(--secondary-color) !important; +} + +body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { + color: var(--light-gray) !important; + background: var(--gray) !important; + box-shadow: none; +} + +body .dataTables_wrapper .dataTables_paginate .paginate_button.current, body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { + color: var(--primary-hover-color) !important; + background: var(--primary-transparent); + box-shadow: none !important; +} + +.flashes.alert.alert-info { + background: var(--secondary-color); + border: none; + color: var(--white); + text-align: center; + margin-top: 20px; + text-transform: uppercase; + font-weight: 700; +} + +.login-form input:not([type="checkbox"], [type="submit"]), +.forgot-pwd-form input:not([type="checkbox"], [type="submit"]){ + width: 100%; + padding: 10px 15px; + border-radius: 4px; + outline: none !important; + border: 1px solid var(--light-gray); + transition: .4s; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.login-form input:not([type="checkbox"], [type="submit"]):focus, +.forgot-pwd-form input:not([type="checkbox"], [type="submit"]):focus{ + border: 1px solid var(--primary-border-color); +} + +.login-form input[type="submit"], +.forgot-pwd-form input[type="submit"]{ + padding: 13px 35px; + color: var(--white); + background: var(--primary-color); + border: none; + border-radius: 4px; + transition: .4s; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; +} + +.login-form input[type="submit"]:hover, +.forgot-pwd-form input[type="submit"]:hover { + background: var(--primary-hover-color); +} + +.login-form .btn-link, +.forgot-pwd-form .btn-link { + background: none !important; + color: var(--primary-color); + padding: 0; +} + +.carousel-inner img { + width: 100%; +} + +@media screen and (max-width: 767px) { + .login-form h1, + .forgot-pwd-form h1 { + margin-bottom: 20px; + } + + .carousel-container { + width: 100%; + height: auto; + overflow: hidden; + position: relative; + padding: 0; + border-radius: 10px; + overflow: hidden; + margin-top: 20px; + margin-bottom: 30px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; +} + + .carousel { + width: 100%; + position: relative; + left: 0; + margin-left: 0; + } +} + +.new-asset-form label { + color: var(--primary-color); +} + +.new-asset-form { + margin-bottom: 50px; +} + +.new-asset-form input, .new-asset-form select { + padding: 10px 15px !important; + height: auto !important; + box-shadow: none !important; + transition: .4s; + border-radius: 4px; + border: 1px solid var(--light-gray); + -webkit-transition: .4s; + -moz-transition: .4s; + -ms-transition: .4s; + -o-transition: .4s; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; +} + +.new-asset-form input:focus, .new-asset-form select:focus { + border: 1px solid var(--primary-border-color); +} + +.new-asset-form input[type="submit"] { + background: var(--primary-color); + border-radius: 4px; + color: var(--white); + padding: 12px 35px !important; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; +} diff --git a/flexmeasures/ui/templates/admin/forgot_password.html b/flexmeasures/ui/templates/admin/forgot_password.html index d56891a04..d5ee45e2b 100644 --- a/flexmeasures/ui/templates/admin/forgot_password.html +++ b/flexmeasures/ui/templates/admin/forgot_password.html @@ -10,7 +10,7 @@
-
+
{% include "security/_messages.html" %}

{{ _('Send password reset instructions') }}

diff --git a/flexmeasures/ui/templates/admin/logged_in_user.html b/flexmeasures/ui/templates/admin/logged_in_user.html index 31246fbb0..e74ab7a6c 100644 --- a/flexmeasures/ui/templates/admin/logged_in_user.html +++ b/flexmeasures/ui/templates/admin/logged_in_user.html @@ -7,29 +7,30 @@ {% block divs %} -

Overview for logged-in user: {{ logged_in_user.username }}

+

Overview for logged-in user: {{ logged_in_user.username }}

-
+
-
+
-
+
{% if user_is_admin %}
{% endif %}
+
-
+
diff --git a/flexmeasures/ui/templates/admin/login_user.html b/flexmeasures/ui/templates/admin/login_user.html index a419bfd5e..891a5541c 100644 --- a/flexmeasures/ui/templates/admin/login_user.html +++ b/flexmeasures/ui/templates/admin/login_user.html @@ -14,7 +14,7 @@
{% include "security/_messages.html" %}
-
+