Skip to content

Commit

Permalink
Styling user pages (#448)
Browse files Browse the repository at this point in the history 
Streamline the styling of user pages and action buttons.


* Show updated sensor data and annotations together

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Show spinner while fetching new data

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Switch from id-based styling to class-based styling

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Move styling to css, and lower spinner

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Simplify and streamline datepicker fontsize

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Streamline datepicker margins

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Add margins and side panel activated on hover

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Correct margins and padding of side panel to allow for custom ranges at the bottom of the calendar

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Show single month

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Fewer custom ranges

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Side panel rounded similar to buttons rather than similar to cards

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Align box shadows of cards and calendar

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Non-transparent cards

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Simplified padding notation

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Move chart actions buttons away from the card's corner (negative margin)

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Rotate y-axis labels to improve legibility

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Remove sensor chart title if the same information is already contained in the y-axis label

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Move unit to right side of tooltip

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Style predefined datetime ranges

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Raise column to top without requiring flex display

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Rename sidepanel class and separate styling specific to the sidepanel being on the left

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Show spinner only while the promise is being fulfilled

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Cancel previous request when the user makes a new request

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Do not let spinner block the full page height, so the sensor table navigation can still be used

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Change header and label colors inside the sidepanel to contrast against the sidepanel background

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Style navbar logo to have a consistent height and adjust the width of the navbar-header accordingly

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Actually load intended font

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Enforce separation of time axis labels

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Add return type annotation and docs: applying chart defaults returns a dictionary with vega-lite specs

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Resolve hover glitch when exiting either the list of months or the list of years with the pointer. This stops the side panel from collapsing and reopening.

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Enable swiping for left sidepanel

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Stop using redundant litepicker plugin, which was messing with calendar styling

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Fix test

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Changelog entry

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Synchronize styling of user pages

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Style header action buttons

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Fix test

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Amend changelog entry

Signed-off-by: F.N. Claessen <felix@seita.nl>

* Set minimum sidepanel height

Signed-off-by: F.N. Claessen <felix@seita.nl>
  • Loading branch information
@Flix6x
Flix6x committed Jul 8, 2022
1 parent 1acd3f4 commit dc554a1
Show file tree
Hide file tree
Showing 6 changed files with 229 additions and 274 deletions.
2 changes: 1 addition & 1 deletion documentation/changelog.rst
View file
Expand Up @@ -8,7 +8,7 @@ v0.11.0 | June XX, 2022
New features
-------------
* Individual sensor charts show available annotations [see `PR #428 <http://www.github.com/FlexMeasures/flexmeasures/pull/428>`_]
* Collapsible sidepanel (hover/swipe) used for date selection on sensor charts, and various styling improvements [see `PR #447 <http://www.github.com/FlexMeasures/flexmeasures/pull/447>`_]
* Collapsible sidepanel (hover/swipe) used for date selection on sensor charts, and various styling improvements [see `PR #447 <http://www.github.com/FlexMeasures/flexmeasures/pull/447>`_ and `PR #448 <http://www.github.com/FlexMeasures/flexmeasures/pull/448>`_]
* Switched from 12-hour AM/PM to 24-hour clock notation for time series chart axis labels [see `PR #446 <http://www.github.com/FlexMeasures/flexmeasures/pull/446>`_]

Bugfixes
Expand Down
48 changes: 6 additions & 42 deletions flexmeasures/ui/static/css/flexmeasures.css
View file
Expand Up @@ -923,6 +923,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
width: calc(var(--litepicker-day-width) * 9);
margin: 15px;
padding: 20px 15px;
min-height: 60px; // line-height + padding-top + padding-bottom
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
Expand Down Expand Up @@ -1178,14 +1179,15 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
/* ---- Header action button ---- */

.header-action-button {
padding-top: 30px;
padding-top: 5px;
display: flex;
justify-content: flex-end;
padding-right: 15px;
justify-content: space-around;

width: 100% !important;
}

.header-action-button>div {
flex: 1 1 auto;
width: auto !important;
padding: 0;
}
Expand All @@ -1196,7 +1198,7 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {

.header-action-button>div button {
font-size: 15px;
padding: 17px 35px;
padding: 15px 30px;
border: none;
line-height: 16px;
outline: none !important;
Expand All @@ -1218,7 +1220,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {

.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 {
Expand All @@ -1237,7 +1238,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
border-right: none;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;

}

.create-button:hover {
Expand Down Expand Up @@ -1267,7 +1267,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
.header-action-button>div {
width: 100% !important;
padding-left: 15px;
padding-right: 15px;
}
}

Expand Down Expand Up @@ -1523,41 +1522,6 @@ body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
/* ---- End User Action Button ---- */


/* ---- Users Page ---- */

.user-data-table {
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 30px;
}

.user-data-table>div table {
margin-top: 30px !important;
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;
}

/* ---- End Users Page ---- */


/* ---- Login / Reset PWD forms ---- */

.login-form input:not([type="checkbox"], [type="submit"]),
Expand Down
168 changes: 82 additions & 86 deletions flexmeasures/ui/templates/admin/logged_in_user.html
View file
Expand Up @@ -7,94 +7,90 @@
{% block divs %}

<div class="container-fluid">
<div class="row header-action-button">
<div class="user-action-button col-sm-1">
<form action="/logout" method="get">
<button class="btn btn-sm btn-responsive btn-info" type="submit">Log out</button>
</form>
<div class="row">
<div class="col-sm-2 on-top-md">
<div class="header-action-button">
<div class="user-action-button">
<form action="/logout" method="get">
<button class="btn btn-sm btn-responsive btn-info" type="submit">Log out</button>
</form>
</div>
<div class="user-action-button">
<form action="/users/reset_password_for/{{ logged_in_user.id }}" method="get">
<button class="btn btn-sm btn-responsive btn-info delete-button" type="submit" title="Reset the password and send instructions how to choose a new one.">Reset password</button>
</form>
</div>
</div>
</div>
<div class="user-action-button col-sm-2">
<form action="/users/reset_password_for/{{ logged_in_user.id }}" method="get">
<button class="btn btn-sm btn-responsive btn-info" type="submit">Send password reset instructions</button>
</form>
</div>
<div class="user-action-button col-sm-9">
{% if user_is_admin %}
<form action="/users" method="get">
<button class="btn btn-sm btn-responsive btn-info" type="submit">List active users</button>
</form>
{% endif %}
</div>
</div>


<div class="user-data-table row">
<div class="col-sm-12">
<h3 class="user-overview">User overview</h3>
<small>Logged-in user: {{ logged_in_user.username }}</small>
<table class="table">
<tbody>
<tr>
<td>
Email address
</td>
<td>
{{logged_in_user.email }}
</td>
</tr>
<tr>
<td>
Account
</td>
<td>
{{ logged_in_user.account.name }}
</td>
</tr>
<tr>
<td>
Assets in account
</td>
<td>
<a href="/assets">{{ num_assets }}</a>
</td>
</tr>
<tr>
<td>
Time Zone
</td>
<td>
{{logged_in_user.timezone }}
</td>
</tr>
<tr>
<td>
Last login was
</td>
<td>
{{ logged_in_user.last_login_at | localized_datetime }}
</td>
</tr>
<tr>
<td>
Roles
</td>
<td>
{{ roles }}
</td>
</tr>
{% if not user_is_anonymous %}
<tr>
<td>
Fresh access token
</td>
<td>
{{ logged_in_user.get_auth_token() }}
</td>
</tr>
{% endif %}
</tbody>
</table>
<div class="col-sm-8">
<div class="user-data-table card">
<h2>User overview</h2>
<small>Logged-in user: {{ logged_in_user.username }}</small>
<table class="table table-striped table-responsive">
<tbody>
<tr>
<td>
Email address
</td>
<td>
{{logged_in_user.email }}
</td>
</tr>
<tr>
<td>
Account
</td>
<td>
{{ logged_in_user.account.name }}
</td>
</tr>
<tr>
<td>
Assets in account
</td>
<td>
<a href="/assets">{{ num_assets }}</a>
</td>
</tr>
<tr>
<td>
Time Zone
</td>
<td>
{{logged_in_user.timezone }}
</td>
</tr>
<tr>
<td>
Last login was
</td>
<td>
{{ logged_in_user.last_login_at | localized_datetime }}
</td>
</tr>
<tr>
<td>
Roles
</td>
<td>
{{ roles }}
</td>
</tr>
{% if not user_is_anonymous %}
<tr>
<td>
Fresh access token
</td>
<td>
{{ logged_in_user.get_auth_token() }}
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>

Expand Down

0 comments on commit dc554a1

Please sign in to comment.