Clean up Pop-Up JS

Fix missing Width and Height data stopping images from loading

gallery/static/js/popup.js

@@ -2,34 +2,23 @@ function popUpShow(title, body, actions, content) {
     // Stop scrolling
     document.querySelector("html").style.overflow = "hidden";
 
+    // Get popup elements
     var popup = document.querySelector('.pop-up');
     var popupContent = document.querySelector('.pop-up-content');
     var popupActions = document.querySelector('.pop-up-controlls');
     
-    // Set tile and description
+    // Set popup content
-    h3 = document.createElement('h3');
+    popupContent.innerHTML = `<h3>${title}</h3><p>${body}</p>${content}`;
-    h3.innerHTML = title;
-    p = document.createElement('p');
-    p.innerHTML = body;
-
-    popupContent.innerHTML = '';
-    popupContent.appendChild(h3);
-    popupContent.appendChild(p);
-
-    // Set content
-    if (content != '') {
-        popupContent.innerHTML += content;
-    }
 
     // Set buttons that will be displayed
-    popupActions.innerHTML = '';
+    popupActions.innerHTML = actions;
-    if (actions != '') {
-        popupActions.innerHTML += actions;
-    }
     popupActions.innerHTML += '<button class="pop-up__btn pop-up__btn-fill" onclick="popupDissmiss()">Nooooooo</button>';
 
     // Show popup
-    popup.classList.add('pop-up__active');
+    popup.style.display = 'block';
+    setTimeout(function() {
+        popup.classList.add('active')
+    }, 10);
 }
 
 function popupDissmiss() {
@@ -38,16 +27,16 @@ function popupDissmiss() {
 
     var popup = document.querySelector('.pop-up');
 
-    popup.classList.add('pop-up__hide');
+    popup.classList.remove('active');
 
     setTimeout(function() {
-        popup.classList = 'pop-up';
+        popup.style.display = 'none';
     }, 200);
 }
 
 document.addEventListener('keydown', function(event) {
     if (event.key === 'Escape') {
-        if (document.querySelector('.pop-up').classList.contains('pop-up__active')) {
+        if (document.querySelector('.pop-up').classList.contains('active')) {
             popupDissmiss();
         }
     }

gallery/templates/image.html

@@ -18,8 +18,10 @@
                 src="/api/uploads/{{ image.file_name }}?w=1000&h=1000"
                 onload="imgFade(this)" style="opacity:0;"
                 onerror="this.src='/static/images/error.png'"
+                {% if "File" in image.image_exif %}
                     width="{{ image.image_exif.File.Width.raw }}"
                     height="{{ image.image_exif.File.Height.raw }}"
+                {% endif %}
             />
         </div>
 

gallery/templates/index.html

@@ -36,13 +36,6 @@
             {% endif %}
         </div>
     {% endif %}
-
-    <!--
-        <footer>
-            <a>V{{ config['APP_VERSION'] }}</a>
-            <p>Rights reserved to {{ config['ADMIN']['name'] }}</p>
-        </footer>
-    -->
 {% endblock %}
 
 {% block script %}

gallery/themes/default/components/elements/pop-up.sass

@@ -21,20 +21,20 @@
     height: 100vh
 
     position: fixed
-    top: 100%
+    top: 0
     left: 3.5rem
 
+    display: none
+
     background-color: rgba($black, 0.8)
-
     opacity: 0
-    z-index: 101
 
+    z-index: 101
     transition: opacity 0.2s ease
 
     .pop-up__click-off
         width: 100vw
         height: 100vh
-    height: 100dvh
 
         position: absolute
         top: 0
@@ -59,11 +59,10 @@
 
         background-color: $white
         border-radius: $rad
-
         overflow: hidden
 
-    transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
         z-index: +2
+        transition: transform 0.2s $animation-smooth
 
     .pop-up-content
         margin: 0
@@ -146,6 +145,12 @@
         justify-content: flex-end
         gap: 0.5rem
 
+    &.active
+        opacity: 1
+
+        .pop-up-wrapper
+            transform: translate(-50%, 50%) scale(1)
+
 .pop-up__btn
     margin: 0
     padding: 0.5rem 1rem
@@ -209,21 +214,6 @@
         text-decoration: underline
         cursor: pointer
 
-.pop-up__active
-    opacity: 1
-    top: 0
-
-    .pop-up-wrapper
-        transform: translate(-50%, 50%) scale(1)
-
-.pop-up__hide
-    opacity: 0
-    transition: opacity 0.2s ease
-
-    .pop-up-wrapper
-        transform: translate(-50%, 50%) scaleY(0)
-        transition: transform 0.2s ease
-
 @media (max-width: $breakpoint)
     .pop-up
         width: 100%
@@ -257,20 +247,11 @@
             flex-direction: column
             justify-content: center
     
-    .pop-up__btn
+        &.active
-        width: 100%
-    
-    .pop-up__active
             opacity: 1
-        top: unset
 
             .pop-up-wrapper
                 transform: translateY(0)
 
-    .pop-up__hide
+    .pop-up__btn
-        opacity: 0
+        width: 100%
-        transition: opacity 0.2s ease
-
-        .pop-up-wrapper
-            transform: translateY(5rem)
-            transition: transform 0.2s ease

gallery/themes/default/variables.sass

@@ -18,9 +18,10 @@ $info: $blue
 $rad: 6px
 $rad-inner: 3px
 
-$font: "Work Sans", sans-serif
+$animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
+$animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)
 
-// responsive breakpoint for mobile
+$font: "Work Sans", sans-serif
 $breakpoint: 800px
 
 @font-face