mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 19:46:16 +00:00
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:
parent
35c5951318
commit
e3a0eaf60b
18 changed files with 531 additions and 213 deletions
|
@ -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();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue