Move main JS into its own file

Fix Sass animations
When home button clicked from image view, it'll scroll down automagically

gallery/__init__.py

@@ -5,7 +5,7 @@ print("""
 | |_| | | | | | |_| | |__|  __/ (_| \\__ \\
  \\___/|_| |_|_|\\__, |_____\\___|\\__, |___/
                |___/           |___/
-Created by Fluffy Bean  -  Version 250123
+Created by Fluffy Bean  -  Version 260123
 """)
 
 from flask import Flask, render_template

gallery/gallery.py

@@ -1,10 +1,13 @@
 from flask import Blueprint, flash, g, redirect, render_template, request, url_for, jsonify, current_app
 from werkzeug.exceptions import abort
 from werkzeug.utils import secure_filename
+
 from gallery.auth import login_required
 from gallery.db import get_db
+
 from PIL import Image
 from PIL.ExifTags import TAGS
+
 import os
 import datetime
 
@@ -26,20 +29,18 @@ def index():
 def image(id):
     # Get image from database
     db = get_db()
-    image = db.execute('SELECT * FROM posts'
+    image = db.execute('SELECT * FROM posts WHERE id = ?', (id, )).fetchone()
-                       ' WHERE id = ?', (id, )).fetchone()
 
     if image is None:
         abort(404)
 
     # Get exif data from image
-    try:
     file = Image.open(
-            os.path.join(current_app.config['UPLOAD_FOLDER'],
+        os.path.join(current_app.config['UPLOAD_FOLDER'], image['file_name']))
-                         image['file_name']))
     raw_exif = file.getexif()
     human_exif = {}
 
+    try:
         for tag in raw_exif:
             name = TAGS.get(tag, tag)
             value = raw_exif.get(tag)
@@ -48,19 +49,25 @@ def image(id):
                 value = value.decode()
 
             human_exif[name] = value
+    except Exception as e:
+        human_exif = False
 
-        if len(human_exif) == 0:
+    def human_size(num, suffix="B"):
-            human_exif = False
+        for unit in ["", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi"]:
-    except:
+            if abs(num) < 1024.0:
-        # Cringe, no file present
+                return f"{num:3.1f}{unit}{suffix}"
-        human_exif = False
+            num /= 1024.0
-        file = False
+        return f"{num:.1f}Yi{suffix}"
+
+    size = os.path.getsize(
+        os.path.join(current_app.config['UPLOAD_FOLDER'], image['file_name']))
 
     # All in le head
     return render_template('image.html',
                            image=image,
                            exif=human_exif,
-                           file=file)
+                           file=file,
+                           size=human_size(size))
 
 
 @blueprint.route('/group')

gallery/static/js/login.js

