From 11e593f8ce0cc534e24b12ca96f417a01364ad30 Mon Sep 17 00:00:00 2001 From: "Adrian A. Baumann" Date: Mon, 5 Jan 2026 13:37:09 +0100 Subject: [PATCH] Responsive main menu added, AGENTS updated. --- AGENTS.md | 10 +++- argocd/deployment.yaml | 2 +- labhelper/templates/base.html | 104 ++++++++++++++++++++++++++++++++-- 3 files changed, 108 insertions(+), 8 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index b815c70..c5eac09 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -214,9 +214,10 @@ labhelper/ │ │ ├── add_things.html # Form to add multiple things │ │ ├── box_detail.html # Box contents view │ │ ├── box_management.html # Box/BoxType CRUD management +│ │ ├── edit_thing.html # Edit thing page (name, description, picture, tags, files, links) │ │ ├── index.html # Home page with boxes and tags │ │ ├── search.html # Search page with AJAX -│ │ └── thing_detail.html # Thing details view with tags +│ │ └── thing_detail.html # Read-only thing details view │ ├── templatetags/ │ │ └── dict_extras.py # Custom template filters: get_item, render_markdown, truncate_markdown │ ├── admin.py # Admin configuration @@ -350,6 +351,7 @@ The project uses a base template system at `labhelper/templates/base.html`. All - Grid layouts with `repeat(auto-fill, minmax(250px, 1fr))` - Flexbox for component layouts - Breakpoints handled by grid and flex-wrap +- **Navigation**: Responsive navbar with hamburger menu on mobile (≤768px) and full horizontal menu on desktop (≥769px) ### CSS Guidelines @@ -384,7 +386,8 @@ The project uses a base template system at `labhelper/templates/base.html`. All | `edit_box` | `/box//edit/` | `edit_box` | Edit box | | `delete_box` | `/box//delete/` | `delete_box` | Delete box | | `box_detail` | `/box//` | `box_detail` | View box contents | -| `thing_detail` | `/thing//` | `thing_detail` | View/edit thing (move, picture, files, links, tags) | +| `thing_detail` | `/thing//` | `thing_detail` | Read-only view of thing details | +| `edit_thing` | `/thing//edit/` | `edit_thing` | Edit thing (name, description, picture, tags, files, links, move) | | `add_things` | `/box//add/` | `add_things` | Add multiple things to a box | | `search` | `/search/` | `search` | Search page | | `search_api` | `/search/api/` | `search_api` | AJAX search endpoint | @@ -482,7 +485,7 @@ The `Thing.description` field supports Markdown formatting with HTML sanitizatio | Form | Model | Purpose | |------|-------|---------| -| `ThingForm` | Thing | Add/edit a thing (name, description, picture, tags) | +| `ThingForm` | Thing | Add/edit a thing (name, description, picture) - tags managed separately | | `ThingPictureForm` | Thing | Upload/change thing picture only | | `ThingFileForm` | ThingFile | Add file attachment | | `ThingLinkForm` | ThingLink | Add link | @@ -547,6 +550,7 @@ Per `.gitignore`: 5. **Templates in labhelper/templates/**: The base template and shared templates are in `labhelper/templates/`. App-specific templates remain in `app_name/templates/`. 6. **Use get_object_or_404** instead of bare `.get()` calls 7. **Never commit SECRET_KEY** - use environment variables in production +8. **Be careful with process management**: Avoid blanket kills on ports (e.g., `lsof -ti:8000 | xargs kill -9`) as they can kill unintended processes like web browsers. Use specific process kills instead: `pkill -f "process_name"` ## Deployment Commands diff --git a/argocd/deployment.yaml b/argocd/deployment.yaml index 9a232fb..5b0d0b1 100644 --- a/argocd/deployment.yaml +++ b/argocd/deployment.yaml @@ -27,7 +27,7 @@ spec: mountPath: /data containers: - name: web - image: git.baumann.gr/adebaumann/labhelper:0.051 + image: git.baumann.gr/adebaumann/labhelper:0.052 imagePullPolicy: Always ports: - containerPort: 8000 diff --git a/labhelper/templates/base.html b/labhelper/templates/base.html index 8db8f15..375f187 100644 --- a/labhelper/templates/base.html +++ b/labhelper/templates/base.html @@ -50,13 +50,31 @@ font-size: 24px; } + .navbar-toggle { + display: none; + background: none; + border: none; + color: #555; + font-size: 24px; + cursor: pointer; + padding: 10px; + border-radius: 8px; + transition: all 0.3s ease; + } + + .navbar-toggle:hover { + background: #667eea; + color: white; + } + .navbar-nav { display: flex; gap: 20px; align-items: center; } - .navbar-nav a { + .navbar-nav a, + .navbar-nav form { color: #555; text-decoration: none; font-weight: 500; @@ -81,6 +99,68 @@ font-size: 14px; } + .navbar-nav button { + background: none; + border: none; + color: #555; + font: inherit; + cursor: pointer; + padding: 8px 16px; + border-radius: 8px; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + gap: 8px; + } + + @media (max-width: 768px) { + .navbar { + padding: 15px 20px; + } + + .navbar-brand { + font-size: 24px; + } + + .navbar-toggle { + display: block; + } + + .navbar-nav { + display: none; + width: 100%; + flex-direction: column; + gap: 0; + padding-top: 10px; + } + + .navbar-nav.active { + display: flex; + } + + .navbar-nav a, + .navbar-nav form { + width: 100%; + padding: 12px 16px; + border-radius: 0; + } + + .navbar-nav a:first-child, + .navbar-nav form:first-child { + border-radius: 8px 8px 0 0; + } + + .navbar-nav a:last-child, + .navbar-nav form:last-child { + border-radius: 0 0 8px 8px; + } + + .navbar-nav button { + width: 100%; + justify-content: flex-start; + } + } + .container { max-width: 1200px; margin: 20px auto; @@ -226,15 +306,18 @@ LabHelper -
+ +