From a9b13f1e3943eb34a1f29cf5d9f206c4f7b496f7 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 1 Feb 2023 00:57:36 +0000
Subject: [PATCH] Fix jumpUp button Switch to reffere instead of src url Once
 again, I am changing animations

---
 gallery/static/js/main.js                        | 14 ++++++++------
 gallery/templates/image.html                     | 14 +++++++++-----
 gallery/templates/index.html                     | 12 ++++++------
 gallery/templates/layout.html                    |  2 +-
 gallery/user/themes/default/animations.sass      |  9 ++++++---
 gallery/user/themes/default/buttons/jumpUp.sass  |  8 ++++++++
 gallery/user/themes/default/ui/notification.sass |  1 -
 7 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/gallery/static/js/main.js b/gallery/static/js/main.js
index dcb3283..7e9cc9a 100644
--- a/gallery/static/js/main.js
+++ b/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';
     }
 }
 
diff --git a/gallery/templates/image.html b/gallery/templates/image.html
index 06cde22..fd25b19 100644
--- a/gallery/templates/image.html
+++ b/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');
             });
         }
diff --git a/gallery/templates/index.html b/gallery/templates/index.html
index 5eed5dc..84bc33c 100644
--- a/gallery/templates/index.html
+++ b/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';
diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html
index e22f0a6..2a1b0f5 100644
--- a/gallery/templates/layout.html
+++ b/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>
diff --git a/gallery/user/themes/default/animations.sass b/gallery/user/themes/default/animations.sass
index b87fcbf..0b068fd 100644
--- a/gallery/user/themes/default/animations.sass
+++ b/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
diff --git a/gallery/user/themes/default/buttons/jumpUp.sass b/gallery/user/themes/default/buttons/jumpUp.sass
index eed83d5..05b118e 100644
--- a/gallery/user/themes/default/buttons/jumpUp.sass
+++ b/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
diff --git a/gallery/user/themes/default/ui/notification.sass b/gallery/user/themes/default/ui/notification.sass
index 18dcddc..cb88619 100644
--- a/gallery/user/themes/default/ui/notification.sass
+++ b/gallery/user/themes/default/ui/notification.sass
@@ -90,7 +90,6 @@
     left: 0px
 
     background-color: $white
-    opacity: 0
 
     animation: notificationTimeout 5.1s linear