aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGravatar Leon Sandøy <[email protected]>2018-04-10 19:39:29 +0200
committerGravatar Leon Sandøy <[email protected]>2018-04-10 19:39:29 +0200
commitdd6835dfd6a7f8fb6baea76a0cddd8289e43130f (patch)
treee433366cf41977d0a9aa554721a649a15cfb355d
parentForces the sidebar and the rest of that container div to fill the page (diff)
Flash of Unstyled Content fix
-rw-r--r--static/js/fouc.js36
-rw-r--r--static/style.css11
-rw-r--r--templates/main/base.html9
-rw-r--r--templates/main/navigation.html2
-rw-r--r--templates/wiki/base.html8
5 files changed, 63 insertions, 3 deletions
diff --git a/static/js/fouc.js b/static/js/fouc.js
new file mode 100644
index 00000000..190e8d37
--- /dev/null
+++ b/static/js/fouc.js
@@ -0,0 +1,36 @@
+function getScript(url, integrity, crossorigin){
+ var script = document.createElement("script")
+ script.type = "text/javascript";
+ script.src = url;
+ script.defer = true;
+ script.integrity = integrity;
+ script.crossOrigin = crossorigin;
+ document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+function setClass(selector, myClass) {
+ element = document.querySelector(selector);
+ console.log(element)
+ element.className = myClass;
+}
+
+function removeClass(selector, myClass) {
+ element = document.querySelector(selector);
+ var reg = new RegExp('(^| )'+myClass+'($| )','g');
+ element.className = element.className.replace(reg,' ');
+}
+
+// hide the html when the page loads, but only if js is turned on.
+setClass('html', 'prevent_fouc');
+
+// when the DOM has finished loading, unhide the html
+document.onreadystatechange = function () {
+ if (document.readyState == "interactive") {
+ removeClass('html', 'prevent_fouc');
+ getScript(
+ 'https://pro.fontawesome.com/releases/v5.0.9/js/all.js',
+ 'sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4',
+ 'anonymous'
+ )
+ }
+} \ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 9900a817..5c63f106 100644
--- a/static/style.css
+++ b/static/style.css
@@ -107,4 +107,15 @@ footer div.uk-section div.uk-text-center {
.uk-button-darkish:hover {
background: rgba(0, 0, 0, 0.22);
+}
+
+/* Flash of Unstyled Content fixes */
+.prevent_fouc {
+ display: none;
+}
+
+div.navbar-padding {
+ padding-left: 40px;
+ padding-right: 40px;
+ box-sizing: content-box;
} \ No newline at end of file
diff --git a/templates/main/base.html b/templates/main/base.html
index edd79fb5..cbdd937b 100644
--- a/templates/main/base.html
+++ b/templates/main/base.html
@@ -5,8 +5,15 @@
<title>Python Discord | {% block title %}{% endblock %}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script>
+
+ <!-- Prevent Flash of Unstyled Content -->
+ <script src="{{ static_file('js/fouc.js') }}"></script>
+
+ <!-- Other JS loads -->
+<!-- <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script>
+
+ <!-- Stylesheets -->
<link rel="shortcut icon" href="{{ static_file('favicon.ico') }}">
<link rel="stylesheet" href="{{ static_file('uikit_blurple.css') }}"/>
<link rel="stylesheet" href="{{ static_file('style.css') }}"/>
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index 47c20d56..5dc78cc6 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -3,7 +3,7 @@
margin-left: -20px;
}
</style>
-<div class="uk-container uk-container-expand uk-background-secondary uk-light" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
+<div class="navbar-padding uk-background-secondary uk-light" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; animation: uk-animation-slide-top; top: 400; bottom: #animation">
<nav data-uk-navbar class="uk-navbar-container uk-navbar-transparent" uk-navbar="boundary-align: true">
<div class="uk-navbar-left uk-padding-remove-left">
<a href="{{ url_for('main.index') }}" class="uk-navbar-item uk-logo uk-padding-remove-left">
diff --git a/templates/wiki/base.html b/templates/wiki/base.html
index 4dce58d6..02ab1b55 100644
--- a/templates/wiki/base.html
+++ b/templates/wiki/base.html
@@ -5,8 +5,14 @@
<title>Python Discord | {% block title %}{% endblock %}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <script defer src="https://pro.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4" crossorigin="anonymous"></script>
+
+ <!-- Prevent Flash of Unstyled Content -->
+ <script src="{{ static_file('js/fouc.js') }}"></script>
+
+ <!-- Other JS loads -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script>
+
+ <!-- Static stuff -->
<link rel="shortcut icon" href="{{ static_file('favicon.ico') }}">
<link rel="stylesheet" href="{{ static_file('uikit_blurple.css') }}"/>
<link rel="stylesheet" href="{{ static_file('style.css') }}"/>