From e9e37061728e9f0d40e048bdf083bc607454944f Mon Sep 17 00:00:00 2001 From: Fluffy-Bean <michal-gdula@protonmail.com> Date: Sat, 22 Apr 2023 13:45:29 +0000 Subject: [PATCH] Move JS to layout HTML for faster loading Keep images square through JS and not a bug with ::after --- onlylegs/__init__.py | 2 +- onlylegs/config.py | 4 + onlylegs/static/js/fade.js | 11 +++ onlylegs/static/js/index.js | 72 ------------------ onlylegs/static/js/square.js | 11 +++ onlylegs/static/sass/components/gallery.sass | 23 +----- onlylegs/templates/layout.html | 79 ++++++++++++++++++-- 7 files changed, 103 insertions(+), 99 deletions(-) create mode 100644 onlylegs/static/js/fade.js delete mode 100644 onlylegs/static/js/index.js create mode 100644 onlylegs/static/js/square.js diff --git a/onlylegs/__init__.py b/onlylegs/__init__.py index e15e3e1..5c5f33f 100644 --- a/onlylegs/__init__.py +++ b/onlylegs/__init__.py @@ -101,7 +101,7 @@ def create_app(): # pylint: disable=R0914 assets.init_app(app) scripts = Bundle( - "js/*.js", output="gen/js.js", depends="js/*.js" + "js/*.js", filters="jsmin", output="gen/js.js", depends="js/*.js" ) # filter jsmin is broken :c styles = Bundle( "sass/style.sass", diff --git a/onlylegs/config.py b/onlylegs/config.py index 58e7a80..edcd808 100644 --- a/onlylegs/config.py +++ b/onlylegs/config.py @@ -3,6 +3,7 @@ Gallery configuration file """ import os import platformdirs +import importlib.metadata from dotenv import load_dotenv from yaml import safe_load @@ -41,3 +42,6 @@ MEDIA_FOLDER = os.path.join(user_dir, "media") # Database INSTANCE_DIR = instance_dir MIGRATIONS_DIR = os.path.join(INSTANCE_DIR, "migrations") + +# App +APP_VERSION = importlib.metadata.version("OnlyLegs") \ No newline at end of file diff --git a/onlylegs/static/js/fade.js b/onlylegs/static/js/fade.js new file mode 100644 index 0000000..56749ba --- /dev/null +++ b/onlylegs/static/js/fade.js @@ -0,0 +1,11 @@ +// fade in images +function imgFade(obj, time = 200) { + setTimeout(() => { + obj.style.animation = `imgFadeIn ${time}ms`; + + setTimeout(() => { + obj.style.opacity = null; + obj.style.animation = null; + }, time); + }, 1); +} diff --git a/onlylegs/static/js/index.js b/onlylegs/static/js/index.js deleted file mode 100644 index 8817bf2..0000000 --- a/onlylegs/static/js/index.js +++ /dev/null @@ -1,72 +0,0 @@ -// fade in images -function imgFade(obj, time = 200) { - obj.style.opacity = null; - obj.style.animation = `imgFadeIn ${time}ms`; - - setTimeout(() => { obj.style.animation = null; }, time); -} - -window.onload = function () { - const times = document.querySelectorAll('.time'); - for (let i = 0; i < times.length; i++) { - // Remove milliseconds - const raw = times[i].innerHTML.split('.')[0]; - - // Parse YYYY-MM-DD HH:MM:SS to Date object - const time = raw.split(' ')[1]; - const date = raw.split(' ')[0].split('-'); - - // Format to YYYY/MM/DD HH:MM:SS and convert to UTC Date object - const dateTime = new Date(`${date[0]}/${date[1]}/${date[2]} ${time} UTC`); - - // Convert to local time - times[i].innerHTML = `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`; - } - - // Top Of Page button - const topOfPage = document.querySelector('.top-of-page'); - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { - topOfPage.classList.add('show'); - } else { - topOfPage.classList.remove('show'); - } - topOfPage.onclick = function () { - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; - } - - // Info button - const infoButton = document.querySelector('.info-button'); - if (infoButton) { - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { - infoButton.classList.remove('show'); - } else { - infoButton.classList.add('show'); - } - infoButton.onclick = function () { - popUpShow('OnlyLegs', - '<a href="https://github.com/Fluffy-Bean/onlylegs">v0.1.4</a> ' + - 'using <a href="https://phosphoricons.com/">Phosphoricons</a> and Flask.' + - '<br>Made by Fluffy and others with ❤️'); - } - } -}; -window.onscroll = function () { - // Top Of Page button - const topOfPage = document.querySelector('.top-of-page'); - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { - topOfPage.classList.add('show'); - } else { - topOfPage.classList.remove('show'); - } - - // Info button - const infoButton = document.querySelector('.info-button'); - if (infoButton) { - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { - infoButton.classList.remove('show'); - } else { - infoButton.classList.add('show'); - } - } -}; diff --git a/onlylegs/static/js/square.js b/onlylegs/static/js/square.js new file mode 100644 index 0000000..83e0482 --- /dev/null +++ b/onlylegs/static/js/square.js @@ -0,0 +1,11 @@ +function keepSquare() { + const images = document.querySelectorAll('.gallery-item'); + for (let i = 0; i < images.length; i++) { + images[i].style.height = images[i].offsetWidth + 'px'; + } + + const groups = document.querySelectorAll('.group-item'); + for (let i = 0; i < groups.length; i++) { + groups[i].style.height = groups[i].offsetWidth + 'px'; + } +} \ No newline at end of file diff --git a/onlylegs/static/sass/components/gallery.sass b/onlylegs/static/sass/components/gallery.sass index cd33fdd..05f2c66 100644 --- a/onlylegs/static/sass/components/gallery.sass +++ b/onlylegs/static/sass/components/gallery.sass @@ -24,8 +24,6 @@ margin: 0.35rem padding: 0 - height: auto - position: relative border-radius: $rad-inner @@ -44,8 +42,7 @@ height: auto position: absolute - left: 0 - bottom: 0 + inset: 0 display: flex flex-direction: column @@ -88,12 +85,6 @@ object-position: center background-color: RGB($bg-bright) - transition: all 0.2s cubic-bezier(.79, .14, .15, .86) - - &:after - content: "" - display: block - padding-bottom: 100% &:hover box-shadow: 0 0.2rem 0.4rem 0.1rem RGBA($bg-100, 0.6) @@ -105,8 +96,6 @@ margin: 0.35rem padding: 0 - height: auto - position: relative border-radius: $rad-inner @@ -171,8 +160,7 @@ height: 100% position: absolute - top: 0 - left: 0 + inset: 0 object-fit: cover object-position: center @@ -181,7 +169,7 @@ border-radius: $rad-inner box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1) - transition: all 0.2s cubic-bezier(.79, .14, .15, .86) + transition: transform 0.2s cubic-bezier(.79, .14, .15, .86) &.size-1 .data-1 @@ -206,11 +194,6 @@ transform: scale(0.6) rotate(-1deg) translate(-15%, -23%) z-index: +1 - &:after - content: "" - display: block - padding-bottom: 100% - &:hover .images &.size-1 diff --git a/onlylegs/templates/layout.html b/onlylegs/templates/layout.html index f5f1a36..2cd9ecb 100644 --- a/onlylegs/templates/layout.html +++ b/onlylegs/templates/layout.html @@ -66,18 +66,18 @@ <div class="navigation"> <!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">--> - <a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}"> + <a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page"> <i class="ph-fill ph-images-square"></i> <span class="tool-tip">Home<i class="ph-fill ph-caret-left"></i></span> </a> - <a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}"> + <a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups"> <i class="ph-fill ph-package"></i> <span class="tool-tip">Groups<i class="ph-fill ph-caret-left"></i></span> </a> {% if current_user.is_authenticated %} - <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()"> + <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo"> <i class="ph-fill ph-upload"></i> <span class="tool-tip">Upload<i class="ph-fill ph-caret-left"></i></span> </button> @@ -86,7 +86,7 @@ <span class="navigation-spacer"></span> {% if current_user.is_authenticated %} - <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}"> + <a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page"> {% if current_user.picture %} <span class="nav-pfp"> <picture> @@ -106,12 +106,12 @@ <span class="tool-tip">Profile<i class="ph-fill ph-caret-left"></i></span> </a> - <a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}"> + <a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings"> <i class="ph-fill ph-gear-fine"></i> <span class="tool-tip">Settings<i class="ph-fill ph-caret-left"></i></span> </a> {% else %} - <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()"> + <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login"> <i class="ph-fill ph-sign-in"></i> <span class="tool-tip">Login<i class="ph-fill ph-caret-left"></i></span> </button> @@ -156,5 +156,72 @@ </script> {% block script %}{% endblock %} + + <script type="text/javascript"> + keepSquare(); + + const times = document.querySelectorAll('.time'); + for (let i = 0; i < times.length; i++) { + // Remove milliseconds + const raw = times[i].innerHTML.split('.')[0]; + + // Parse YYYY-MM-DD HH:MM:SS to Date object + const time = raw.split(' ')[1]; + const date = raw.split(' ')[0].split('-'); + + // Format to YYYY/MM/DD HH:MM:SS and convert to UTC Date object + const dateTime = new Date(`${date[0]}/${date[1]}/${date[2]} ${time} UTC`); + + // Convert to local time + times[i].innerHTML = `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`; + } + + // Top Of Page button + const topOfPage = document.querySelector('.top-of-page'); + if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { + topOfPage.classList.add('show'); + } else { + topOfPage.classList.remove('show'); + } + topOfPage.onclick = () => { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; + } + + // Info button + const infoButton = document.querySelector('.info-button'); + if (infoButton) { + if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { + infoButton.classList.remove('show'); + } else { + infoButton.classList.add('show'); + } + infoButton.onclick = () => { + popUpShow('OnlyLegs', + '<a href="https://github.com/Fluffy-Bean/onlylegs">v{{ config['APP_VERSION'] }}</a> ' + + 'using <a href="https://phosphoricons.com/">Phosphoricons</a> and Flask.' + + '<br>Made by Fluffy and others with ❤️'); + } + } + + window.onresize = () => { + keepSquare(); + } + window.onscroll = () => { + if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { + topOfPage.classList.add('show'); + } else { + topOfPage.classList.remove('show'); + } + + if (infoButton) { + if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { + infoButton.classList.remove('show'); + } else { + infoButton.classList.add('show'); + } + } + } + </script> </body> </html> \ No newline at end of file