@@ -0,0 +1,110 @@
+function showLogin() {
+    popUpShow(
+        'idk what to put here, just login please',
+        'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
+        '',
+        '<form onsubmit="return login(event)">\
+            <input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
+            <input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
+            <button class="pop-up__btn pop-up__btn-primary-fill">Login</button>\
+        </form>'
+    );
+};
+function showRegister() {
+    popUpShow(
+        'Who are you?',
+        'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
+        '',
+        '<form onsubmit="return register(event)">\
+            <input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
+            <input class="pop-up__input" type="text" placeholder="E mail!" id="email"/>\
+            <input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
+            <input class="pop-up__input" type="password" placeholder="Passywassy again!" id="password-repeat"/>\
+            <button class="pop-up__btn pop-up__btn-primary-fill">Register</button>\
+        </form>'
+    );
+};
+
+function login(event) {
+    // AJAX takes control of subby form
+    event.preventDefault();
+
+    if ($("#username").val() === "" || $("#password").val() === "") {
+        addNotification("Please fill in all fields", 3);
+    } else {
+        // Make form
+        var formData = new FormData();
+        formData.append("username", $("#username").val());
+        formData.append("password", $("#password").val());
+
+        $.ajax({
+            url: '/auth/login',
+            type: 'post',
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function (response) {
+                location.reload();
+            },
+            error: function (response) {
+                switch (response.status) {
+                    case 500:
+                        addNotification('Server exploded, F\'s in chat', 2);
+                        break;
+                    case 403:
+                        addNotification('None but devils play past here... Wrong information', 2);
+                        break;
+                    default:
+                        addNotification('Error logging in, blame someone', 2);
+                        break;
+                }
+            }
+        });
+    }
+}
+function register(obj) {
+    // AJAX takes control of subby form
+    event.preventDefault();
+
+    if ($("#username").val() === "" || $("#email").val() === "" || $("#password").val() === "" || $("#password-repeat").val() === "") {
+        addNotification("Please fill in all fields", 3);
+    } else {
+        // Make form
+        var formData = new FormData();
+        formData.append("username", $("#username").val());
+        formData.append("email", $("#email").val());
+        formData.append("password", $("#password").val());
+        formData.append("password-repeat", $("#password-repeat").val());
+
+        $.ajax({
+            url: '/auth/register',
+            type: 'post',
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function (response) {
+                if (response === "gwa gwa") {
+                    addNotification('Registered successfully! Now please login to continue', 1);
+                    showLogin();
+                } else {
+                    for (var i = 0; i < response.length; i++) {
+                        addNotification(response[i], 2);
+                    }
+                }
+            },
+            error: function (response) {
+                switch (response.status) {
+                    case 500:
+                        addNotification('Server exploded, F\'s in chat', 2);
+                        break;
+                    case 403:
+                        addNotification('None but devils play past here...', 2);
+                        break;
+                    default:
+                        addNotification('Error logging in, blame someone', 2);
+                        break;
+                }
+            }
+        });
+    }
+}

gallery/static/js/main.js

@@ -0,0 +1,136 @@
+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`;
+
+    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
+        document.querySelector('.jumpUp').style.opacity = 1;
+        document.querySelector('.jumpUp').style.right = "0.75rem";
+    } else {
+        document.querySelector('.jumpUp').style.opacity = 0;
+        document.querySelector('.jumpUp').style.right = "-3rem";
+    }
+}
+
+document.querySelector('.jumpUp').onclick = function() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+}
+
+function imgFade(obj) {
+    $(obj).animate({opacity: 1}, 500);
+    //$(obj).parent().style.backgroundColor = 'transparent';
+}
+
+function addNotification(text='Sample notification', type=4) {
+    var container = document.querySelector('.notifications');
+
+    // Create notification element
+    var div = document.createElement('div');
+    div.classList.add('sniffle__notification');
+    div.onclick = function() {
+        if (div.parentNode) {
+            div.classList.add('sniffle__notification--hide');
+
+            setTimeout(function() {
+                container.removeChild(div);
+            }, 500);
+        }
+    };
+
+    // Create icon element and append to notification
+    var icon = document.createElement('span');
+    icon.classList.add('sniffle__notification-icon');
+    switch (type) {
+        case 1:
+            div.classList.add('sniffle__notification--success');
+            icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
+                <path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
+            </svg>';
+            break;
+        case 2:
+            div.classList.add('sniffle__notification--error');
+            icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
+                <path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
+            </svg>';
+            break;
+        case 3:
+            div.classList.add('sniffle__notification--warning');
+            icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
+                <path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
+            </svg>';
+            break;
+        default:
+            div.classList.add('sniffle__notification--info');
+            icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
+                <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
+            </svg>';
+            break;
+    }
+    div.appendChild(icon);
+
+    // Create text element and append to notification
+    var description = document.createElement('span');
+    description.classList.add('sniffle__notification-text');
+    description.innerHTML = text;
+    div.appendChild(description);
+
+    // Create span to show time remaining
+    var timer = document.createElement('span');
+    timer.classList.add('sniffle__notification-time');
+    div.appendChild(timer);
+
+    // Append notification to container
+    container.appendChild(div);
+    setTimeout(function() {
+        div.classList.add('sniffle__notification-show');
+    }, 100);
+
+    // Remove notification after 5 seconds
+    setTimeout(function() {
+        if (div.parentNode) {
+            div.classList.add('sniffle__notification--hide');
+
+            setTimeout(function() {
+                container.removeChild(div);
+            }, 500);
+        }
+    }, 5000);
+}
+
+function popUpShow(title, body, actions, content) {
+    var popup = document.querySelector('.pop-up');
+    var popupContent = document.querySelector('.pop-up-content');
+    var popupActions = document.querySelector('.pop-up-controlls');
+
+    // Set tile and description
+    h3 = document.createElement('h3');
+    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 = '';
+    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');
+}
+
+function popupDissmiss() {
+    var popup = document.querySelector('.pop-up');
+    popup.classList.remove('pop-up__active');
+}

gallery/static/js/upload.js

@@ -0,0 +1,70 @@
+function showUpload() {
+    popUpShow(
+        'Upload funny stuff',
+        'May the world see your stuff 👀',
+        '',
+        '<form onsubmit="return uploadFile(event)">\
+            <input class="pop-up__input" type="file" id="file"/>\
+            <input class="pop-up__input" type="text" placeholder="alt" id="alt"/>\
+            <input class="pop-up__input" type="text" placeholder="description" id="description"/>\
+            <input class="pop-up__input" type="text" placeholder="tags" id="tags"/>\
+            <button class="pop-up__btn pop-up__btn-primary-fill">Upload</button>\
+        </form>'
+    );
+};
+function uploadFile(){
+    // AJAX takes control of subby form
+    event.preventDefault();
+
+    // Check for empty upload
+    if ($("#file").val() === "") {
+        addNotification("Please select a file to upload", 2);
+    } else {
+        // Make form
+        var formData = new FormData();
+        formData.append("file", $("#file").prop("files")[0]);
+        formData.append("alt", $("#alt").val());
+        formData.append("description", $("#description").val());
+        formData.append("tags", $("#tags").val());
+        formData.append("submit", $("#submit").val());
+
+        // Upload the information
+        $.ajax({
+            url: '/api/upload',
+            type: 'post',
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function (response) {
+                addNotification("File uploaded successfully!", 1);
+                // popupDissmiss(); // Close popup
+            },
+            error: function (response) {
+                switch (response.status) {
+                    case 500:
+                        addNotification('Server exploded, F\'s in chat', 2);
+                        break;
+                    case 400:
+                    case 404:
+                        addNotification('Error uploading. Blame yourself', 2);
+                        break;
+                    case 403:
+                        addNotification('None but devils play past here...', 2);
+                        break;
+                    case 413:
+                        addNotification('File too large!!!!!!', 3);
+                        break;
+                    default:
+                        addNotification('Error uploading file, blame someone', 2);
+                        break;
+                }
+            }
+        });
+
+        // Empty values
+        $("#file").val("");
+        $("#alt").val("");
+        $("#description").val("");
+        $("#tags").val("");
+    }
+};

gallery/templates/image.html

@@ -6,16 +6,12 @@
         <span></span>
     </div>
 {% endblock %}
-
+{% block scrollPosition %}?src={{ image['id'] }}{% endblock %}
 {% block wrapper_class %}image-wrapper{% endblock %}
 
 {% block content %}
     <div class="image-fullscreen">
-        <img
+        <img src="" onload="imgFade(this);" style="opacity:0;" />
-            src=""
-            onload="imgFade(this);"
-            style="opacity:0;"
-        />
     </div>
 
     <div class="image-container">
@@ -116,12 +112,11 @@
                 <p>Image ID: {{ image['id'] }}</p>
                 <p>Author: {{ image['author_id'] }}</p>
                 <p>Upload date: {{ image['created_at'] }}</p>
-                {% if file is not false %}
                 <p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
-                {% endif %}
+                <p>File size: {{ size }}</p>
             </div>
         </div>
-        {% if exif is not false %}
+        {% if exif %}
             <div class="image-info">
                 <div class="image-info__header">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
@@ -147,6 +142,7 @@
 
         $('#img-fullscreen').click(function() {
             $('.image-fullscreen').addClass('image-fullscreen__active');
+            
             if ($('.image-fullscreen img').attr('src') == '') {
                 $('.image-fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
             }

gallery/templates/index.html

@@ -6,12 +6,11 @@
 {% block content %}
     <div class="gallery">
         {% for image in images %}
-            <a class="gallery__item" href="/image/{{ image['id'] }}">
+            <a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}">
-                <div class="gallery__item-info">
+                <span class="gallery__item-info">
                     <p>{{ image['id'] }}</p>
                     <h2>{{ image['created_at'] }}</h2>
-                </div>
+                </span>
-                <span class="gallery__item-filter"></span>
                 <img
                     class="gallery__item-image"
                     src="/api/uploads/{{ image['file_name'] }}/400"
@@ -26,46 +25,17 @@
 
 {% block script %}
     <script>
-        let imageList = [];
+        const urlParams = new URLSearchParams(window.location.search);
-        let imageIndex = 0;
+        const src = urlParams.get('src');
 
-        function loadMore(startIndex, amount = 20) {
+        if (src) {
-            for (let i = startIndex; i < startIndex + amount; i++) {
+            var imgOffset = document.getElementById('image-' + src).offsetTop;
-                if (i < imageList.length) {
+            var imgHeight = document.getElementById('image-' + src).offsetHeight;
-                    loadImg(imageList[i][0], imageList[i][1]);
+            var windowHeight = window.innerHeight;
-                }
-            }
-            imageIndex = startIndex + amount;
-        }
             
-        function loadImg(id, fileName) {
+            document.querySelector('html').style.scrollBehavior = 'auto';
-            var imgDiv = `
+            window.scrollTo(0, imgOffset + (imgHeight / 2) - (windowHeight / 2));
-                <a class="gallery__item" href="/image/${id}">
+            document.querySelector('html').style.scrollBehavior = 'smooth';
-                    <div class="gallery__item-info">
-                        <p>${id}</p>\
-                        <h2>${fileName}</h2>
-                    </div>
-                    <span class="gallery__item-filter"></span>
-                    <img class="gallery__item-image" src="https://supersecreteuploadtest.leggy.dev/usr/images/${fileName}" onload="imgFade(this)" style="display:none;">
-                </a>
-                `;
-
-            $(imgDiv).hide().appendTo('#gallery').fadeIn(250);
         }
-
-        $.ajax({
-            url: '/fileList/original',
-            type: 'get',
-            success: function(response) {
-                imageList = response;
-                loadMore(0, 30);
-            }
-        });
-
-        $(window).scroll(function() {
-            if ($(window).height() + $(window).scrollTop() >= $(document).height() - 500) {
-                loadMore(imageIndex);
-            }
-        });
     </script>
 {% endblock %}

gallery/templates/layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gallery</title>
     <link rel="stylesheet" href="{{url_for('static', filename='theme/style.css')}}" defer>
-    <script src="{{url_for('static', filename='jquery-3.6.3.min.js')}}"></script>
+    <script src="{{url_for('static', filename='js/jquery-3.6.3.min.js')}}"></script>
 </head>
 <body>
     <div class="wrapper">
@@ -18,7 +18,7 @@
         {% block header %}{% endblock %}
 
         <div class="navigation">
-            <a href="{{url_for('gallery.index')}}" class="navigation-item {% block nav_home %}{% endblock %}">
+            <a href="{{url_for('gallery.index')}}{% block scrollPosition %}{% endblock %}" 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>
@@ -85,328 +85,13 @@
         </div>
     </div>
 
-    <script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-        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`;
-
-            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
-                document.querySelector('.jumpUp').style.opacity = 1;
-                document.querySelector('.jumpUp').style.right = "0.75rem";
-            } else {
-                document.querySelector('.jumpUp').style.opacity = 0;
-                document.querySelector('.jumpUp').style.right = "-3rem";
-            }
-        }
-
-        document.querySelector('.jumpUp').onclick = function() {
-            document.body.scrollTop = 0;
-            document.documentElement.scrollTop = 0;
-        }
-
-        function imgFade(obj) {
-            $(obj).animate({opacity: 1}, 500);
-            //$(obj).parent().style.backgroundColor = 'transparent';
-        }
-
-        function addNotification(text='Sample notification', type=4) {
-            var container = document.querySelector('.notifications');
-
-            // Create notification element
-            var div = document.createElement('div');
-            div.classList.add('sniffle__notification');
-            div.onclick = function() {
-                if (div.parentNode) {
-                    div.classList.add('sniffle__notification--hide');
-
-                    setTimeout(function() {
-                        container.removeChild(div);
-                    }, 500);
-                }
-            };
-
-            // Create icon element and append to notification
-            var icon = document.createElement('span');
-            icon.classList.add('sniffle__notification-icon');
-            switch (type) {
-                case 1:
-                    div.classList.add('sniffle__notification--success');
-                    icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
-                        <path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
-                    </svg>';
-                    break;
-                case 2:
-                    div.classList.add('sniffle__notification--error');
-                    icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
-                        <path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
-                    </svg>';
-                    break;
-                case 3:
-                    div.classList.add('sniffle__notification--warning');
-                    icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
-                        <path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
-                    </svg>';
-                    break;
-                default:
-                    div.classList.add('sniffle__notification--info');
-                    icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
-                        <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
-                    </svg>';
-                    break;
-            }
-            div.appendChild(icon);
-
-            // Create text element and append to notification
-            var description = document.createElement('span');
-            description.classList.add('sniffle__notification-text');
-            description.innerHTML = text;
-            div.appendChild(description);
-
-            // Create span to show time remaining
-            var timer = document.createElement('span');
-            timer.classList.add('sniffle__notification-time');
-            div.appendChild(timer);
-
-            // Append notification to container
-            container.appendChild(div);
-            setTimeout(function() {
-                div.classList.add('sniffle__notification-show');
-            }, 100);
-
-            // Remove notification after 5 seconds
-            setTimeout(function() {
-                if (div.parentNode) {
-                    div.classList.add('sniffle__notification--hide');
-
-                    setTimeout(function() {
-                        container.removeChild(div);
-                    }, 500);
-                }
-            }, 5000);
-        }
-
-        function popUpShow(title, body, actions, content) {
-            var popup = document.querySelector('.pop-up');
-            var popupContent = document.querySelector('.pop-up-content');
-            var popupActions = document.querySelector('.pop-up-controlls');
-
-            // Set tile and description
-            h3 = document.createElement('h3');
-            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 = '';
-            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');
-        }
-
-        function popupDissmiss() {
-            var popup = document.querySelector('.pop-up');
-            popup.classList.remove('pop-up__active');
-        }
-
     {% if g.user %}
-            function showUpload() {
+        <script src="{{ url_for('static', filename='js/upload.js') }}"></script>
-                popUpShow(
-                    'Upload funny stuff',
-                    'May the world see your stuff 👀',
-                    '',
-                    '<form onsubmit="return uploadFile(event)">\
-                        <input class="pop-up__input" type="file" id="file"/>\
-                        <input class="pop-up__input" type="text" placeholder="alt" id="alt"/>\
-                        <input class="pop-up__input" type="text" placeholder="description" id="description"/>\
-                        <input class="pop-up__input" type="text" placeholder="tags" id="tags"/>\
-                        <button class="pop-up__btn pop-up__btn-primary-fill">Upload</button>\
-                    </form>'
-                );
-            };
-            function uploadFile(){
-                // AJAX takes control of subby form
-                event.preventDefault();
-    
-                // Check for empty upload
-                if ($("#file").val() === "") {
-                    addNotification("Please select a file to upload", 2);
-                } else {
-                    // Make form
-                    var formData = new FormData();
-                    formData.append("file", $("#file").prop("files")[0]);
-                    formData.append("alt", $("#alt").val());
-                    formData.append("description", $("#description").val());
-                    formData.append("tags", $("#tags").val());
-                    formData.append("submit", $("#submit").val());
-    
-                    // Upload the information
-                    $.ajax({
-                        url: '/api/upload',
-                        type: 'post',
-                        data: formData,
-                        contentType: false,
-                        processData: false,
-                        success: function (response) {
-                            addNotification("File uploaded successfully!", 1);
-                            // popupDissmiss(); // Close popup
-                        },
-                        error: function (response) {
-                            switch (response.status) {
-                                case 500:
-                                    addNotification('Server exploded, F\'s in chat', 2);
-                                    break;
-                                case 400:
-                                case 404:
-                                    addNotification('Error uploading. Blame yourself', 2);
-                                    break;
-                                case 403:
-                                    addNotification('None but devils play past here...', 2);
-                                    break;
-                                case 413:
-                                    addNotification('File too large!!!!!!', 3);
-                                    break;
-                                default:
-                                    addNotification('Error uploading file, blame someone', 2);
-                                    break;
-                            }
-                        }
-                    });
-    
-                    // Empty values
-                    $("#file").val("");
-                    $("#alt").val("");
-                    $("#description").val("");
-                    $("#tags").val("");
-                }
-            };
     {% else %}
