make status display sticky for small screens
This commit is contained in:
parent
a4b87ae6b4
commit
578ffb750e
|
@ -5,6 +5,7 @@
|
|||
|
||||
let status_timeout = null;
|
||||
|
||||
let settings_section = document.querySelector('#settings-section');
|
||||
let form = document.forms.settings;
|
||||
let backoff_level = 0
|
||||
|
||||
|
@ -59,7 +60,6 @@
|
|||
promise.then(fetch_counters).then(update_counters);
|
||||
|
||||
// remove server-rendered banner
|
||||
let settings_section = document.querySelector('#settings-section');
|
||||
let banner = settings_section.querySelector('.banner');
|
||||
if(banner){
|
||||
settings_section.removeChild(banner);
|
||||
|
@ -104,8 +104,7 @@
|
|||
|
||||
let status_display = document.createElement('span');
|
||||
status_display.classList.add('status-display', 'hidden');
|
||||
let settings_title = document.querySelector('#settings-title');
|
||||
settings_title.appendChild(status_display);
|
||||
settings_section.insertBefore(status_display, settings_section.childNodes[0]);
|
||||
|
||||
// silently send_settings in case the user changed settings while the page was loading
|
||||
send_settings(get_all_inputs());
|
||||
|
|
|
@ -134,6 +134,9 @@ footer a {
|
|||
margin-left: 1ch;
|
||||
padding: 0 0.4em;
|
||||
vertical-align: top;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.status-display.hidden {
|
||||
|
@ -145,7 +148,6 @@ footer a {
|
|||
}
|
||||
|
||||
.status-display.success {
|
||||
display: inline-block;
|
||||
background: #dec;
|
||||
animation: fade-background 2s forwards;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue