Add basic Image Group functions

Make the Upload Pannel usable on mobile
Remove useless code as Django had built-in functions to read the config
Remove useless JS code
Cleanup tempaltes
This commit is contained in:
Michał Gdula 2023-03-09 23:31:58 +00:00
parent 35c5951318
commit e3a0eaf60b
18 changed files with 531 additions and 213 deletions

View file

@ -8,53 +8,45 @@
<span></span>
<div class="banner-content">
<p>{{ motto }}</p>
<h1>{{ name }}</h1>
<p>Serving {{ image_count }} images</p>
<p>{{ config.WEBSITE.motto }}</p>
<h1>{{ config.WEBSITE.name }}</h1>
<p>Serving {{ images|length }} images</p>
</div>
</div>
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image['id'] }}" class="gallery-item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
<span>
<p></p>
<h2><span class="time">{{ image['created_at'] }}</span></h2>
</span>
<img
data-src="{{ image['file_name'] }}"
onload="imgFade(this)"
style="opacity:0;"
/>
</a>
{% endfor %}
</div>
{% if images %}
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image.id }}" class="gallery-item" href="/image/{{ image.id }}" style="background-color: rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})">
<span>
<p></p>
<h2><span class="time">{{ image.created_at }}</span></h2>
</span>
<img data-src="{{ image.file_name }}" onload="imgFade(this)" style="opacity:0;"/>
</a>
{% endfor %}
</div>
{% else %}
<div class="big-text">
<h1>No image!</h1>
{% if g.user %}
<p>You can get started by uploading an image!</p>
{% else %}
<p>Login to start uploading images!</p>
{% endif %}
</div>
{% endif %}
<!--
<footer>
<a>V{{ config['APP_VERSION'] }}</a>
<p>Rights reserved to {{ config['ADMIN']['name'] }}</p>
</footer>
-->
{% endblock %}
{% block script %}
<script>
function loadOnView() {
var images = document.querySelectorAll('.gallery-item img');
for (var i = 0; i < images.length; i++) {
var image = images[i];
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
if (!image.src) {
image.src = `/api/uploads/${image.getAttribute('data-src')}?w=500&h=500`
}
}
}
}
window.onload = function() {
loadOnView();
};
window.onscroll = function() {
loadOnView();
};
window.onresize = function() {
loadOnView();
};
if (document.referrer.includes('image')) {
try {
var referrerId = document.referrer.split('/').pop();