nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-08-26 12:46:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

upgrades: Use bootstrap spinner button instead of custom styling

Browse Source 
- This simplifies the implementation and gets it ready for dark/light mode.

Tests:

- In the upgrades main view, set is_busy = True and disable setting
refresh_page_sec. Load the upgrades app and notice that the 'Updating...' button
is showing proper styling in light anddark modes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2025-11-29 10:20:09 +05:30 committed by James Valleroy
parent 00a69108dd
commit 6c930a9f24
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 4 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
plinth/modules/upgrades/templates/upgrades_configure.html
View File

@ -104,10 +104,10 @@
<h3>{% trans "Manual Update" %}</h3> <h3>{% trans "Manual Update" %}</h3>
{% if is_busy %} {% if is_busy %}
<div class="btn-toolbar"> <div class="btn-toolbar">
<button type="button" disabled="disabled" <button type="button" class="btn btn-default" disabled="disabled">
class="running-status-parent btn btn-default" > <span class="spinner-border spinner-border-sm" aria-hidden="true">
<span class="running-status loading"></span> </span>
{% trans "Updating..." %} <span role="status">{% trans "Updating..." %}</span>
</button> </button>
</div> </div>
{% else %} {% else %}

22
static/themes/default/css/main.css
View File

@ -228,28 +228,6 @@ body {
vertical-align: middle; vertical-align: middle;
} }
.running-status-parent {
display: inline-block;
}
.running-status {
border-radius: 50%;
border: 1px solid black;
width: 0.5rem;
height: 0.5rem;
display: inline-block;
}
.running-status.loading {
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
border-radius: 50%;
width: 1rem;
height: 1rem;
display: inline-block;
animation: spin 1s linear infinite;
}
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);