Updated disabled JS warning

Moved <style> tag from <noscript> tag into <head> tag.

Auto-redirect visitors with JS disabled to either No-JS uploader or
No-JS version of album pages after 3 seconds.

Those changes can be found in a new NJK file at the location below:
views/_partial/noscript-refresh.njk

Made the warning a lot more concise.
This commit is contained in:
Bobby Wibowo 2020-04-24 01:18:25 +07:00
parent f1cceca563
commit 12516032e1
No known key found for this signature in database
GPG Key ID: 51C3A1E1E22D26CF
6 changed files with 36 additions and 13 deletions

View File

@ -0,0 +1,10 @@
{#
To conform with standard, put <noscript> for <meta http-equiv> inside <head>.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
And may as well put <style> tag here, just in case.
#}
<noscript>
<style>body > section:not(#noscript) { display: none !important; }</style>
<!-- Redirect after 3 seconds -->
<meta http-equiv="refresh" content="3;url=nojs">
</noscript>

View File

@ -1,17 +1,9 @@
{#
I thought of making a redirect with http-equiv="refresh", but it's too quick that people
barely have any time to read the message which explains why the redirect is necessary.
So yeah, I decided to stick with making people click on the link which leads to
the No-JS uploader, if they really want to use the service.
#}
<noscript>
<style>body > section:not(#noscript) { display: none !important; }</style>
<section id="noscript" class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p>You have JavaScript disabled, but this page requires JavaScript to function.</p>
<p>Please <a href="nojs">click here</a> if you want to try out our No-JS uploader.</p>
<p>This page requires JavaScript to function.</p>
<p>If you are not redirected to the No-JS uploader, please <a href="nojs">click here</a>.</p>
</div>
</div>
</section>

View File

@ -29,6 +29,16 @@
{% endif %}
{% endblock %}
{% block endmeta %}
{% if not nojs -%}
<noscript>
<style>body > section:not(#noscript) { display: none !important; }</style>
<!-- Redirect after 3 seconds -->
<meta http-equiv="refresh" content="3;url=../{{ album.url }}?nojs">
</noscript>
{%- endif %}
{% endblock %}
{% block content %}
{{ super() }}
<section class="section">
@ -116,12 +126,11 @@
{% if not nojs -%}
<noscript>
<style>body > section:not(#noscript) { display: none !important; }</style>
<section id="noscript" class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p>You have JavaScript disabled, but this page requires JavaScript to function.</p>
<p>Please <a href="../{{ album.url }}?nojs">click here</a> if you want to view its No-JS version.</p>
<p>This page requires JavaScript to function.</p>
<p>If you are not redirected to its No-JS version, please <a href="../{{ album.url }}?nojs">click here</a>.</p>
</div>
</div>
</section>

View File

@ -16,6 +16,10 @@
<script src="js/auth.js{{ versions[1] }}"></script>
{% endblock %}
{% block endmeta %}
{% include "_partial/noscript-refresh.njk" %}
{% endblock %}
{% block content %}
{{ super() }}
<section id="login" class="hero is-fullheight is-hidden">

View File

@ -23,6 +23,10 @@
<script src="js/misc/utils.js{{ versions[1] }}"></script>
{% endblock %}
{% block endmeta %}
{% include "_partial/noscript-refresh.njk" %}
{% endblock %}
{% block content %}
{{ super() }}
<section id="dashboard" class="section is-hidden">

View File

@ -28,6 +28,10 @@
<script id="renderScript" data-version="{{ versions[4] }}" src="js/misc/render.js{{ versions[1] }}"></script>
{% endblock %}
{% block endmeta %}
{% include "_partial/noscript-refresh.njk" %}
{% endblock %}
{% block content %}
{{ super() }}
<section id="home" class="hero is-fullheight">