Fix jumpUp button

Switch to reffere instead of src url
Once again, I am changing animations

gallery/static/js/main.js

@@ -1,15 +1,17 @@
 let navToggle = true;
 
 document.onscroll = function() {
-    document.querySelector('.background-decoration').style.opacity = `${1 - window.scrollY / 621}`;
-    document.querySelector('.background-decoration').style.top = `-${window.scrollY / 5}px`;
+    try {
+        document.querySelector('.background-decoration').style.opacity = `${1 - window.scrollY / 621}`;
+        document.querySelector('.background-decoration').style.top = `-${window.scrollY / 5}px`;
+    } catch (e) {
+        console.log('No background decoration found');
+    }
 
     if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-        document.querySelector('.jumpUp').style.opacity = 1;
-        document.querySelector('.jumpUp').style.right = "0.75rem";
+        document.querySelector('.jumpUp').classList = 'jumpUp jumpUp--show';
     } else {
-        document.querySelector('.jumpUp').style.opacity = 0;
-        document.querySelector('.jumpUp').style.right = "-3rem";
+        document.querySelector('.jumpUp').classList = 'jumpUp';
     }
 }
 

gallery/templates/image.html

@@ -6,7 +6,6 @@
         <span></span>
     </div>
 {% endblock %}
-{% block scrollPosition %}?src={{ image['id'] }}{% endblock %}
 {% block wrapper_class %}image-wrapper{% endblock %}
 
 {% block content %}
@@ -209,10 +208,15 @@
 
 {% block script %}
     <script>
-        var collapseButton = document.querySelectorAll('#collapse-info');
-
-        for (var i = 0; i < collapseButton.length; i++) {
-            collapseButton[i].addEventListener('click', function() {
+        var infoCollapse = document.querySelectorAll('#collapse-info');
+        for (var i = 0; i < infoCollapse.length; i++) {
+            infoCollapse[i].addEventListener('click', function() {
+                this.parentNode.classList.toggle('image-info__collapsed');
+            });
+        }
+        var infoHeader = document.querySelectorAll('.image-info__header');
+        for (var i = 0; i < infoHeader.length; i++) {
+            infoHeader[i].addEventListener('click', function() {
                 this.parentNode.classList.toggle('image-info__collapsed');
             });
         }

gallery/templates/index.html

@@ -45,13 +45,13 @@
             loadOnView();
         };
 
-        const urlParams = new URLSearchParams(window.location.search);
-        const src = urlParams.get('src');
-        if (src) {
-            var imgOffset = document.getElementById('image-' + src).offsetTop;
-            var imgHeight = document.getElementById('image-' + src).offsetHeight;
+        if (document.referrer.includes('image')) {
+            var referrerId = document.referrer.split('/').pop();
+
+            var imgOffset = document.getElementById('image-' + referrerId).offsetTop;
+            var imgHeight = document.getElementById('image-' + referrerId).offsetHeight;
             var windowHeight = window.innerHeight;
-            
+
             document.querySelector('html').style.scrollBehavior = 'auto';
             window.scrollTo(0, imgOffset + (imgHeight / 2) - (windowHeight / 2));
             document.querySelector('html').style.scrollBehavior = 'smooth';

gallery/templates/layout.html

@@ -18,7 +18,7 @@
         {% block header %}{% endblock %}
 
         <div class="navigation">
-            <a href="{{url_for('gallery.index')}}{% block scrollPosition %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}">
+            <a href="{{url_for('gallery.index')}}" class="navigation-item {% block nav_home %}{% endblock %}">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor">
                     <path d="M2 8v10h12V8H2zm2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2zm2 0h8a2 2 0 0 1 2 2v4h2V2H6v4zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path><path d="M7 6a3 3 0 1 1 6 0h-2a1 1 0 0 0-2 0H7zm1.864 13.518l2.725-4.672a1 1 0 0 1 1.6-.174l1.087 1.184 1.473-1.354-1.088-1.183a3 3 0 0 0-4.8.52L7.136 18.51l1.728 1.007zm6.512-12.969a2.994 2.994 0 0 1 3.285.77l1.088 1.183-1.473 1.354-1.087-1.184A1 1 0 0 0 16 8.457V8c0-.571-.24-1.087-.624-1.451z"></path>
                 </svg>

gallery/user/themes/default/animations.sass

@@ -7,10 +7,13 @@
 @keyframes notificationTimeout
     0%
         left: -100%
-        opacity: 1
+        height: 3px
     90%
         left: 0%
-        opacity: 1
+        height: 3px
+    95%
+        left: 0%
+        height: 0
     100%
         left: 0%
-        opacity: 0
+        height: 0

gallery/user/themes/default/buttons/jumpUp.sass

@@ -27,3 +27,11 @@
     &:hover
         background-color: $black
         color: $primary
+
+.jumpUp--show
+    right: 0.75rem
+    opacity: 1
+
+@media (max-width: $breakpoint)
+    .jumpUp
+        bottom: 4.25rem

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

@@ -90,7 +90,6 @@
     left: 0px
 
     background-color: $white
-    opacity: 0
 
     animation: notificationTimeout 5.1s linear