refactor ratings, minify content, update single post page

2 files changed, 83 insertions, 2 deletions

diff --git a/static/scripts/resize.js b/static/scripts/resize.js
new file mode 100644
index 0000000..95b75c1
--- /dev/null
+++ b/static/scripts/resize.js
@@ -0,0 +1,80 @@
+function getAvailableHeight() {
+    const navbar = document.querySelector('nav')
+    const postBar = document.querySelector('.single-post-bar')
+    const navbarHeight = navbar ? navbar.offsetHeight : 0
+    const postBarHeight = postBar ? postBar.offsetHeight : 0
+    const padding = 40
+    return window.innerHeight - navbarHeight - postBarHeight - padding
+}
+
+function updateSizeSelection(selectedSize) {
+    document.querySelectorAll('.single-post-bar-size-actions a').forEach((link) => {
+        link.classList.remove('size-selected')
+        if (link.onclick && link.onclick.toString().includes(selectedSize)) {
+            link.classList.add('size-selected')
+        }
+    })
+}
+
+let currentSize = 'fitBoth'
+
+function handleResize() {
+    if (currentSize === 'fitHeight' || currentSize === 'fitBoth') {
+        switchSize(currentSize)
+    }
+}
+
+function switchSize(size) {
+    currentSize = size
+    const img = document.getElementById('post-image')
+    const container = document.querySelector('.post-image-container')
+    const sizeData = sizes[size]
+
+    img.className = ''
+    img.style.width = ''
+    img.style.height = ''
+    img.style.maxWidth = ''
+    img.style.maxHeight = ''
+
+    if (size === 'fitHeight') {
+        const availableHeight = getAvailableHeight()
+        img.style.maxHeight = availableHeight + 'px'
+        img.style.width = 'auto'
+        img.style.maxWidth = 'none'
+        img.classList.add('fit-height')
+    } else if (size === 'fitWidth') {
+        img.style.width = '100%'
+        img.style.height = 'auto'
+        img.style.maxWidth = '100%'
+        img.classList.add('fit-width')
+    } else if (size === 'fitBoth') {
+        const availableHeight = getAvailableHeight()
+        const imageWidth = parseInt(sizeData.width || img.naturalWidth)
+        const imageHeight = parseInt(sizeData.height || img.naturalHeight)
+
+        if (imageHeight > imageWidth) {
+            img.style.maxHeight = availableHeight + 'px'
+            img.style.width = 'auto'
+            img.style.maxWidth = 'none'
+        } else {
+            img.style.width = '100%'
+            img.style.height = 'auto'
+            img.style.maxWidth = '100%'
+        }
+        img.classList.add('fit-both')
+    } else {
+        img.style.maxWidth = 'none'
+        if (sizeData.width) img.style.width = sizeData.width + 'px'
+        if (sizeData.height) img.style.height = sizeData.height + 'px'
+        img.classList.add('fixed-size')
+    }
+
+    img.src = sizeData.src
+    updateSizeSelection(size)
+}
+
+window.addEventListener('resize', handleResize)
+
+window.addEventListener('load', function () {
+    switchSize(currentSize)
+})
\ No newline at end of file
diff --git a/static/scripts/upload.js b/static/scripts/upload.js
index fe4c4ef..0a6cc17 100644
--- a/static/scripts/upload.js
+++ b/static/scripts/upload.js
@@ -77,7 +77,7 @@ function createPreviewElement(key, blob, type, nameOrUrl) {
 
     const previewRatingForm = document.createElement('form');
     previewRatingForm.className = 'preview-rating-form';
-    ['Safe', 'Questionable', 'Sensitive', 'Explicit'].forEach((rating, idx) => {
+    ['Safe', 'Sensitive', 'Questionable', 'Explicit'].forEach((rating, idx) => {
         const inputId = `rating-${rating.toLowerCase()}-${key}`;
         const input = document.createElement('input');
         input.type = 'radio';
@@ -625,6 +625,7 @@ function showImageProgress(previewElement) {
         height: 100%;
         width: 0%;
         background-color: #4a9eff;
+        transition: width 0.3s ease;
     `;
 
     progressContainer.appendChild(progressBar);
@@ -663,7 +664,7 @@ function animateProgress(progressBar, duration) {
         if (isCompleted) return;
 
         const elapsed = Date.now() - startTime;
-        const timeRatio = elapsed / (duration * 4);
+        const timeRatio = elapsed / duration;
 
         let targetProgress;
         if (timeRatio < 0.2) {