-            function showLogin() {
+        <script src="{{ url_for('static', filename='js/login.js') }}"></script>
-                popUpShow(
-                    'idk what to put here, just login please',
-                    'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
-                    '',
-                    '<form onsubmit="return login(event)">\
-                        <input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
-                        <input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
-                        <button class="pop-up__btn pop-up__btn-primary-fill">Login</button>\
-                    </form>'
-                );
-            };
-            function showRegister() {
-                popUpShow(
-                    'Who are you?',
-                    'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
-                    '',
-                    '<form onsubmit="return register(event)">\
-                        <input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
-                        <input class="pop-up__input" type="text" placeholder="E mail!" id="email"/>\
-                        <input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
-                        <input class="pop-up__input" type="password" placeholder="Passywassy again!" id="password-repeat"/>\
-                        <button class="pop-up__btn pop-up__btn-primary-fill">Register</button>\
-                    </form>'
-                );
-            };
-
-            function login(event) {
-                // AJAX takes control of subby form
-                event.preventDefault();
-
-                if ($("#username").val() === "" || $("#password").val() === "") {
-                    addNotification("Please fill in all fields", 3);
-                } else {
-                    // Make form
-                    var formData = new FormData();
-                    formData.append("username", $("#username").val());
-                    formData.append("password", $("#password").val());
-
-                    $.ajax({
-                        url: '/auth/login',
-                        type: 'post',
-                        data: formData,
-                        contentType: false,
-                        processData: false,
-                        success: function (response) {
-                            location.reload();
-                        },
-                        error: function (response) {
-                            switch (response.status) {
-                                case 500:
-                                    addNotification('Server exploded, F\'s in chat', 2);
-                                    break;
-                                case 403:
-                                    addNotification('None but devils play past here... Wrong information', 2);
-                                    break;
-                                default:
-                                    addNotification('Error logging in, blame someone', 2);
-                                    break;
-                            }
-                        }
-                    });
-                }
-            }
-            function register(obj) {
-                // AJAX takes control of subby form
-                event.preventDefault();
-
-                if ($("#username").val() === "" || $("#email").val() === "" || $("#password").val() === "" || $("#password-repeat").val() === "") {
-                    addNotification("Please fill in all fields", 3);
-                } else {
-                    // Make form
-                    var formData = new FormData();
-                    formData.append("username", $("#username").val());
-                    formData.append("email", $("#email").val());
-                    formData.append("password", $("#password").val());
-                    formData.append("password-repeat", $("#password-repeat").val());
-
-                    $.ajax({
-                        url: '/auth/register',
-                        type: 'post',
-                        data: formData,
-                        contentType: false,
-                        processData: false,
-                        success: function (response) {
-                            if (response === "gwa gwa") {
-                                addNotification('Registered successfully! Now please login to continue', 1);
-                                showLogin();
-                            } else {
-                                for (var i = 0; i < response.length; i++) {
-                                    addNotification(response[i], 2);
-                                }
-                            }
-                        },
-                        error: function (response) {
-                            switch (response.status) {
-                                case 500:
-                                    addNotification('Server exploded, F\'s in chat', 2);
-                                    break;
-                                case 403:
-                                    addNotification('None but devils play past here...', 2);
-                                    break;
-                                default:
-                                    addNotification('Error logging in, blame someone', 2);
-                                    break;
-                            }
-                        }
-                    });
-                }
-            }
     {% endif %}
