failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-01-29 01:28:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move JS to layout HTML for faster loading

Browse source 
Keep images square through JS and not a bug with ::after
This commit is contained in:
Michał 2023-04-22 13:45:29 +00:00
parent ac2e73042e
commit e9e3706172
7 changed files with 103 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
onlylegs/__init__.py
View file

@ -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",

4
onlylegs/config.py
View file

@ -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")

11
onlylegs/static/js/fade.js Normal file
View file

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

72
onlylegs/static/js/index.js
View file

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

11
onlylegs/static/js/square.js Normal file
View file

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

23
onlylegs/static/sass/components/gallery.sass
View file

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

79
onlylegs/templates/layout.html
View file

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