diff --git a/gallery/static/js/login.js b/gallery/static/js/login.js index 08964da..363d088 100644 --- a/gallery/static/js/login.js +++ b/gallery/static/js/login.js @@ -1,14 +1,43 @@ // Function to show login function showLogin() { + // Create elements + cancelBtn = document.createElement('button'); + cancelBtn.classList.add('btn-block'); + cancelBtn.innerHTML = 'nuuuuuuuu'; + cancelBtn.onclick = popupDissmiss; + + loginBtn = document.createElement('button'); + loginBtn.classList.add('btn-block'); + loginBtn.classList.add('primary'); + loginBtn.innerHTML = 'Login'; + loginBtn.type = 'submit'; + loginBtn.setAttribute('form', 'loginForm'); + + // Create form + loginForm = document.createElement('form'); + loginForm.id = 'loginForm'; + loginForm.setAttribute('onsubmit', 'return login(event);'); + + usernameInput = document.createElement('input'); + usernameInput.classList.add('input-block'); + usernameInput.type = 'text'; + usernameInput.placeholder = 'Namey'; + usernameInput.id = 'username'; + + passwordInput = document.createElement('input'); + passwordInput.classList.add('input-block'); + passwordInput.type = 'password'; + passwordInput.placeholder = 'Passywassy'; + passwordInput.id = 'password'; + + loginForm.appendChild(usernameInput); + loginForm.appendChild(passwordInput); + popUpShow( 'Login!', 'Need an account? Register!', - '' + - '', - '
' + - '' + - '' + - '
' + loginForm, + [cancelBtn, loginBtn] ); } // Function to login @@ -29,16 +58,13 @@ function login(event) { formData.append("username", formUsername); formData.append("password", formPassword); - $.ajax({ - url: '/auth/login', - type: 'post', - data: formData, - contentType: false, - processData: false, - success: function (response) { + fetch('/auth/login', { + method: 'POST', + body: formData + }).then(response => { + if (response.status === 200) { location.reload(); - }, - error: function (response) { + } else { switch (response.status) { case 500: addNotification('Server exploded, F\'s in chat', 2); @@ -51,25 +77,68 @@ function login(event) { break; } } + }).catch(error => { + addNotification('Error logging in, blame someone', 2); }); } // Function to show register function showRegister() { + // Create buttons + cancelBtn = document.createElement('button'); + cancelBtn.classList.add('btn-block'); + cancelBtn.innerHTML = 'nuuuuuuuu'; + cancelBtn.onclick = popupDissmiss; + + registerBtn = document.createElement('button'); + registerBtn.classList.add('btn-block'); + registerBtn.classList.add('primary'); + registerBtn.innerHTML = 'Register'; + registerBtn.type = 'submit'; + registerBtn.setAttribute('form', 'registerForm'); + + // Create form + registerForm = document.createElement('form'); + registerForm.id = 'registerForm'; + registerForm.setAttribute('onsubmit', 'return register(event);'); + + usernameInput = document.createElement('input'); + usernameInput.classList.add('input-block'); + usernameInput.type = 'text'; + usernameInput.placeholder = 'Namey'; + usernameInput.id = 'username'; + + emailInput = document.createElement('input'); + emailInput.classList.add('input-block'); + emailInput.type = 'text'; + emailInput.placeholder = 'E mail!'; + emailInput.id = 'email'; + + passwordInput = document.createElement('input'); + passwordInput.classList.add('input-block'); + passwordInput.type = 'password'; + passwordInput.placeholder = 'Passywassy'; + passwordInput.id = 'password'; + + passwordInputRepeat = document.createElement('input'); + passwordInputRepeat.classList.add('input-block'); + passwordInputRepeat.type = 'password'; + passwordInputRepeat.placeholder = 'Passywassy again!'; + passwordInputRepeat.id = 'password-repeat'; + + registerForm.appendChild(usernameInput); + registerForm.appendChild(emailInput); + registerForm.appendChild(passwordInput); + registerForm.appendChild(passwordInputRepeat); + popUpShow( 'Who are you?', 'Already have an account? Login!', - '\ - ', - '
\ - \ - \ - \ - \ -
' + registerForm, + [cancelBtn, registerBtn] ); } // Function to register -function register(obj) { +function register(event) { // AJAX takes control of subby form event.preventDefault(); @@ -90,13 +159,12 @@ function register(obj) { formData.append("password", formPassword); formData.append("password-repeat", formPasswordRepeat); - $.ajax({ - url: '/auth/register', - type: 'post', - data: formData, - contentType: false, - processData: false, - success: function (response) { + // Send form to server + fetch('/auth/login', { + method: 'POST', + body: formData + }).then(response => { + if (response.status === 200) { if (response === "gwa gwa") { addNotification('Registered successfully! Now please login to continue', 1); showLogin(); @@ -105,19 +173,20 @@ function register(obj) { addNotification(response[i], 2); } } - }, - error: function (response) { + } else { switch (response.status) { case 500: addNotification('Server exploded, F\'s in chat', 2); break; case 403: - addNotification('None but devils play past here...', 2); + addNotification('None but devils play past here... Wrong information', 2); break; default: addNotification('Error logging in, blame someone', 2); break; } } + }).catch(error => { + addNotification('Error logging in, blame someone', 2); }); } diff --git a/gallery/static/js/main.js b/gallery/static/js/main.js index e223086..452587f 100644 --- a/gallery/static/js/main.js +++ b/gallery/static/js/main.js @@ -2,34 +2,6 @@ function imgFade(obj, time = 250) { $(obj).animate({ opacity: 1 }, time); } -// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color -function colourContrast(bgColor, lightColor, darkColor, threshold = 0.179) { - // if color is in hex format then convert to rgb else parese rgb - let r = 0 - let g = 0 - let b = 0 - if (bgColor.charAt(0) === '#') { - const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor; - r = parseInt(color.substring(0, 2), 16); // hexToR - g = parseInt(color.substring(2, 4), 16); // hexToG - b = parseInt(color.substring(4, 6), 16); // hexToB - } else { - const color = bgColor.replace('rgb(', '').replace(')', '').split(','); - r = color[0]; - g = color[1]; - b = color[2]; - } - - const uicolors = [r / 255, g / 255, b / 255]; - const c = uicolors.map((col) => { - if (col <= 0.03928) { - return col / 12.92; - } - return Math.pow((col + 0.055) / 1.055, 2.4); - }); - const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]); - return (L > threshold) ? darkColor : lightColor; -} // Lazy load images when they are in view function loadOnView() { let lazyLoad = document.querySelectorAll('#lazy-load'); @@ -47,14 +19,6 @@ function loadOnView() { window.onload = function () { loadOnView(); - const darkColor = 'rgb(var(--black))'; - const lightColor = 'rgb(var(--white))'; - let contrastCheck = document.querySelectorAll('#contrast-check'); - for (let i = 0; i < contrastCheck.length; i++) { - let bgColor = contrastCheck[i].getAttribute('data-color'); - contrastCheck[i].style.color = colourContrast(bgColor, lightColor, darkColor); - } - let times = document.querySelectorAll('.time'); for (let i = 0; i < times.length; i++) { // Remove milliseconds @@ -97,9 +61,10 @@ window.onload = function () { } infoButton.onclick = function () { popUpShow('OnlyLegs on Flask', - 'Using Phosphoricons and Manrope
' + + 'Using Phosphoricons and ' + + 'Manrope
' + 'Made by Fluffy and others with ❤️
' + - 'V23.03.26'); + 'V23.03.30'); } } }; diff --git a/gallery/static/js/notifications.js b/gallery/static/js/notifications.js index 49a8242..80d75eb 100644 --- a/gallery/static/js/notifications.js +++ b/gallery/static/js/notifications.js @@ -1,67 +1,69 @@ -function addNotification(text='Sample notification', type=4) { - let container = document.querySelector('.notifications'); +function addNotification(notificationText, notificationLevel) { + let notificationContainer = document.querySelector('.notifications'); + + // Set the different icons for the different notification levels + let successIcon = ''; + let criticalIcon = ''; + let warningIcon = ''; + let infoIcon = ''; // Create notification element - let div = document.createElement('div'); - div.classList.add('sniffle__notification'); - div.onclick = function() { - if (div.parentNode) { - div.classList.add('hide'); + let notification = document.createElement('div'); + notification.classList.add('sniffle__notification'); + notification.onclick = function() { + if (notification) { + notification.classList.add('hide'); setTimeout(function() { - container.removeChild(div); + notificationContainer.removeChild(notification); }, 500); } }; // Create icon element and append to notification - let icon = document.createElement('span'); - icon.classList.add('sniffle__notification-icon'); - switch (type) { - case 1: - div.classList.add('success'); - icon.innerHTML = ''; - break; - case 2: - div.classList.add('critical'); - icon.innerHTML = ''; - break; - case 3: - div.classList.add('warning'); - icon.innerHTML = ''; - break; - default: - div.classList.add('info'); - icon.innerHTML = ''; - break; + let iconElement = document.createElement('span'); + iconElement.classList.add('sniffle__notification-icon'); + notification.appendChild(iconElement); + // Set the icon based on the notification level, not pretty but it works :3 + if (notificationLevel == 1) { + notification.classList.add('success'); + iconElement.innerHTML = successIcon; + } else if (notificationLevel == 2) { + notification.classList.add('critical'); + iconElement.innerHTML = criticalIcon; + } else if (notificationLevel == 3) { + notification.classList.add('warning'); + iconElement.innerHTML = warningIcon; + } else { + notification.classList.add('info'); + iconElement.innerHTML = infoIcon; } - div.appendChild(icon); // Create text element and append to notification let description = document.createElement('span'); description.classList.add('sniffle__notification-text'); - description.innerHTML = text; - div.appendChild(description); + description.innerHTML = notificationText; + notification.appendChild(description); // Create span to show time remaining let timer = document.createElement('span'); timer.classList.add('sniffle__notification-time'); - div.appendChild(timer); + notification.appendChild(timer); // Append notification to container - container.appendChild(div); - setTimeout(function() { - div.classList.add('show'); - }, 100); + notificationContainer.appendChild(notification); + setTimeout(function() { notification.classList.add('show'); }, 5); // Remove notification after 5 seconds setTimeout(function() { - if (div.parentNode) { - div.classList.add('hide'); + if (notification) { + notification.classList.add('hide'); setTimeout(function() { - container.removeChild(div); + notificationContainer.removeChild(notification); }, 500); } }, 5000); -} \ No newline at end of file +} + +// uwu diff --git a/gallery/static/js/popup.js b/gallery/static/js/popup.js index e58e047..301c5b2 100644 --- a/gallery/static/js/popup.js +++ b/gallery/static/js/popup.js @@ -1,42 +1,47 @@ -function popUpShow(title, body, actions='', content='') { - // Stop scrolling - document.querySelector("html").style.overflow = "hidden"; - +function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null) { // Get popup elements - let popup = document.querySelector('.pop-up'); - let popupContent = document.querySelector('.pop-up-content'); - let popupActions = document.querySelector('.pop-up-controlls'); - - // Set popup content - popupContent.innerHTML = `

