Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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ł Gdula 2023-04-22 13:45:29 +00:00
parent ac2e73042e
commit e9e3706172
7 changed files with 103 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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>