-
+    <script>
         {% for message in get_flashed_messages() %}
             // Show notifications on page load
             addNotification('{{ message[0] }}', '{{ message[1] }}');

gallery/user/themes/default/animations.sass

@@ -1,13 +1,16 @@
 @keyframes imgLoading
     0%
         background-position: -468px 0
-
     100%
         background-position: 468px 0
 
 @keyframes notificationTimeout
     0%
         left: -100%
-
+        opacity: 1
+    90%
+        left: 0%
+        opacity: 1
     100%
         left: 0%
+        opacity: 0

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

@@ -19,7 +19,7 @@
     flex-direction: column
     gap: 0.3rem
 
-    z-index: 70
+    z-index: 621
 
 .sniffle__notification
     margin: 0
@@ -27,6 +27,7 @@
 
     width: 450px
     height: auto
+    max-height: 100px
 
     display: flex
     flex-direction: row
@@ -90,8 +91,9 @@
     left: 0px
 
     background-color: $white
+    opacity: 0
 
-    animation: notificationTimeout 4.9s linear
+    animation: notificationTimeout 5.1s linear
 
 .sniffle__notification--success
     @include notification($succes)
@@ -110,6 +112,9 @@
     transform: scale(1)
 
 .sniffle__notification--hide
+    margin-bottom: -0.3rem // compensate for gap
+    max-height: 0 // prevent divs from jumping when removed
+
     opacity: 0
     transform: translateX(100%)
 

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