${title}

${body}

${content}`; + let popupSelector = document.querySelector('.pop-up'); + let headerSelector = document.querySelector('.pop-up-header'); + let actionsSelector = document.querySelector('.pop-up-controlls'); + + // Clear popup elements + headerSelector.innerHTML = ''; + actionsSelector.innerHTML = ''; + + // Set popup header and subtitle + let titleElement = document.createElement('h2'); + titleElement.innerHTML = titleText; + headerSelector.appendChild(titleElement); + + let subtitleElement = document.createElement('p'); + subtitleElement.innerHTML = subtitleText; + headerSelector.appendChild(subtitleElement); + + if (bodyContent) { + headerSelector.appendChild(bodyContent); + } // Set buttons that will be displayed - popupActions.innerHTML = actions; + if (userActions) { + // for each user action, add the element + for (let i = 0; i < userActions.length; i++) { + let action = userActions[i]; + actionsSelector.appendChild(action); + } + } else { + actionsSelector.innerHTML = ''; + } - // Show popup - popup.style.display = 'block'; - setTimeout(function() { - popup.classList.add('active') - }, 10); + // Stop scrolling and show popup + document.querySelector("html").style.overflow = "hidden"; + popupSelector.style.display = 'block'; + setTimeout(function() { popupSelector.classList.add('active') }, 5); // 2ms delay to allow for css transition >:C } function popupDissmiss() { - // un-Stop scrolling + let popupSelector = document.querySelector('.pop-up'); + document.querySelector("html").style.overflow = "auto"; - - let popup = document.querySelector('.pop-up'); - - popup.classList.remove('active'); - - setTimeout(function() { - popup.style.display = 'none'; - }, 200); + popupSelector.classList.remove('active'); + setTimeout(function() { popupSelector.style.display = 'none'; }, 200); } - -document.addEventListener('keydown', function(event) { - if (event.key === 'Escape') { - if (document.querySelector('.pop-up').classList.contains('active')) { - popupDissmiss(); - } - } -}); \ No newline at end of file diff --git a/gallery/static/js/uploadTab.js b/gallery/static/js/uploadTab.js index 27bb9b7..029e995 100644 --- a/gallery/static/js/uploadTab.js +++ b/gallery/static/js/uploadTab.js @@ -1,196 +1,227 @@ -window.addEventListener("dragover",(event) => { - event.preventDefault(); -},false); -window.addEventListener("drop",(event) => { - event.preventDefault(); -},false); +// Remove default events on file drop, otherwise the browser will open the file +window.addEventListener("dragover", (event) => { + event.preventDefault(); +}, false); +window.addEventListener("drop", (event) => { + event.preventDefault(); +}, false); -function fileChanged(obj) { - document.querySelector('.fileDrop-block').classList.remove('error'); - - if ($(obj).val() === '') { - document.querySelector('.fileDrop-block').classList.remove('active'); - document.querySelector('.fileDrop-block .status').innerHTML = 'Choose or Drop file'; - } else { - document.querySelector('.fileDrop-block').classList.add('active'); - document.querySelector('.fileDrop-block .status').innerHTML = obj.files[0].name; - } -} - -document.addEventListener('DOMContentLoaded', function() { - // Function to upload images - const uploadForm = document.querySelector('#uploadForm'); - const fileDrop = document.querySelector('.fileDrop-block'); - const fileDropTitle = fileDrop.querySelector('.status'); - const fileUpload = uploadForm.querySelector('#file'); - - - $(fileUpload).val(''); - - - // Choose or drop file button - ['dragover', 'dragenter'].forEach(eventName => { - fileDrop.addEventListener(eventName, fileActivate, false); - }); - ['dragleave', 'drop'].forEach(eventName => { - fileDrop.addEventListener(eventName, fileDefault, false); - }) - - // Drop file into box - fileDrop.addEventListener('drop', fileDropHandle, false); - - - // Edging the file plunge :3 - function fileActivate(event) { - fileDrop.classList.remove('error'); - fileDrop.classList.add('edging'); - fileDropTitle.innerHTML = 'Drop to upload!'; - } - function fileDefault(event) { - fileDrop.classList.remove('error'); - fileDrop.classList.remove('edging'); - fileDropTitle.innerHTML = 'Choose or Drop file'; - } - - function fileDropHandle(event) { - event.preventDefault() - fileUpload.files = event.dataTransfer.files; - - fileDropTitle.innerHTML = fileUpload.files[0].name; - fileDrop.classList.add('active'); - } - - - uploadForm.addEventListener('submit', (event) => { - // AJAX takes control of subby form - event.preventDefault() - - const jobList = document.querySelector(".upload-jobs"); - - // Check for empty upload - if ($(fileUpload).val() === '') { - fileDrop.classList.add('error'); - fileDropTitle.innerHTML = 'No file selected!'; - } 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 - $(fileUpload).val(''); - $("#alt").val(''); - $("#description").val(''); - $("#tags").val(''); - - // Reset drop - fileDrop.classList.remove('active'); - fileDropTitle.innerHTML = 'Choose or Drop file'; - } - }); -}); // open upload tab function openUploadTab() { - // Stop scrolling + let uploadTab = document.querySelector(".upload-panel"); + + // Stop scrolling and open upload tab document.querySelector("html").style.overflow = "hidden"; - document.querySelector(".content").tabIndex = "-1"; - - // Open upload tab - const uploadTab = document.querySelector(".upload-panel"); uploadTab.style.display = "block"; - - setTimeout(function () { - uploadTab.classList.add("open"); - }, 10); + setTimeout(function () { uploadTab.classList.add("open"); }, 5); } // close upload tab function closeUploadTab() { - // un-Stop scrolling + let uploadTab = document.querySelector(".upload-panel"); + + // un-Stop scrolling and close upload tab document.querySelector("html").style.overflow = "auto"; - document.querySelector(".content").tabIndex = ""; - - // Close upload tab - const uploadTab = document.querySelector(".upload-panel"); uploadTab.classList.remove("open"); - - setTimeout(function () { - uploadTab.style.display = "none"; - }, 250); + setTimeout(function () { uploadTab.style.display = "none"; }, 250); } // toggle upload tab function toggleUploadTab() { - if (document.querySelector(".upload-panel").classList.contains("open")) { + let uploadTab = document.querySelector(".upload-panel"); + + if (uploadTab.classList.contains("open")) { closeUploadTab(); } else { openUploadTab(); } } + +// Edging the file plunge :3 +function fileActivate(event) { + event.preventDefault() + + let fileDrop = document.querySelector('.fileDrop-block'); + let fileDropTitle = fileDrop.querySelector('.status'); + + fileDrop.classList.remove('error'); + fileDrop.classList.add('edging'); + fileDropTitle.innerHTML = 'Drop to upload!'; +} +function fileDefault() { + let fileDrop = document.querySelector('.fileDrop-block'); + let fileDropTitle = fileDrop.querySelector('.status'); + + fileDrop.classList.remove('error'); + fileDrop.classList.remove('edging'); + fileDropTitle.innerHTML = 'Choose or Drop file'; +} + +function fileDropHandle(event) { + event.preventDefault() + + let fileDrop = document.querySelector('.fileDrop-block'); + let fileUpload = fileDrop.querySelector('#file'); + + fileUpload.files = event.dataTransfer.files; + + fileChanged(); +} + +function fileChanged() { + let dropBlock = document.querySelector('.fileDrop-block'); + let dropBlockStatus = dropBlock.querySelector('.status'); + let dropBlockInput = dropBlock.querySelector('#file'); + + if (dropBlockInput.value !== "") { + dropBlock.classList.add('active'); + dropBlockStatus.innerHTML = dropBlockInput.files[0].name; + } else { + fileDefault(); + } +} + +function clearUpload() { + let fileDrop = document.querySelector('#uploadForm'); + + let fileUpload = fileDrop.querySelector('#file'); + let fileAlt = fileDrop.querySelector('#alt'); + let fileDescription = fileDrop.querySelector('#description'); + let fileTags = fileDrop.querySelector('#tags'); + + fileUpload.value = ""; + fileAlt.value = ""; + fileDescription.value = ""; + fileTags.value = ""; +} + + +function createJon(file) { + 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); + + jobImgFilter = document.createElement("span"); + jobImgFilter.classList.add("img-filter"); + + jobContainer.appendChild(jobStatus); + jobContainer.appendChild(jobProgress); + jobContainer.appendChild(jobImg); + jobContainer.appendChild(jobImgFilter); + + return jobContainer; +} + + +document.addEventListener('DOMContentLoaded', function() { + // Function to upload images + let uploadForm = document.querySelector('#uploadForm'); + let fileDrop = document.querySelector('.fileDrop-block'); + let fileDropTitle = fileDrop.querySelector('.status'); + let jobList = document.querySelector(".upload-jobs"); + + let fileUpload = uploadForm.querySelector('#file'); + let fileAlt = uploadForm.querySelector('#alt'); + let fileDescription = uploadForm.querySelector('#description'); + let fileTags = uploadForm.querySelector('#tags'); + + + clearUpload(); + fileDefault(); + + + // Drag over/enter event + fileDrop.addEventListener('dragover', fileActivate, false); + fileDrop.addEventListener('dragenter', fileActivate, false); + // Drag out + fileDrop.addEventListener('dragleave', fileDefault, false); + // Drop file into box + fileDrop.addEventListener('drop', fileDropHandle, false); + // File upload change + fileUpload.addEventListener('change', fileChanged, false); + + + // Submit form + uploadForm.addEventListener('submit', (event) => { + // AJAX takes control of subby form + event.preventDefault() + + if (fileUpload.value === "") { + fileDrop.classList.add('error'); + fileDropTitle.innerHTML = 'No file selected!'; + // Stop the function + return; + } + + // Make form + let formData = new FormData(); + + formData.append("file", fileUpload.files[0]); + formData.append("alt", fileAlt.value); + formData.append("description", fileDescription.value); + formData.append("tags", fileTags.value); + + jobItem = createJon(fileUpload.files[0]); + jobStatus = jobItem.querySelector(".job__status"); + + // Upload the information + $.ajax({ + url: '/api/upload', + type: 'post', + data: formData, + contentType: false, + processData: false, + beforeSend: function () { + // Add job to list + jobList.appendChild(jobItem); + }, + success: function (response) { + jobItem.classList.add("success"); + jobStatus.innerHTML = "Uploaded successfully"; + if (!document.querySelector(".upload-panel").classList.contains("open")) { + addNotification("Image uploaded successfully", 1); + } + }, + error: function (response) { + jobItem.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); + } + }, + }); + + clearUpload(); + + // Reset drop + fileDrop.classList.remove('active'); + fileDropTitle.innerHTML = 'Choose or Drop file'; + }); +}); diff --git a/gallery/templates/image.html b/gallery/templates/image.html index 87d4cf3..45f4a1d 100644 --- a/gallery/templates/image.html +++ b/gallery/templates/image.html @@ -16,15 +16,13 @@ }, 200); } function imageFullscreenOn() { - document.querySelector("html").style.overflow = "hidden"; let fullscreen = document.querySelector('.image-fullscreen') fullscreen.querySelector('img').src = '{{ url_for('api.file', file_name=image.file_name) }}'; - fullscreen.style.display = 'flex'; - setTimeout(function() { - fullscreen.classList.add('active'); - }, 10); + document.querySelector("html").style.overflow = "hidden"; + fullscreen.style.display = 'flex'; + setTimeout(function() { fullscreen.classList.add('active'); }, 5); } function imageShare() { try { @@ -36,12 +34,23 @@ } {% if g.user['id'] == image['author_id'] %} + cancelBtn = document.createElement('button'); + cancelBtn.classList.add('btn-block'); + cancelBtn.innerHTML = 'nuuuuuuuu'; + cancelBtn.onclick = popupDissmiss; + + deleteBtn = document.createElement('button'); + deleteBtn.classList.add('btn-block'); + deleteBtn.classList.add('critical'); + deleteBtn.innerHTML = 'Dewww eeeet!'; + deleteBtn.onclick = deleteConfirm; + function imageDelete() { popUpShow( 'DESTRUCTION!!!!!!', 'Do you want to delete this image along with all of its data??? This action is irreversible!', - '' + - '' + null, + [cancelBtn, deleteBtn] ); } function deleteConfirm() { diff --git a/gallery/templates/index.html b/gallery/templates/index.html index a301a26..c06ed8b 100644 --- a/gallery/templates/index.html +++ b/gallery/templates/index.html @@ -34,7 +34,7 @@ {% endif %} {% endblock %} {% block script %} - + {% block script %}{% endblock %} \ No newline at end of file diff --git a/gallery/themes/default/components/elements/notification.sass b/gallery/themes/default/components/elements/notification.sass index 0cb3167..76de391 100644 --- a/gallery/themes/default/components/elements/notification.sass +++ b/gallery/themes/default/components/elements/notification.sass @@ -120,12 +120,12 @@ width: calc(100vw - 0.6rem) height: auto + .sniffle__notification + width: 100% + &.hide opacity: 0 transform: translateY(-5rem) - - .sniffle__notification - width: 100% .sniffle__notification-time width: 100% diff --git a/gallery/themes/default/components/elements/pop-up.sass b/gallery/themes/default/components/elements/pop-up.sass index 87c2703..880d4f7 100644 --- a/gallery/themes/default/components/elements/pop-up.sass +++ b/gallery/themes/default/components/elements/pop-up.sass @@ -38,14 +38,14 @@ display: flex flex-direction: column - background-color: RGB($bg-100) + background-color: RGB($bg-200) border-radius: $rad overflow: hidden z-index: +2 transition: transform 0.2s $animation-smooth - .pop-up-content + .pop-up-header margin: 0 padding: 1rem @@ -61,7 +61,7 @@ text-size-adjust: auto text-overflow: ellipsis - h3 + h2, h3 margin: 0 width: 100% @@ -143,7 +143,7 @@ justify-content: flex-end gap: 0.25rem - background-color: RGB($bg-200) + background-color: RGB($bg-100) &.active opacity: 1 diff --git a/gallery/themes/default/components/navigation.sass b/gallery/themes/default/components/navigation.sass index 64e2613..88cda84 100644 --- a/gallery/themes/default/components/navigation.sass +++ b/gallery/themes/default/components/navigation.sass @@ -125,7 +125,7 @@ height: calc(100% - 6px) background-color: RGB($primary) - border-radius: $rad-inner + border-radius: 0 $rad-inner $rad-inner 0 @media (max-width: $breakpoint) .navigation @@ -164,3 +164,5 @@ width: 100% height: 3px + + border-radius: $rad-inner \ No newline at end of file diff --git a/poetry.lock b/poetry.lock index d2c5a16..534c7c5 100644 --- a/poetry.lock +++ b/poetry.lock @@ -2,14 +2,14 @@ [[package]] name = "astroid" -version = "2.15.0" +version = "2.15.1" description = "An abstract syntax tree for Python with inference support." category = "main" optional = false python-versions = ">=3.7.2" files = [ - {file = "astroid-2.15.0-py3-none-any.whl", hash = "sha256:e3e4d0ffc2d15d954065579689c36aac57a339a4679a679579af6401db4d3fdb"}, - {file = "astroid-2.15.0.tar.gz", hash = "sha256:525f126d5dc1b8b0b6ee398b33159105615d92dc4a17f2cd064125d57f6186fa"}, + {file = "astroid-2.15.1-py3-none-any.whl", hash = "sha256:89860bda98fe2bbd1f5d262229be7629d778ce280de68d95d4a73d1f592ad268"}, + {file = "astroid-2.15.1.tar.gz", hash = "sha256:af4e0aff46e2868218502789898269ed95b663fba49e65d91c1e09c966266c34"}, ] [package.dependencies] @@ -641,19 +641,19 @@ tests = ["check-manifest", "coverage", "defusedxml", "markdown2", "olefile", "pa [[package]] name = "platformdirs" -version = "3.1.1" +version = "3.2.0" description = "A small Python package for determining appropriate platform-specific dirs, e.g. a \"user data dir\"." category = "main" optional = false python-versions = ">=3.7" files = [ - {file = "platformdirs-3.1.1-py3-none-any.whl", hash = "sha256:e5986afb596e4bb5bde29a79ac9061aa955b94fca2399b7aaac4090860920dd8"}, - {file = "platformdirs-3.1.1.tar.gz", hash = "sha256:024996549ee88ec1a9aa99ff7f8fc819bb59e2c3477b410d90a16d32d6e707aa"}, + {file = "platformdirs-3.2.0-py3-none-any.whl", hash = "sha256:ebe11c0d7a805086e99506aa331612429a72ca7cd52a1f0d277dc4adc20cb10e"}, + {file = "platformdirs-3.2.0.tar.gz", hash = "sha256:d5b638ca397f25f979350ff789db335903d7ea010ab28903f57b27e1b16c2b08"}, ] [package.extras] docs = ["furo (>=2022.12.7)", "proselint (>=0.13)", "sphinx (>=6.1.3)", "sphinx-autodoc-typehints (>=1.22,!=1.23.4)"] -test = ["appdirs (==1.4.4)", "covdefaults (>=2.2.2)", "pytest (>=7.2.1)", "pytest-cov (>=4)", "pytest-mock (>=3.10)"] +test = ["appdirs (==1.4.4)", "covdefaults (>=2.3)", "pytest (>=7.2.2)", "pytest-cov (>=4)", "pytest-mock (>=3.10)"] [[package]] name = "pylint" @@ -752,14 +752,14 @@ files = [ [[package]] name = "setuptools" -version = "67.6.0" +version = "67.6.1" description = "Easily download, build, install, upgrade, and uninstall Python packages" category = "main" optional = false python-versions = ">=3.7" files = [ - {file = "setuptools-67.6.0-py3-none-any.whl", hash = "sha256:b78aaa36f6b90a074c1fa651168723acbf45d14cb1196b6f02c0fd07f17623b2"}, - {file = "setuptools-67.6.0.tar.gz", hash = "sha256:2ee892cd5f29f3373097f5a814697e397cf3ce313616df0af11231e2ad118077"}, + {file = "setuptools-67.6.1-py3-none-any.whl", hash = "sha256:e728ca814a823bf7bf60162daf9db95b93d532948c4c0bea762ce62f60189078"}, + {file = "setuptools-67.6.1.tar.gz", hash = "sha256:257de92a9d50a60b8e22abfcbb771571fde0dbf3ec234463212027a4eeecbe9a"}, ] [package.extras] @@ -859,14 +859,14 @@ files = [ [[package]] name = "tomlkit" -version = "0.11.6" +version = "0.11.7" description = "Style preserving TOML library" category = "main" optional = false -python-versions = ">=3.6" +python-versions = ">=3.7" files = [ - {file = "tomlkit-0.11.6-py3-none-any.whl", hash = "sha256:07de26b0d8cfc18f871aec595fda24d95b08fef89d147caa861939f37230bf4b"}, - {file = "tomlkit-0.11.6.tar.gz", hash = "sha256:71b952e5721688937fb02cf9d354dbcf0785066149d2855e44531ebdd2b65d73"}, + {file = "tomlkit-0.11.7-py3-none-any.whl", hash = "sha256:5325463a7da2ef0c6bbfefb62a3dc883aebe679984709aee32a317907d0a8d3c"}, + {file = "tomlkit-0.11.7.tar.gz", hash = "sha256:f392ef70ad87a672f02519f99967d28a4d3047133e2d1df936511465fbb3791d"}, ] [[package]] diff --git a/pyproject.toml b/pyproject.toml index 5dc6556..e841ad0 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [tool.poetry] name = "onlylegs" -version = "23.03.26" +version = "23.03.30" description = "Gallery built for fast and simple image management" authors = ["Fluffy-Bean "] license = "MIT" diff --git a/run.py b/run.py index 653513d..7300567 100644 --- a/run.py +++ b/run.py @@ -14,7 +14,7 @@ print(""" #+# #+# #+# #+#+# #+# #+# #+# #+# #+# #+# #+# #+# ######## ### #### ########## ### ########## ######### ######### ######## - Created by Fluffy Bean - Version 23.03.26 + Created by Fluffy Bean - Version 23.03.30 """)