Formatted metadata

Add API for metadata
Load more images if page is resized
Adjusted animations

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

@@ -109,7 +109,7 @@
     opacity: 0
     transform: translateX(100%)
 
-    transition: all 0.25s ease-in-out
+    transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out
 
 @media (max-width: $breakpoint)
     .notifications

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

@@ -229,7 +229,6 @@
 
         border-radius: $rad
         transform: translateY(5rem)
-        //box-shadow: 0px 8px 0px $black2;
 
     .pop-up-content
         max-height: 100%

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

@@ -107,6 +107,7 @@
 
     background-color: $black
     border-radius: $rad
+
 .image-info__header
     margin: 0
     padding: 0.5rem
@@ -119,7 +120,11 @@
     align-items: center
     gap: 0.5rem
 
-    background-color: $black2
+    position: sticky
+    top: 0
+    z-index: +1
+
+    background-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1))
 
     svg
         margin: 0
@@ -150,6 +155,10 @@
     flex-direction: column
     gap: 0.5rem
 
+    color: $white
+
+    overflow-x: hidden
+
     p
         margin: 0
         padding: 0
@@ -157,11 +166,51 @@
         font-size: 1rem
         font-weight: 500
 
-        color: $white
-
         text-overflow: ellipsis
         overflow: hidden
 
+    table
+        margin: 0 0 0 1rem
+        padding: 0
+
+        max-width: 100%
+
+        overflow-x: hidden
+        border-collapse: collapse
+
+        tr
+            margin: 0
+            padding: 0
+
+            width: 100%
+
+            white-space: nowrap
+
+            td:first-child
+                padding: 0.25rem 1rem 0.25rem 0
+
+                width: 50%
+
+                white-space: nowrap
+
+                font-size: 1rem
+                font-weight: 500
+            td:last-child
+                padding: 0.25rem 0
+
+                width: 50%
+                max-width: 0
+
+                overflow: hidden
+                text-overflow: ellipsis
+                white-space: nowrap
+
+                font-size: 1rem
+                font-weight: 500
+
+            td.empty-table
+                opacity: 0.3
+
 #image-tools
     margin-bottom: 0.5rem
 
@@ -214,3 +263,16 @@
 
     .image-wrapper
         padding-bottom: 4rem
+
+    .image-info__content
+        table
+            margin: 0
+
+            tr
+                td:first-child
+                    width: auto
+                td:last-child
+                    width: 75%
+    .image-info__header
+        background-image: none
+        background-color: $black2