From 1040828d7f4642433619c2db6435680f159b259d Mon Sep 17 00:00:00 2001 From: Michael Kaufmann Date: Mon, 16 Feb 2026 21:33:18 +0100 Subject: [PATCH] =?UTF-8?q?fix(ui):=20v1.2.1=20=E2=80=93=20highlights=20in?= =?UTF-8?q?tegration,=20mock=20data,=20CSS=20polish?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 19 ++- build-bookmarklet.sh | 4 + changelog.md | 9 ++ dist/bookmarklet-payload.js | 4 +- dist/bookmarklet.txt | 2 +- dist/install.html | 22 ++- dist/kantine-standalone.html | 275 +++++++++++++++++++++++++++++++++-- kantine.js | 5 + mock-data.js | 184 +++++++++++++++++++++++ style.css | 81 +++++++++-- version.txt | 2 +- 11 files changed, 563 insertions(+), 44 deletions(-) create mode 100755 mock-data.js diff --git a/README.md b/README.md index 5013ff5..4bcd4a2 100755 --- a/README.md +++ b/README.md @@ -32,10 +32,21 @@ Ein intelligentes Bookmarklet für die Mitarbeiter-Kantine der Bessa App. Dieses * Bash (für `build-bookmarklet.sh`) ### Projektstruktur -* `kantine.js`: Der Haupt-Quellcode des Bookmarklets. -* `public/style.css`: Das Design (CSS). -* `build-bookmarklet.sh`: Skript zum Erstellen der `dist/` Dateien. -* `dist/`: Enthält die kompilierten Dateien (`bookmarklet.txt`, `install.html`). + +#### Quelldateien +* `kantine.js`: Der Haupt-Quellcode des Bookmarklets (UI, API-Logik, Rendering). +* `style.css`: Das komplette Design (CSS mit Light/Dark Mode). +* `mock-data.js`: Mock-Fetch-Interceptor mit realistischen Dummy-Menüdaten für Standalone-Tests. +* `build-bookmarklet.sh`: Build-Skript – erzeugt alle `dist/`-Artefakte. +* `test_build.py`: Automatische Build-Tests, laufen am Ende jedes Builds. + +#### `dist/` – Build-Artefakte +| Datei | Beschreibung | +|-------|-------------| +| `bookmarklet.txt` | Die rohe Bookmarklet-URL (`javascript:...`). Enthält CSS + JS als selbstextrahierendes IIFE. Kann direkt als Lesezeichen-URL eingefügt werden. | +| `bookmarklet-payload.js` | Der entpackte Bookmarklet-Payload (JS). Erstellt ` -

🍽️ Kantine Wrapper v1.2.0

+

🍽️ Kantine Wrapper v1.2.1

@@ -28,7 +28,7 @@
  1. Ziehe den Button oben in deine Lesezeichen-Leiste (Drag & Drop)
  2. Navigiere zu web.bessa.app/knapp-kantine
    3. -
  3. Klicke auf das Lesezeichen Kantine v1.2.0
    4. +
  4. Klicke auf das Lesezeichen Kantine v1.2.1
@@ -54,7 +54,17 @@

Changelog

-

v1.2.0 (2026-02-16)

+

v1.2.1 (2026-02-16)

+
    +
  • **Fix**: Smart Highlights werden jetzt korrekt auf Menü-Items angewendet (`checkHighlight` in `createDayCard`). 🌟
    • +
  • **Feature**: Mock-Daten (`mock-data.js`) für Standalone-Tests eingebaut. 🧪
    • +
  • **Style**: Highlight-Glow mit blauer Puls-Animation (`blue-pulse`) überarbeitet. 💎
    • +
  • **Style**: Tag-Badges konsistent mit Badge-System gestaltet. 🏷️
    • +
  • **Style**: "Hinzufügen"-Button (`#btn-add-tag`) als Primary-Button gestylt. 🎨
    • +
  • **Style**: Modal-Body Padding und Input-Font korrigiert. 🔧
    • +
  • **Docs**: README Projektstruktur mit Tabelle für `dist/`-Artefakte ergänzt. 📖
    • +
+

v1.2.0 (2026-02-16)

  • **Feature**: Bessere UX im Installer (Button oben, Log unten, Features aktualisiert). 💅
  • **Tech**: Build-Tests hinzugefügt. 🧪
    • @@ -93,8 +103,8 @@ diff --git a/dist/kantine-standalone.html b/dist/kantine-standalone.html index d61a2df..2cb6fdf 100755 --- a/dist/kantine-standalone.html +++ b/dist/kantine-standalone.html @@ -475,7 +475,6 @@ body { justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border-color); - /* Changed from --border */ } .modal-header h2 { @@ -483,6 +482,10 @@ body { font-size: 1.25rem; } +.modal-body { + padding: 20px; +} + #login-form { padding: 20px; } @@ -1247,14 +1250,31 @@ body { } } -/* Smart Highlights */ -.highlight-glow { - box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); - /* Blue glow */ - border: 1px solid rgba(59, 130, 246, 0.8); - background: rgba(59, 130, 246, 0.05); +/* Smart Highlights (Blue Glow - matches today-ordered/flagged pattern) */ +.menu-item.highlight-glow { + border: 2px solid rgba(59, 130, 246, 0.7); + box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); + border-radius: 8px; + padding: 1rem; + margin: 0 -1rem 1.5rem -1rem; + background: var(--bg-card); position: relative; - z-index: 1; + z-index: 5; + animation: blue-pulse 3s infinite; +} + +@keyframes blue-pulse { + 0% { + box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); + } + + 50% { + box-shadow: 0 0 25px rgba(59, 130, 246, 0.6); + } + + 100% { + box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); + } } /* Nav Badge with Count */ @@ -1282,23 +1302,32 @@ body { min-height: 50px; } +/* Tag badges styled consistently with .badge (verfügbar/ausverkauft) */ .tag-badge { display: inline-flex; align-items: center; - background: rgba(59, 130, 246, 0.15); + justify-content: center; + height: 24px; + font-size: 0.75rem; + padding: 0 10px; + border-radius: 4px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + line-height: normal; + white-space: nowrap; + background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; - padding: 4px 10px; - border-radius: 99px; - font-size: 0.85rem; - font-weight: 500; + border: 1px solid rgba(59, 130, 246, 0.2); + gap: 4px; } .tag-remove { - margin-left: 6px; cursor: pointer; opacity: 0.7; font-size: 1.1em; line-height: 1; + transition: all 0.2s; } .tag-remove:hover { @@ -1318,6 +1347,30 @@ body { border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; + font-family: inherit; +} + +/* Add tag button - styled like .btn-order with nav-btn.active color */ +#btn-add-tag { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 0.5rem 1rem; + border: none; + border-radius: 6px; + background: var(--accent-color); + color: white; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + font-family: inherit; + white-space: nowrap; +} + +#btn-add-tag:hover { + filter: brightness(1.15); + transform: translateY(-1px); } /* Update Banner Enhanced */ @@ -1361,6 +1414,191 @@ body {