large css update

GEMINI.md

@@ -1,10 +0,0 @@
-# SpotNotes Future Implementation & Refactoring Plan
-## 1. Feature: Mobile UX & Responsive Overhaul
-- **Status:** **[To Do]**
-- **Action Plan:**
-  - **Audit & Consistency:** Review every application state (Login, Register, Admin Dashboard, Map View) to ensure visual parity with the desktop experience while optimizing for vertical screen constraints.
-  - **Compact Layout & Spacing:** Re-evaluate the spacing and layering of icons, buttons, and UI elements. Aim for a "small and tight" aesthetic that maximizes map visibility without cramping everything into an unreadable jumble.
-  - **Sidebar to Bottom-Sheet:** On mobile devices, explore transitioning the right-side drawer into a "Bottom-Sheet" component (sliding up from the bottom) to provide a more ergonomic, thumb-reachable interface for note lists.
-  - **Enhanced Touch Targets:** Standardize all interactive elements (buttons, icons, notepad list items) to a minimum 44x44px touch target to prevent accidental clicks and improve accessibility.
-  - **Responsive Modals:** Refactor modal windows to occupy 100% of the viewport height/width on small screens, ensuring that form inputs and the "Add Note" textarea remain fully visible above the virtual keyboard.
-  - **Mobile Navigation:** Consolidate the desktop navbar into a streamlined mobile header, utilizing a hamburger menu or action bar to keep the search functionality and account links accessible but unobtrusive.

static/about.html

@@ -15,7 +15,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>

static/assets/css/admin.css

@@ -7,6 +7,10 @@
     margin: 5px;
     border-radius: 4px;
     cursor: pointer;
+    min-height: 44px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .admin-button:hover {

static/assets/css/auth.css

@@ -27,11 +27,20 @@
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 16px; /* Mobile friendly */
+    min-height: 44px;
 }
 
 .links { margin-top: 1rem; text-align: center; font-size: 0.9rem; }
-.links a { color: #007bff; text-decoration: none; }
+.links a { color: #007bff; text-decoration: none; display: inline-block; padding: 10px; min-height: 44px; }
 .links a:hover { text-decoration: underline; }
 
 /* Ensure buttons on content pages are white */
 .content-container .btn { color: white; }
+
+@media (max-width: 600px) {
+    .auth-container, .content-container {
+        padding: 1.5rem;
+        margin: 10px;
+        width: calc(100% - 20px);
+    }
+}

static/assets/css/base.css

@@ -31,6 +31,10 @@ body.page-body {
     cursor: pointer;
     font-size: 1rem;
     transition: opacity 0.2s;
+    min-height: 44px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .btn:hover { opacity: 0.9; }
 .btn-primary { background: #007bff; }

static/assets/css/modals.css

@@ -20,6 +20,22 @@
     max-width: 400px;
     position: relative;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+@media (max-width: 600px) {
+    .modal {
+        align-items: flex-end; /* Align to bottom for better mobile reach or use full height */
+    }
+    .modal-content {
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        max-height: 100%;
+        border-radius: 0;
+        padding: 20px;
+    }
 }
 
 .close-modal {

static/assets/css/navbar.css

@@ -58,6 +58,7 @@
     border-radius: 4px 0 0 4px;
     outline: none;
     font-size: 16px; /* Prevents zoom on iOS */
+    min-height: 44px;
 }
 .nav-search button {
     padding: 5px 12px;
@@ -66,9 +67,20 @@
     background: #f8f9fa;
     border-radius: 0 4px 4px 0;
     cursor: pointer;
+    min-height: 44px;
 }
 .nav-search button:hover { background: #e2e6ea; }
 
+.nav-toggle {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #333;
+    padding: 5px;
+}
+
 /* Mobile Navbar */
 @media (max-width: 600px) {
     .navbar {
@@ -81,10 +93,31 @@
         flex: 1;
         order: 1;
     }
-    .nav-links {
+    .nav-toggle {
-        flex: initial;
+        display: block;
         order: 2;
     }
+    .nav-links {
+        display: none;
+        flex-basis: 100%;
+        order: 4;
+        flex-direction: column;
+        align-items: stretch;
+        background: #fff;
+        padding: 10px 0;
+    }
+    .nav-links.active {
+        display: flex;
+    }
+    .nav-links a {
+        padding: 10px 15px;
+        width: 100%;
+        text-align: left;
+        border-bottom: 1px solid #eee;
+    }
+    .nav-links a:last-child {
+        border-bottom: none;
+    }
     .nav-search {
         flex: 1 1 100%;
         order: 3;

static/assets/css/sidebar.css

@@ -157,11 +157,28 @@
 /* Mobile Sidebar */
 @media (max-width: 600px) {
     .sidebar {
-        width: 85%;
+        width: 100%;
-        max-width: 350px;
+        max-width: none;
-        top: 110px; /* Adjust for taller mobile navbar */
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60vh;
+        border-radius: 20px 20px 0 0;
+        box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
+        transform: translateY(0);
+        transition: transform 0.3s ease-in-out;
     }
     .sidebar.collapsed {
-        transform: translateX(100%);
+        transform: translateY(100%);
+    }
+    .sidebar-toggle {
+        left: 50%;
+        top: -30px;
+        transform: translateX(-50%) rotate(90deg);
+        width: 60px;
+        height: 30px;
+        border-radius: 5px 0 0 5px;
+        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
     }
 }

static/assets/js/nav.js

@@ -1,8 +1,19 @@
 document.addEventListener('DOMContentLoaded', () => {
     checkAuthStatus();
     initLogoutListener();
+    initNavToggle();
 });
 
+function initNavToggle() {
+    const navToggle = document.getElementById('nav-toggle');
+    const navLinks = document.getElementById('nav-links');
+    if (navToggle && navLinks) {
+        navToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+    }
+}
+
 async function checkAuthStatus() {
     try {
         const res = await fetch('/auth/me');

static/contact.html

@@ -14,7 +14,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>

static/index.html

@@ -27,13 +27,14 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation" style="display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer;">☰</button>
             <div class="nav-search">
                 <form id="search-form" style="display: flex; width: 100%;">
                     <input type="text" id="search-input" placeholder="Search notes or location...">
                     <button type="submit" id="search-btn">🔍</button>
                 </form>
             </div>
-            <div class="nav-links">
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>

static/login.html

@@ -14,7 +14,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>

static/register.html

@@ -14,7 +14,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>