Fix: Notes-Karten — Zeilenumbruch, Clamp + Detail-Modal beim Klick, SW by-v1119

User-Report: Zeilenumbrüche in Notes-Karten gingen nicht, kein Scroll,
keine Detail-Ansicht.

Drei Probleme behoben:

1. _truncate-Limit zu aggressiv (150 Zeichen)
   → erhöht auf 600 Zeichen damit Karten lange Notizen mit Newlines
     sichtbar anzeigen können (CSS-Clamp erledigt visuell den Rest)

2. .list-item-text + .notes-card-text Override-Konflikt
   list-item-text hat fest -webkit-line-clamp:2 mit display:-webkit-box.
   Notes-Override hatte display:block — das deaktiviert clamp komplett,
   aber dann zeigt der Text die ersten 150 Zeichen ohne Newline-Hinweis.
   → Neuer Override: display:-webkit-box + -webkit-line-clamp:5 +
     white-space:pre-wrap → 5 Zeilen mit Newlines sichtbar, Rest '…'

3. Keine Detail-Ansicht beim Klick auf Karte
   → Neue Funktion _openDetailModal(note):
     - Voller Notiz-Text scrollbar (.notes-detail-text mit max-height:60vh)
     - Rubrik-Icon + Label im Titel
     - Parent-Label, Micro-Badges, Meta (Zeit + Ort)
     - Footer: 'Bearbeiten' (öffnet Edit-Modal) + 'Schließen'
   → Card-Click bindet darauf; Klicks auf Action-Buttons werden via
     closest('.list-item-action-btn') ignoriert (kein doppeltes Handling)
This commit is contained in:
rene 2026-05-27 14:42:47 +02:00
parent 1ff66a7083
commit c7a84438d1
6 changed files with 84 additions and 19 deletions

View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1118"></script>
<script src="/js/boot-early.js?v=1119"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1118">
<link rel="stylesheet" href="/css/layout.css?v=1118">
<link rel="stylesheet" href="/css/components.css?v=1118">
<link rel="stylesheet" href="/css/utilities.css?v=1118">
<link rel="stylesheet" href="/css/lists.css?v=1118">
<link rel="stylesheet" href="/css/design-system.css?v=1119">
<link rel="stylesheet" href="/css/layout.css?v=1119">
<link rel="stylesheet" href="/css/components.css?v=1119">
<link rel="stylesheet" href="/css/utilities.css?v=1119">
<link rel="stylesheet" href="/css/lists.css?v=1119">
</head>
<body>
@ -617,11 +617,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1118"></script>
<script src="/js/ui.js?v=1118"></script>
<script src="/js/app.js?v=1118"></script>
<script src="/js/worlds.js?v=1118"></script>
<script src="/js/offline-indicator.js?v=1118"></script>
<script src="/js/api.js?v=1119"></script>
<script src="/js/ui.js?v=1119"></script>
<script src="/js/app.js?v=1119"></script>
<script src="/js/worlds.js?v=1119"></script>
<script src="/js/offline-indicator.js?v=1119"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -631,7 +631,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1118"></script>
<script src="/js/boot.js?v=1119"></script>
</body>