Load image source on scroll

Set time tags to local time

gallery/static/js/main.js

@@ -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');
 

gallery/templates/image.html

@@ -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'] %}

gallery/templates/index.html

@@ -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');
 

gallery/user/themes/default/ui/gallery.sass

@@ -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

gallery/user/themes/default/ui/notification.sass

@@ -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
+@each $name, $colour in (success: $succes, error: $critical, warning: $warning, info: $info)
-    @include notification($succes)
+    .sniffle__notification--#{$name}
-
+        @include notification($colour)
-.sniffle__notification--error
-    @include notification($critical)
-
-.sniffle__notification--warning
-    @include notification($warning)
-
-.sniffle__notification--info
-    @include notification($info)
 
 .sniffle__notification-show
     opacity: 1
     transform: scale(1)
 
 .sniffle__notification--hide
-    margin-bottom: -0.3rem // compensate for gap
+    margin: 0
-    max-height: 0 // prevent divs from jumping when removed
+    max-height: 0
 
     opacity: 0
     transform: translateX(100%)

gallery/user/themes/default/ui/pop-up.sass

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