@@ -28,7 +28,7 @@
     backdrop-filter: blur(1rem)
 
     opacity: 0
-    z-index: 68
+    z-index: 101
 
     transition: opacity 0.2s ease
 
@@ -224,26 +224,26 @@
 @media (max-width: $breakpoint)
     .pop-up
         width: 100%
-        height: calc(100vh - 3.5rem)
+        height: 100vh
-        height: calc(100dvh - 3.5rem)
+        height: 100dvh
 
         position: fixed
         left: 0
-        bottom: 3.5rem
+        bottom: 0
 
         backdrop-filter: blur(0.5rem)
 
     .pop-up-wrapper
-        width: 100%
+        width: calc(100vw - 1rem)
         max-height: calc(100vh - 1rem)
         max-height: calc(100dvh - 1rem)
 
-        left: 0
+        left: 0.5rem
-        bottom: 0
+        bottom: 0.5rem
 
         border-radius: $rad
         transform: translateY(5rem)
-        box-shadow: 0px 8px 0px $black2;
+        //box-shadow: 0px 8px 0px $black2;
 
     .pop-up-content
         max-height: 100%

setup.py

@@ -2,7 +2,7 @@ from setuptools import find_packages, setup
 
 setup(
     name='onlylegs',
-    version='250123',
+    version='260123',
     packages=find_packages(),
     include_package_data=True,
     install_requires=[