gui: Add warning when JavaScript is disabled in Web browser (fixes #7099) (#7102)

When using a Web browser with JavaScript either disabled or unavailable,
show a warning to let the user know that the Web GUI requires JS in
order to operate.

To achieve this, add a <div> that wraps both the navbar and the main
content, and then move the CSS class ng-cloak from the <html> element to
that <div>. This way, only the JavaScript-dependent part is hidden when
JS is unavailable, and not the whole website, as it is the case right
now. Then, add a <noscript> element right at the start of the <body>
element, so that the warning is also shown right away in text-based Web
browsers. The <noscript> element includes a stripped down version of the
navbar showing only the Syncthing logo, and then a container with the
warning itself. Lastly, leave the footer untouched and always visible,
because it does not rely on JavaScript at all.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
Co-authored-by: Jakob Borg <jakob@kastelo.net>
This commit is contained in:
Tomasz Wilczyński 2020-11-09 17:15:22 +09:00 committed by GitHub
parent 1f1729ba43
commit 0fb7cc186c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 727 additions and 692 deletions

View File

@ -21,7 +21,7 @@ ul+h5 {
margin-top: 1.5em;
}
#content {
.content {
margin-bottom: 50px;
}

File diff suppressed because it is too large Load Diff