Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling user pages #448

Merged
merged 41 commits into from Jul 8, 2022
Merged

Styling user pages #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
76499dc
Show updated sensor data and annotations together
Flix6x Jun 20, 2022
51aff4e
Show spinner while fetching new data
Flix6x Jun 20, 2022
bf6c5c7
Switch from id-based styling to class-based styling
Flix6x Jun 20, 2022
9fd91f1
Move styling to css, and lower spinner
Flix6x Jun 20, 2022
546cb65
Simplify and streamline datepicker fontsize
Flix6x Jun 20, 2022
39e3cef
Streamline datepicker margins
Flix6x Jun 20, 2022
4dae1a0
Add margins and side panel activated on hover
Flix6x Jun 20, 2022
f64b6e5
Correct margins and padding of side panel to allow for custom ranges …
Flix6x Jun 20, 2022
cf13a78
Show single month
Flix6x Jun 20, 2022
6939384
Fewer custom ranges
Flix6x Jun 20, 2022
8fb6406
Side panel rounded similar to buttons rather than similar to cards
Flix6x Jun 20, 2022
1ccfcc9
Align box shadows of cards and calendar
Flix6x Jun 20, 2022
37521cc
Non-transparent cards
Flix6x Jun 20, 2022
48e36e9
Simplified padding notation
Flix6x Jun 20, 2022
5d3db6e
Move chart actions buttons away from the card's corner (negative margin)
Flix6x Jun 20, 2022
6384e24
Rotate y-axis labels to improve legibility
Flix6x Jun 20, 2022
c6478e1
Remove sensor chart title if the same information is already containe…
Flix6x Jun 20, 2022
97b2bc9
Move unit to right side of tooltip
Flix6x Jun 21, 2022
c8e5dd5
Style predefined datetime ranges
Flix6x Jun 21, 2022
a12acf6
Raise column to top without requiring flex display
Flix6x Jun 21, 2022
2208986
Rename sidepanel class and separate styling specific to the sidepanel…
Flix6x Jun 21, 2022
50fb0d5
Show spinner only while the promise is being fulfilled
Flix6x Jun 21, 2022
ff62e43
Cancel previous request when the user makes a new request
Flix6x Jun 21, 2022
2c9c0ad
Do not let spinner block the full page height, so the sensor table na…
Flix6x Jun 21, 2022
e266ba9
Change header and label colors inside the sidepanel to contrast again…
Flix6x Jun 21, 2022
fb3d9e0
Style navbar logo to have a consistent height and adjust the width of…
Flix6x Jun 22, 2022
20726b2
Actually load intended font
Flix6x Jun 22, 2022
e650208
Enforce separation of time axis labels
Flix6x Jun 22, 2022
0fe334e
Add return type annotation and docs: applying chart defaults returns …
Flix6x Jun 22, 2022
b25d23d
Resolve hover glitch when exiting either the list of months or the li…
Flix6x Jun 23, 2022
1370f86
Enable swiping for left sidepanel
Flix6x Jun 23, 2022
9d8d627
Stop using redundant litepicker plugin, which was messing with calend…
Flix6x Jun 23, 2022
d21cf3f
Fix test
Flix6x Jun 20, 2022
a6c1c9b
Changelog entry
Flix6x Jun 23, 2022
241ef02
Synchronize styling of user pages
Flix6x Jun 23, 2022
7aaef2b
Style header action buttons
Flix6x Jun 23, 2022
be45711
Fix test
Flix6x Jun 23, 2022
823afa7
Merge branch 'main' into styling-user-pages
Flix6x Jun 25, 2022
1fb7076
Amend changelog entry
Flix6x Jun 25, 2022
7f91114
Set minimum sidepanel height
Flix6x Jul 1, 2022
9ea248c
Merge remote-tracking branch 'origin/main' into styling-user-pages
Flix6x Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion documentation/changelog.rst
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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