Added Next and Previous buttons to image view

Merged JS files
Removed Scene Type from metadata mapping
Added arrow to tool-tips

gallery/metadata/helpers.py

@@ -215,13 +215,6 @@ def scene_capture_type(value):
         return None
 
 
-def scene_type(value): # pylint: disable=W0613 # Itss fiiiineeee
-    """
-    Maps the value of the scene type to a human readable format
-    """
-    return 'Directly photographed image'
-
-
 def white_balance(value):
     """
     Maps the value of the white balance to a human readable format

gallery/metadata/mapping.py

@@ -40,7 +40,6 @@ CAMERA_MAPPING = {
     'MeteringMode':             ['Metering Mode', 'metering_mode'],
     'LightSource':              ['Light Source', 'light_source'],
     'SceneCaptureType':         ['Scene Capture Type', 'scene_capture_type'],
-    'SceneType':                ['Scene Type', 'scene_type'],
 }
 SOFTWARE_MAPPING = {
     'Software':     ['Software'],

gallery/routing.py

@@ -47,7 +47,21 @@ def image(image_id):
     author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
     img.author_username = author
     
-    return render_template('image.html', image=img, exif=img.image_exif)
+    next = db_session.query(db.Posts.id).filter(db.Posts.id > image_id).order_by(db.Posts.id.asc()).first()    
+    prev = db_session.query(db.Posts.id).filter(db.Posts.id < image_id).order_by(db.Posts.id.desc()).first()
+    
+    if next is not None:
+        next = next[0]
+    if prev is not None:
+        prev = prev[0]
+
+    return render_template('image.html',
+                           image=img,
+                           exif=img.image_exif,
+                           next=next,
+                           prev=prev,
+                           next_id=next,
+                           prev_id=prev)
 
 @blueprint.route('/group', methods=['GET', 'POST'])
 def groups():

gallery/static/js/login.js

@@ -1,108 +0,0 @@
-function showLogin() {
-    popUpShow(
-        'idk what to put here, just login please',
-        'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
-        '<button class="pop-up__btn pop-up__btn-primary-fill" form="loginForm" type="submit">Login</button>',
-        '<form id="loginForm"  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"/>\
-        </form>'
-    );
-};
-function showRegister() {
-    popUpShow(
-        'Who are you?',
-        'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
-        '<button class="pop-up__btn pop-up__btn-primary-fill" form="registerForm" type="submit">Register</button>',
-        '<form id="registerForm" 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"/>\
-        </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

@@ -35,3 +35,235 @@ for (let i = 0; i < times.length; i++) {
     // Convert to local time
     times[i].innerHTML = dateTime.toLocaleDateString() + ' ' + dateTime.toLocaleTimeString();
 }
+
+function uploadFile(){
+    // AJAX takes control of subby form
+    event.preventDefault();
+
+    const jobList = document.querySelector(".upload-jobs");
+
+    // Check for empty upload
+    if ($("#file").val() === "") {
+        addNotification("Please select a file to upload", 2);
+    } else {
+        // Make form
+        let 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,
+            beforeSend: function() {
+                jobContainer = document.createElement("div");
+                jobContainer.classList.add("job");
+
+                jobStatus = document.createElement("span");
+                jobStatus.classList.add("job__status");
+                jobStatus.innerHTML = "Uploading...";
+                
+                jobProgress = document.createElement("span");
+                jobProgress.classList.add("progress");
+
+                jobImg = document.createElement("img");
+                jobImg.src = URL.createObjectURL($("#file").prop("files")[0]);
+
+                jobImgFilter = document.createElement("span");
+                jobImgFilter.classList.add("img-filter");
+
+                jobContainer.appendChild(jobStatus);
+                jobContainer.appendChild(jobProgress);
+                jobContainer.appendChild(jobImg);
+                jobContainer.appendChild(jobImgFilter);
+                jobList.appendChild(jobContainer);
+            },
+            success: function (response) {
+                jobContainer.classList.add("success");
+                jobStatus.innerHTML = "Uploaded!";
+                if (!document.querySelector(".upload-panel").classList.contains("open")) {
+                    addNotification("Image uploaded successfully", 1);
+                }
+            },
+            error: function (response) {
+                jobContainer.classList.add("critical");
+                switch (response.status) {
+                    case 500:
+                        jobStatus.innerHTML = "Server exploded, F's in chat";
+                        break;
+                    case 400:
+                    case 404:
+                        jobStatus.innerHTML = "Error uploading. Blame yourself";
+                        break;
+                    case 403:
+                        jobStatus.innerHTML = "None but devils play past here...";
+                        break;
+                    case 413:
+                        jobStatus.innerHTML = "File too large!!!!!!";
+                        break;
+                    default:
+                        jobStatus.innerHTML = "Error uploading file, blame someone";
+                        break;
+                }
+                if (!document.querySelector(".upload-panel").classList.contains("open")) {
+                    addNotification("Error uploading file", 2);
+                }
+            },
+        });
+
+        // Empty values
+        $("#file").val("");
+        $("#alt").val("");
+        $("#description").val("");
+        $("#tags").val("");
+    }
+};
+
+function openUploadTab() {
+    // Stop scrolling
+    document.querySelector("html").style.overflow = "hidden";
+
+    // Open upload tab
+    const uploadTab = document.querySelector(".upload-panel");
+    uploadTab.style.display = "block";
+
+    setTimeout( function() {
+        uploadTab.classList.add("open");
+    }, 10);
+}
+
+function closeUploadTab() {
+    // un-Stop scrolling
+    document.querySelector("html").style.overflow = "auto";
+
+    // Close upload tab
+    const uploadTab = document.querySelector(".upload-panel");
+    uploadTab.classList.remove("open");
+
+    setTimeout( function() {
+        uploadTab.style.display = "none";
+    }, 250);
+}
+
+function toggleUploadTab() {
+    if (document.querySelector(".upload-panel").classList.contains("open")) {
+        closeUploadTab();
+    } else {
+        openUploadTab();
+    }
+}
+
+function showLogin() {
+    popUpShow(
+        'idk what to put here, just login please',
+        'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
+        '<button class="pop-up__btn pop-up__btn-primary-fill" form="loginForm" type="submit">Login</button>',
+        '<form id="loginForm"  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"/>\
+        </form>'
+    );
+};
+function showRegister() {
+    popUpShow(
+        'Who are you?',
+        'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
+        '<button class="pop-up__btn pop-up__btn-primary-fill" form="registerForm" type="submit">Register</button>',
+        '<form id="registerForm" 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"/>\
+        </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/ui/popup.js

@@ -1,4 +1,7 @@
 function popUpShow(title, body, actions, content) {
+    // Stop scrolling
+    document.querySelector("html").style.overflow = "hidden";
+
     var popup = document.querySelector('.pop-up');
     var popupContent = document.querySelector('.pop-up-content');
     var popupActions = document.querySelector('.pop-up-controlls');
@@ -30,6 +33,9 @@ function popUpShow(title, body, actions, content) {
 }
 
 function popupDissmiss() {
+    // un-Stop scrolling
+    document.querySelector("html").style.overflow = "auto";
+
     var popup = document.querySelector('.pop-up');
 
     popup.classList.add('pop-up__hide');

gallery/static/js/upload.js

@@ -1,107 +0,0 @@
-function uploadFile(){
-    // AJAX takes control of subby form
-    event.preventDefault();
-
-    const jobList = document.querySelector(".upload-jobs");
-
-    // Check for empty upload
-    if ($("#file").val() === "") {
-        addNotification("Please select a file to upload", 2);
-    } else {
-        // Make form
-        let 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,
-            beforeSend: function() {
-                jobContainer = document.createElement("div");
-                jobContainer.classList.add("job");
-
-                jobStatus = document.createElement("span");
-                jobStatus.classList.add("job__status");
-                jobStatus.innerHTML = "Uploading...";
-                
-                jobProgress = document.createElement("span");
-                jobProgress.classList.add("progress");
-
-                jobImg = document.createElement("img");
-                jobImg.src = URL.createObjectURL($("#file").prop("files")[0]);
-
-                jobImgFilter = document.createElement("span");
-                jobImgFilter.classList.add("img-filter");
-
-                jobContainer.appendChild(jobStatus);
-                jobContainer.appendChild(jobProgress);
-                jobContainer.appendChild(jobImg);
-                jobContainer.appendChild(jobImgFilter);
-                jobList.appendChild(jobContainer);
-            },
-            success: function (response) {
-                jobContainer.classList.add("success");
-                jobStatus.innerHTML = "Uploaded!";
-                if (!document.querySelector(".upload-panel").classList.contains("open")) {
-                    addNotification("Image uploaded successfully", 1);
-                }
-            },
-            error: function (response) {
-                jobContainer.classList.add("critical");
-                switch (response.status) {
-                    case 500:
-                        jobStatus.innerHTML = "Server exploded, F's in chat";
-                        break;
-                    case 400:
-                    case 404:
-                        jobStatus.innerHTML = "Error uploading. Blame yourself";
-                        break;
-                    case 403:
-                        jobStatus.innerHTML = "None but devils play past here...";
-                        break;
-                    case 413:
-                        jobStatus.innerHTML = "File too large!!!!!!";
-                        break;
-                    default:
-                        jobStatus.innerHTML = "Error uploading file, blame someone";
-                        break;
-                }
-                if (!document.querySelector(".upload-panel").classList.contains("open")) {
-                    addNotification("Error uploading file", 2);
-                }
-            },
-        });
-
-        // Empty values
-        $("#file").val("");
-        $("#alt").val("");
-        $("#description").val("");
-        $("#tags").val("");
-    }
-};
-
-function openUploadTab() {
-    // Open upload tab
-    const uploadTab = document.querySelector(".upload-panel");
-    uploadTab.style.display = "block";
-
-    setTimeout( function() {
-        uploadTab.classList.add("open");
-    }, 10);
-}
-
-function closeUploadTab() {
-    // Close upload tab
-    const uploadTab = document.querySelector(".upload-panel");
-    uploadTab.classList.remove("open");
-    setTimeout( function() {
-        uploadTab.style.display = "none";
-    }, 250);
-}

gallery/templates/image.html

@@ -24,24 +24,46 @@
         </div>
 
         <div class="pill-row" id="image-tools">
+            {% if next_id %}
+                <div>
+                    <a class="pill-item" href="{{ url_for('gallery.image', image_id=next_id) }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
+                            <path d="M3.414 7.657l3.95 3.95A1 1 0 0 1 5.95 13.02L.293 7.364a.997.997 0 0 1 0-1.414L5.95.293a1 1 0 1 1 1.414 1.414l-3.95 3.95H13a1 1 0 0 1 0 2H3.414z"></path>
+                        </svg>
+                        <span class="tool-tip">
+                            Previous
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                        </span>
+                    </a>
+                </div>
+            {% endif %}
             <div>
                 <button class="pill-item" id="img-fullscreen">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
                         <path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
                     </svg>
-                    <span class="tool-tip">Fullscreen</span>
+                    <span class="tool-tip">
+                        Fullscreen
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                    </span>
                 </button>
                 <button class="pill-item" id="img-share">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
                         <path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
                     </svg>
-                    <span class="tool-tip">Share</span>
+                    <span class="tool-tip">
+                        Share
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                    </span>
                 </button>
-                <a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
+                <a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}" download>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
                         <path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
                     </svg>
-                    <span class="tool-tip">Download</span>
+                    <span class="tool-tip">
+                        Download
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                    </span>
                 </a>
             </div>
             {% if g.user['id'] == image['author_id'] %}
@@ -50,16 +72,35 @@
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
                             <path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
                         </svg>
-                        <span class="tool-tip">Delete</span>
+                        <span class="tool-tip">
+                            Delete
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                        </span>
                     </button>
                     <button class="pill-item pill__critical" id="img-edit">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
                             <path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
                         </svg>
-                        <span class="tool-tip">Edit</span>
+                        <span class="tool-tip">
+                            Edit
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                        </span>
                     </button>
                 </div>
             {% endif %}
+            {% if prev_id %}
+                <div>
+                    <a class="pill-item" href="{{ url_for('gallery.image', image_id=prev_id) }}">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
+                            <path d="M10.586 5.657l-3.95-3.95A1 1 0 0 1 8.05.293l5.657 5.657a.997.997 0 0 1 0 1.414L8.05 13.021a1 1 0 1 1-1.414-1.414l3.95-3.95H1a1 1 0 1 1 0-2h9.586z"></path>
+                        </svg>
+                        <span class="tool-tip">
+                            Next
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
+                        </span>
+                    </a>
+                </div>
+            {% endif %}
         </div>
     
         <div class="info-container" id="image-info">
@@ -180,12 +221,19 @@
         }
 
         $('.image-fullscreen').click(function() {
+            // un-Stop scrolling
+            document.querySelector("html").style.overflow = "auto";
+
             $('.image-fullscreen').addClass('image-fullscreen__hide');
+
             setTimeout(function() {
                 $('.image-fullscreen').removeClass('image-fullscreen__active image-fullscreen__hide');
             }, 200);
         });
         $('#img-fullscreen').click(function() {
+            // Stop scrolling
+            document.querySelector("html").style.overflow = "hidden";
+            
             $('.image-fullscreen').addClass('image-fullscreen__active');
             
             if ($('.image-fullscreen img').attr('src') == '') {

gallery/templates/layout.html

@@ -13,10 +13,6 @@
     <!-- Main Script -->
     <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
 
-    <!-- Login and Upload -->
-    <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
-    <script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
-
     <!-- UI -->
     <script src="{{ url_for('static', filename='js/ui/popup.js') }}"></script>
     <script src="{{ url_for('static', filename='js/ui/notifications.js') }}"></script>
@@ -50,22 +46,31 @@
                 <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>
-                <span>Home</span>
+                <span>
+                    Home
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
+                </span>
             </a>
 
             <a href="{{url_for('gallery.groups')}}" class="navigation-item {% block nav_groups %}{% endblock %}">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="24" fill="currentColor">
                     <path d="M17 4H9.415l-.471-1.334A1.001 1.001 0 0 0 8 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-6.17-2H17a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h5c1.306 0 2.417.835 2.83 2z"></path>
                 </svg>
-                <span>Groups</span>
+                <span>
+                    Groups
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
+                </span>
             </a>
 
             {% if g.user %}
-                <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="openUploadTab()">
+                <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
                         <path d="M8 3.414v5.642a1 1 0 1 1-2 0V3.414L4.879 4.536A1 1 0 0 1 3.464 3.12L6.293.293a1 1 0 0 1 1.414 0l2.829 2.828A1 1 0 1 1 9.12 4.536L8 3.414zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
                     </svg>
-                    <span>Upload</span>
+                    <span>
+                        Upload
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
+                    </span>
                 </button>
             {% endif %}
 
@@ -76,21 +81,30 @@
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="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-14a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V8a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V8a2 2 0 0 0-2-2zM5.91 16.876a8.033 8.033 0 0 1-1.58-1.232 5.57 5.57 0 0 1 2.204-1.574 1 1 0 1 1 .733 1.86c-.532.21-.993.538-1.358.946zm8.144.022a3.652 3.652 0 0 0-1.41-.964 1 1 0 1 1 .712-1.868 5.65 5.65 0 0 1 2.284 1.607 8.032 8.032 0 0 1-1.586 1.225z"></path>
                     </svg>
-                    <span>Profile</span>
+                    <span>
+                        Profile
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
+                    </span>
                 </a>
             
                 <a href="{{url_for('settings.general')}}" class="navigation-item {% block nav_settings %}{% endblock %}">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -2 24 24" width="24" fill="currentColor">
                         <path d="M9.815 3.094a3.467 3.467 0 0 1-2.78-1.09l-.084-.001a3.467 3.467 0 0 1-2.781 1.09 3.477 3.477 0 0 1-1.727 2.51 3.471 3.471 0 0 1 0 2.794 3.477 3.477 0 0 1 1.727 2.51 3.467 3.467 0 0 1 2.78 1.09h.084a3.467 3.467 0 0 1 2.78-1.09 3.477 3.477 0 0 1 1.727-2.51 3.471 3.471 0 0 1 0-2.794 3.477 3.477 0 0 1-1.726-2.51zM14 5.714a1.474 1.474 0 0 0 0 2.572l-.502 1.684a1.473 1.473 0 0 0-1.553 2.14l-1.443 1.122A1.473 1.473 0 0 0 8.143 14l-2.304-.006a1.473 1.473 0 0 0-2.352-.765l-1.442-1.131A1.473 1.473 0 0 0 .5 9.968L0 8.278a1.474 1.474 0 0 0 0-2.555l.5-1.69a1.473 1.473 0 0 0 1.545-2.13L3.487.77A1.473 1.473 0 0 0 5.84.005L8.143 0a1.473 1.473 0 0 0 2.358.768l1.444 1.122a1.473 1.473 0 0 0 1.553 2.14L14 5.714zm-5.812 9.198a7.943 7.943 0 0 0 2.342-.73 3.468 3.468 0 0 1-.087.215 3.477 3.477 0 0 1 1.727 2.51 3.467 3.467 0 0 1 2.78 1.09h.084a3.467 3.467 0 0 1 2.78-1.09 3.477 3.477 0 0 1 1.727-2.51 3.471 3.471 0 0 1 0-2.794 3.477 3.477 0 0 1-1.726-2.51 3.467 3.467 0 0 1-2.78-1.09h-.084l-.015.016a8.077 8.077 0 0 0 .002-2.016L16.144 6a1.473 1.473 0 0 0 2.358.768l1.444 1.122a1.473 1.473 0 0 0 1.553 2.14L22 11.714a1.474 1.474 0 0 0 0 2.572l-.502 1.684a1.473 1.473 0 0 0-1.553 2.14l-1.443 1.122a1.473 1.473 0 0 0-2.359.768l-2.304-.006a1.473 1.473 0 0 0-2.352-.765l-1.442-1.131a1.473 1.473 0 0 0-1.545-2.13l-.312-1.056zM7 10a3 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 2zm8 8a3 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>
                     </svg>
-                    <span>Settings</span>
+                    <span>
+                        Settings
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
+                    </span>
                 </a>
             {% else %}
                 <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -3 24 24" fill="currentColor">
                         <path d="M6.641 9.828H1a1 1 0 1 1 0-2h5.641l-1.12-1.12a1 1 0 0 1 1.413-1.415L9.763 8.12a.997.997 0 0 1 0 1.415l-2.829 2.828A1 1 0 0 1 5.52 10.95l1.121-1.122zM13 0a1 1 0 0 1 1 1v16a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"></path>
                     </svg>
-                    <span>Login</span>
+                    <span>
+                        Login
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
+                    </span>
                 </button>
             {% endif %}
         </div>
@@ -100,21 +114,23 @@
             {% endblock %}
         </div>
 
-        <div class="upload-panel">
+        {% if g.user %}
-            <span class="click-off" onclick="closeUploadTab()"></span>
+            <div class="upload-panel">
-            <div class="container">
+                <span class="click-off" onclick="closeUploadTab()"></span>
-                <h3>Upload stuffs</h3>
+                <div class="container">
-                <p>May the world see your stuff 👀</p>
+                    <h3>Upload stuffs</h3>
-                <form id="uploadForm" onsubmit="return uploadFile(event)">
+                    <p>May the world see your stuff 👀</p>
-                    <input type="file" id="file"/>
+                    <form id="uploadForm" onsubmit="return uploadFile(event)">
-                    <input type="text" placeholder="alt" id="alt"/>
+                        <input type="file" id="file"/>
-                    <input type="text" placeholder="description" id="description"/>
+                        <input type="text" placeholder="alt" id="alt"/>
-                    <input type="text" placeholder="tags" id="tags"/>
+                        <input type="text" placeholder="description" id="description"/>
-                    <button type="submit">Upload</button>
+                        <input type="text" placeholder="tags" id="tags"/>
-                </form>
+                        <button type="submit">Upload</button>
-                <div class="upload-jobs"></div>
+                    </form>
+                    <div class="upload-jobs"></div>
+                </div>
             </div>
-        </div>
+        {% endif %}
     </div>
 
     <script>

gallery/themes/default/components/buttons/pill.sass

@@ -47,7 +47,7 @@
 
         .tool-tip
             opacity: 1
-            top: -2.5rem
+            top: -2.7rem
             transform: translateX(calc(-50% + 1.25rem ))
 
 .pill__critical
@@ -92,3 +92,19 @@
     transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1)
 
     pointer-events: none
+
+    svg
+        margin: 0
+        font-size: 1rem
+
+        width: 0.75rem
+        height: 0.75rem
+
+        display: block
+
+        position: absolute
+        left: 50%
+        bottom: -0.46rem
+        transform: translateX(-50%)
+
+        color: $black2

gallery/themes/default/components/navigation.sass

@@ -52,7 +52,7 @@
 
     text-decoration: none
 
-    svg
+    > svg
         margin: 0
         font-size: 1.5rem
         color: $white
@@ -81,26 +81,42 @@
 
         pointer-events: none
 
+        svg
+            margin: 0
+            font-size: 1rem
+
+            width: 0.75rem
+            height: 0.75rem
+
+            display: block
+
+            position: absolute
+            top: 50%
+            left: -0.45rem
+            transform: translateY(-50%)
+
+            color: $black2
+
     &:hover
         background-color: $black2
 
-        svg
+        > svg
             color: $primary
 
         span
             opacity: 1
-            left: 3.8rem
+            left: 3.9rem
 
 .navigation-item__selected
     background: $primary
 
-    svg
+    > svg
         color: $black
 
     &:hover
         background: $primary
 
-        svg
+        > svg
             color: $white