Moved some scripts to a utils folder

Renamed upload route to file as its more approprete
Fixed random CSS issues that occur on older browsers or Safari
This commit is contained in:
Michał Gdula 2023-03-14 22:07:17 +00:00
parent 9cfb8befd2
commit 3008a55899
19 changed files with 102 additions and 76 deletions

View file

@ -6,7 +6,7 @@
<div class="banner">
{% if images %}
<img
src="/api/uploads/{{ images.0.file_name }}?w=1920&h=1080"
src="/api/file/{{ images.0.file_name }}?w=1920&h=1080"
onload="imgFade(this)"
style="opacity:0; background-color:rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})"
/>

View file

@ -4,7 +4,7 @@
{% block content %}
<div class="background">
<img src="/api/uploads/{{ image.file_name }}?w=1920&h=1080" alt="{{ image.post_alt }}" onload="imgFade(this)" style="opacity:0;"/>
<img src="/api/file/{{ image.file_name }}?w=1920&h=1080" alt="{{ image.post_alt }}" onload="imgFade(this)" style="opacity:0;"/>
<span style="background-image: linear-gradient(to top, rgba({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }}, 1), transparent);"></span>
</div>
@ -15,7 +15,7 @@
<div class="image-grid">
<div class="image-container" id="image-container">
<img
src="/api/uploads/{{ image.file_name }}?w=1920&h=1080"
src="/api/file/{{ image.file_name }}?w=1920&h=1080"
alt="{{ image.post_alt }}"
onload="imgFade(this)" style="opacity:0;"
onerror="this.src='/static/images/error.png'"
@ -55,7 +55,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
</span>
</button>
<a class="pill-item" href="/api/uploads/{{ image.file_name }}" download onclick="addNotification('Download started!', 4)">
<a class="pill-item" href="/api/file/{{ image.file_name }}" download onclick="addNotification('Download started!', 4)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M232,136v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H224A8,8,0,0,1,232,136Z" opacity="0.2"></path><path d="M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H72a8,8,0,0,1,0,16H32v64H224V136H184a8,8,0,0,1,0-16h40A16,16,0,0,1,240,136Zm-117.66-2.34a8,8,0,0,0,11.32,0l48-48a8,8,0,0,0-11.32-11.32L136,108.69V24a8,8,0,0,0-16,0v84.69L85.66,74.34A8,8,0,0,0,74.34,85.66ZM200,168a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z"></path></svg>
<span class="tool-tip">
Download
@ -237,7 +237,7 @@
document.querySelector("html").style.overflow = "hidden";
let fullscreen = document.querySelector('.image-fullscreen')
fullscreen.querySelector('img').src = '/api/uploads/{{ image.file_name }}';
fullscreen.querySelector('img').src = '/api/file/{{ image.file_name }}';
fullscreen.style.display = 'flex';
setTimeout(function() {
@ -260,7 +260,7 @@
'DESTRUCTION!!!!!!',
'This will delete the image and all of its data!!! This action is irreversible!!!!! Are you sure you want to do this?????',
'<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
'<img src="/api/uploads/{{ image.file_name }}?w=1920&h=1080" />'
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080" />'
);
});
function deleteImage() {