danielkrause/BSN-Chatsystem
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: runde Capture-Buttons mit zentrierten SVGs, Zeitstempel nach oben, Text-Ellipsis

Browse Source 
- Capture-Buttons: Label aus Kreis entfernt, .capture-item wrapper,
  SVG-Icons jetzt perfekt zentriert (flex+align+justify center)
- Spezifitäts-Fix: label.capture-btn überschreibt .submit-body label
- Zeitstempel-Overlay: bottom:8px → top:8px (rutscht nach oben)
- Textkarten: -webkit-line-clamp:4, overflow:hidden, mehr Padding
This commit is contained in:
Hermes Agent
2026-06-17 15:56:36 +02:00
parent ee2b7512e6
commit 747bbc1b3f
1 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+20 -12
View File
@@ -1812,11 +1812,11 @@ def public_frontend():
.story-date { color:#999; font-size:0.7rem; margin-left:auto; }
.story-time { font-size:0.7rem; color:#666; font-weight:500; }
.story-time-rel { color:#dc3545; font-weight:700; }
.story-time-overlay { position:absolute; bottom:8px; left:8px; z-index:5; background:rgba(255,255,255,0.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#dc3545; padding:0.3rem 0.65rem; border-radius:10px; font-size:0.8rem; font-weight:700; letter-spacing:0.02em; line-height:1.3; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.story-time-overlay { position:absolute; top:8px; left:8px; z-index:5; background:rgba(255,255,255,0.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#dc3545; padding:0.3rem 0.65rem; border-radius:10px; font-size:0.8rem; font-weight:700; letter-spacing:0.02em; line-height:1.3; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.story-time-overlay .story-time-rel { color:#dc3545; }
.story-preview { display:none; }
.text-only .story-preview { display:block; font-size:0.8rem; line-height:1.4; color:#444; }
.text-only .card-content { padding-top:0.4rem; }
.text-only .story-preview { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:0.8rem; line-height:1.4; color:#444; margin-bottom:0.35rem; }
.text-only .card-content { padding:0.55rem 0.85rem 0.65rem; }
/* Frontend filter bar */
.frontend-filter { max-width:1100px; margin:1rem auto 0; padding:0 1.5rem; display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; }
@@ -1950,10 +1950,12 @@ def public_frontend():
.submit-body .submit-btn:disabled { opacity:0.5; cursor:default; }
.submit-body .status-msg { text-align:center; font-size:0.8rem; margin-top:0.6rem;
min-height:1.2rem; }
.capture-row { display:flex; gap:0.8rem; margin-top:0.3rem; justify-content:center; }
.capture-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem; background:#fff; border:2px solid #ddd; border-radius:50%; width:68px; height:68px; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; padding:0; }
.capture-row { display:flex; gap:1.4rem; margin-top:0.3rem; justify-content:center; align-items:flex-start; }
.capture-item { display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.capture-btn, label.capture-btn { display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid #ddd; border-radius:50%; width:68px; height:68px; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; padding:0; }
.capture-btn svg { display:block; }
.capture-btn:active { transform:scale(0.92); background:#f0f0f0; border-color:#20228a; }
.capture-label { font-size:0.6rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.04em; }
.capture-label { font-size:0.62rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:0.04em; text-align:center; }
</style>
</head>
<body>
@@ -2024,21 +2026,27 @@ def public_frontend():
<textarea id="subText" placeholder="Was möchtest du mitteilen? ..." maxlength="5000"></textarea>
<label>📎 Medien aufnehmen oder auswählen</label>
<div class="capture-row">
<label class="capture-btn" id="capturePhotoBtn">
<div class="capture-item">
<label class="capture-btn">
<input type="file" id="subPhoto" accept="image/*" capture="environment" hidden>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2" y="5" width="20" height="16" rx="3" stroke="#20228a" stroke-width="2"/><circle cx="8.5" cy="10.5" r="2.5" fill="#20228a"/><path d="M2 17l5-5 4 4 4-6 7 7" stroke="#20228a" stroke-width="2" stroke-linejoin="round"/></svg>
<span class="capture-label">Foto</span>
</label>
<label class="capture-btn" id="captureVideoBtn">
<span class="capture-label">Foto</span>
</div>
<div class="capture-item">
<label class="capture-btn">
<input type="file" id="subVideo" accept="video/*" capture="environment" hidden>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="3" stroke="#20228a" stroke-width="2"/><path d="M10 8.5l5 3.5-5 3.5V8.5z" fill="#20228a"/></svg>
<span class="capture-label">Video</span>
</label>
<label class="capture-btn" id="captureAudioBtn">
<span class="capture-label">Video</span>
</div>
<div class="capture-item">
<label class="capture-btn">
<input type="file" id="subAudio" accept="audio/*" capture hidden>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="7" height="12" rx="2" fill="#20228a"/><path d="M10 9.5l7-6v17l-7-6" stroke="#20228a" stroke-width="2" stroke-linejoin="round"/><path d="M19 7c2.5 1.5 2.5 5.5 0 7" stroke="#20228a" stroke-width="2" stroke-linecap="round"/></svg>
<span class="capture-label">Audio</span>
</label>
<span class="capture-label">Audio</span>
</div>
</div>
<input type="file" id="subGallery" accept="image/*,video/*,audio/*" style="margin-top:0.5rem;font-size:0.72rem;color:#888;">
<div id="filePreview" style="display:none;margin-top:0.5rem;padding:0.5rem 0.7rem;background:#f0f4ff;border-radius:8px;font-size:0.75rem;color:#20228a;font-weight:500;"></div>