Fixed a lot of responsive problems.

- Fixed auth problem
- Fixed BBCode and Markdown apparition in some unnecessary parts

resources/js/SubmissionsClass/GalleryManager.js

@@ -131,15 +131,38 @@ export function GalleryManager() {
             this.dragSrcI = index;
         },
 
+        moveImageUp(index){
+            if( index <= 0 )
+                return;
+
+            const moved = this.images.splice(index, 1)[0];
+            this.images.splice(index - 1, 0, moved);
+        },
+
+        moveImageDown(index){
+            if( index >= this.images.length - 1 )
+                return;
+
+            const moved = this.images.splice(index, 1)[0];
+            this.images.splice(index + 1, 0, moved);
+        },
+
+        reorderImages(from, to){
+            if( from === null || to === null || from === to )
+                return;
+
+            const moved = this.images.splice(from, 1)[0];
+            this.images.splice(to, 0, moved);
+            this.dragSrcI = to;
+        },
+
         dragOver(e, index){
             e.preventDefault();
 
             if( this.dragSrcI === null || this.dragSrcI === index )
                 return;
 
-            const moved = this.images.splice(this.dragSrcI, 1)[0];
-            this.images.splice(index, 0, moved);
-            this.dragSrcI = index;
+            this.reorderImages(this.dragSrcI, index);
         },
 
         dragEnd(){

resources/js/app.js

@@ -8,6 +8,7 @@ import notifications from "./notifications.js";
 import conversations from "./conversations.js";
 import settings from "./settings.js";
 import { initMobileMenu } from "./mobile-menu.js";
+import { initMobileBackToTop } from "./mobile-back-to-top.js"
 
 /**
  * Get config defined in meta.blade.php
@@ -47,3 +48,4 @@ Alpine.store('settings', settings() );
 
 // Mobile Menu
 document.addEventListener('DOMContentLoaded', initMobileMenu);
+document.addEventListener( 'DOMContentLoaded', initMobileBackToTop );

resources/js/hovercard.js

@@ -72,6 +72,7 @@ export default function hovercard(){
                 Alpine.nextTick(() => {
                     const card = document.querySelector('.hovercard');
                     if (card) window.refreshIcons(card);
+                    this.updatePosition(this.anchorEl);
                 });
 
             } catch( error ){
@@ -89,13 +90,26 @@ export default function hovercard(){
             const RECT = anchorEl.getBoundingClientRect();
             const SCROLL_X = window.scrollX;
             const SCROLL_Y = window.scrollY;
+            const VIEWPORT_WIDTH = window.innerWidth;
+            const VIEWPORT_HEIGHT = window.innerHeight;
 
-            let x = RECT.left + SCROLL_X;
+            const CARD = document.querySelector('.hovercard');
+            const WIDTH = CARD?.offsetWidth || 280;
+            const HEIGHT = CARD?.offsetHeight || 320;
+
+            let x = RECT.right + SCROLL_X + 8;
             let y = RECT.bottom + SCROLL_Y + 8;
 
-            const WIDTH = 280;
-            if( x + WIDTH > window.innerWidth ){
-                x = window.innerWidth - WIDTH - 16;
+            if( x + WIDTH > VIEWPORT_WIDTH - 8 && RECT.left + SCROLL_X - WIDTH - 8 >= 8 ){
+                x = RECT.left + SCROLL_X - WIDTH - 8;
+            } else {
+                x = Math.max(8, Math.min(x, VIEWPORT_WIDTH - WIDTH - 8));
+            }
+
+            if( y + HEIGHT > VIEWPORT_HEIGHT + SCROLL_Y - 8 && RECT.top + SCROLL_Y - HEIGHT - 8 >= 8 ){
+                y = RECT.top + SCROLL_Y - HEIGHT - 8;
+            } else {
+                y = Math.max(8, Math.min(y, VIEWPORT_HEIGHT + SCROLL_Y - HEIGHT - 8));
             }
 
             this.x = x;

resources/js/mobile-back-to-top.js

@@ -0,0 +1,18 @@
+export function initMobileBackToTop(){
+    const backToTopButton = document.querySelector('.back-to-top');
+    const content = document.getElementById('content');
+
+    if (!backToTopButton || !content) {
+        return;
+    }
+
+    const toggleBackToTop = () => {
+        const shouldShow = window.innerWidth <= 768 && content.scrollTop > 320;
+
+        backToTopButton.classList.toggle('visible', shouldShow);
+    };
+
+    toggleBackToTop();
+    content.addEventListener('scroll', toggleBackToTop, { passive: true });
+    window.addEventListener('resize', toggleBackToTop, { passive: true });
+}