ben/spotnotes.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

large css update

Browse source
This commit is contained in:
Ben Miller 2026-06-01 23:02:39 -05:00
parent 6c582b059c
commit bf8fa3ca5f
13 changed files with 112 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
GEMINI.md
View file

@ -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.

3
static/about.html
View file

@ -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>

4
static/assets/css/admin.css
View file

@ -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 {

13
static/assets/css/auth.css
View file

@ -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; }
.content-container .btn { color: white; }
@media (max-width: 600px) {
.auth-container, .content-container {
padding: 1.5rem;
margin: 10px;
width: calc(100% - 20px);
}
}

4
static/assets/css/base.css
View file

@ -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; }

16
static/assets/css/modals.css
View file

@ -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 {

37
static/assets/css/navbar.css
View file

@ -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 {
flex: initial;
.nav-toggle {
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;

25
static/assets/css/sidebar.css
View file

@ -157,11 +157,28 @@
/* Mobile Sidebar */
@media (max-width: 600px) {
.sidebar {
width: 85%;
max-width: 350px;
top: 110px; /* Adjust for taller mobile navbar */
width: 100%;
max-width: none;
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);
}
}

11
static/assets/js/nav.js
View file

@ -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');

3
static/contact.html
View file

@ -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>

3
static/index.html
View file

@ -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>

3
static/login.html
View file

@ -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>

3
static/register.html
View file

@ -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>