make status display sticky for small screens

This commit is contained in:
codl 2017-08-12 08:29:58 +02:00
parent a4b87ae6b4
commit 578ffb750e
No known key found for this signature in database
GPG Key ID: 6CD7C8891ED1233A
2 changed files with 5 additions and 4 deletions

View File

@ -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());

View File

@ -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;
}