failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2024-12-29 10:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Load image source on scroll

Browse source 
Set time tags to local time
This commit is contained in:
Michał 2023-01-26 16:55:42 +00:00
parent 792cbd1884
commit 651fd8aa49
6 changed files with 51 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
gallery/static/js/main.js
View file

@ -23,6 +23,13 @@ function imgFade(obj) {
//$(obj).parent().style.backgroundColor = 'transparent';
}
var times = document.getElementsByClassName('time');
for (var i = 0; i < times.length; i++) {
var time = times[i].innerHTML;
var date = new Date(time);
times[i].innerHTML = date.toLocaleString( 'en-GB', { timeZone: 'UTC' } );
}
function addNotification(text='Sample notification', type=4) {
var container = document.querySelector('.notifications');

8
gallery/templates/image.html
View file

@ -38,7 +38,7 @@
</svg>
<span class="tool-tip">Share</span>
</button>
<a class="pill-item" href="/api/uploads/{{ image['file_name'] }}/0" download>
<a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
<path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
</svg>
@ -111,7 +111,7 @@
<p>Filename: {{ image['file_name'] }}</p>
<p>Image ID: {{ image['id'] }}</p>
<p>Author: {{ image['author_id'] }}</p>
<p>Upload date: {{ image['created_at'] }}</p>
<p>Upload date: <span class="time">{{ image['created_at'] }}</span></p>
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
<p>File size: {{ size }}</p>
</div>
@ -155,8 +155,8 @@
addNotification("Failed to copy link! Are you on HTTP?", 2);
}
});
$('#img-info').click(function() {
$('#img-download').click(function() {
addNotification("Download started!", 4);
});
{% if g.user['id'] == image['author_id'] %}

29
gallery/templates/index.html
View file

@ -9,14 +9,13 @@
<a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}">
<span class="gallery__item-info">
<p>{{ image['id'] }}</p>
<h2>{{ image['created_at'] }}</h2>
<h2><span class="time">{{ image['created_at'] }}</span></h2>
</span>
<img
class="gallery__item-image"
src="/api/uploads/{{ image['file_name'] }}/400"
data-src="{{ image['file_name'] }}"
onload="imgFade(this)"
style="opacity:0;"
loading="lazy"
/>
</a>
{% endfor %}
@ -25,6 +24,30 @@
{% block script %}
<script>
var images = document.querySelectorAll('.gallery__item-image');
window.onload = function() {
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')}/400`
}
}
}
};
window.onscroll = function() {
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')}/400`
}
}
}
};
const urlParams = new URLSearchParams(window.location.search);
const src = urlParams.get('src');

6
gallery/user/themes/default/ui/gallery.sass
View file

@ -39,7 +39,7 @@
.gallery__item-info
margin: 0
padding: 0
padding: 0.5rem
width: 100%
height: 100%
@ -62,7 +62,7 @@
h2
margin: 0
padding: 0 1rem 0.5rem
padding: 0
font-size: 1rem
font-weight: 600
@ -77,7 +77,7 @@
p
margin: 0
padding: 0 1rem 0.5rem
padding: 0
font-size: 0.8rem
font-weight: 500

21
gallery/user/themes/default/ui/notification.sass
View file

@ -17,12 +17,11 @@
display: flex
flex-direction: column
gap: 0.3rem
z-index: 621
.sniffle__notification
margin: 0
margin: 0 0 0.3rem 0
padding: 0
width: 450px
@ -95,25 +94,17 @@
animation: notificationTimeout 5.1s linear
.sniffle__notification--success
@include notification($succes)
.sniffle__notification--error
@include notification($critical)
.sniffle__notification--warning
@include notification($warning)
.sniffle__notification--info
@include notification($info)
@each $name, $colour in (success: $succes, error: $critical, warning: $warning, info: $info)
.sniffle__notification--#{$name}
@include notification($colour)
.sniffle__notification-show
opacity: 1
transform: scale(1)
.sniffle__notification--hide
margin-bottom: -0.3rem // compensate for gap
max-height: 0 // prevent divs from jumping when removed
margin: 0
max-height: 0
opacity: 0
transform: translateX(100%)

24
gallery/user/themes/default/ui/pop-up.sass
View file

@ -165,25 +165,11 @@
.pop-up__btn-fill
@include pop-up-btn($black, true)
.pop-up__btn-primary
@include pop-up-btn($primary)
.pop-up__btn-primary-fill
@include pop-up-btn($primary, true)
.pop-up__btn-info
@include pop-up-btn($info)
.pop-up__btn-info-fill
@include pop-up-btn($info, true)
.pop-up__btn-warning
@include pop-up-btn($warning)
.pop-up__btn-warning-fill
@include pop-up-btn($warning, true)
.pop-up__btn-critical
@include pop-up-btn($critical)
.pop-up__btn-critical-fill
@include pop-up-btn($critical, true)
@each $name, $colour in (primary: $primary, info: $info, warning: $warning, critical: $critical)
.pop-up__btn-#{$name}
@include pop-up-btn($colour)
.pop-up__btn-#{$name}-fill
@include pop-up-btn($colour, true)
.pop-up__input
margin: 0