UI: Avatar entfernt, Streaming-Topbar mit Labels
- DK-Avatar aus Header entfernt (kein Zweck) - Streaming-Felder haben jetzt Ueberschriften: Name, Titel, Passwort, Qualitaet - Passwort-Feld von 140px auf 180px verbreitert - Topbar aligned an Feldunterkante (flex-end) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
1bd0fa14bc
commit
a99dc4211c
3 changed files with 73 additions and 36 deletions
|
|
@ -212,6 +212,14 @@ export default function App() {
|
|||
>
|
||||
v{version}
|
||||
</span>
|
||||
<button
|
||||
className={`hub-admin-btn ${adminLoggedIn ? 'logged-in' : ''}`}
|
||||
onClick={() => setShowAdminModal(true)}
|
||||
title="Admin Login"
|
||||
>
|
||||
{'\u{1F511}'}
|
||||
{adminLoggedIn && <span className="hub-admin-green-dot" />}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -753,6 +753,8 @@ export default function StreamingTab({ data }: { data: any }) {
|
|||
)}
|
||||
|
||||
<div className="stream-topbar">
|
||||
<label className="stream-field">
|
||||
<span className="stream-field-label">Name</span>
|
||||
<input
|
||||
className="stream-input stream-input-name"
|
||||
placeholder="Dein Name"
|
||||
|
|
@ -760,6 +762,9 @@ export default function StreamingTab({ data }: { data: any }) {
|
|||
onChange={e => setUserName(e.target.value)}
|
||||
disabled={isBroadcasting}
|
||||
/>
|
||||
</label>
|
||||
<label className="stream-field stream-field-grow">
|
||||
<span className="stream-field-label">Titel</span>
|
||||
<input
|
||||
className="stream-input stream-input-title"
|
||||
placeholder="Stream-Titel"
|
||||
|
|
@ -767,25 +772,31 @@ export default function StreamingTab({ data }: { data: any }) {
|
|||
onChange={e => setStreamTitle(e.target.value)}
|
||||
disabled={isBroadcasting}
|
||||
/>
|
||||
</label>
|
||||
<label className="stream-field">
|
||||
<span className="stream-field-label">Passwort</span>
|
||||
<input
|
||||
className="stream-input stream-input-password"
|
||||
type="password"
|
||||
placeholder="Passwort (optional)"
|
||||
placeholder="optional"
|
||||
value={streamPassword}
|
||||
onChange={e => setStreamPassword(e.target.value)}
|
||||
disabled={isBroadcasting}
|
||||
/>
|
||||
</label>
|
||||
<label className="stream-field">
|
||||
<span className="stream-field-label">Qualit{'\u00E4'}t</span>
|
||||
<select
|
||||
className="stream-select-quality"
|
||||
value={qualityIdx}
|
||||
onChange={e => setQualityIdx(Number(e.target.value))}
|
||||
disabled={isBroadcasting}
|
||||
title="Stream-Qualität"
|
||||
>
|
||||
{QUALITY_PRESETS.map((p, i) => (
|
||||
<option key={p.label} value={i}>{p.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{isBroadcasting ? (
|
||||
<button className="stream-btn stream-btn-stop" onClick={stopBroadcast}>
|
||||
{'\u23F9'} Stream beenden
|
||||
|
|
|
|||
|
|
@ -9,12 +9,27 @@
|
|||
/* ── Top Bar ── */
|
||||
.stream-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stream-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.stream-field-grow { flex: 1; min-width: 180px; }
|
||||
.stream-field-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-faint);
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.stream-input {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
|
|
@ -25,11 +40,13 @@
|
|||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.stream-input:focus { border-color: var(--accent); }
|
||||
.stream-input::placeholder { color: var(--text-faint); }
|
||||
.stream-input-name { width: 150px; }
|
||||
.stream-input-title { flex: 1; min-width: 180px; }
|
||||
.stream-input-title { width: 100%; }
|
||||
|
||||
.stream-btn {
|
||||
padding: 10px 20px;
|
||||
|
|
@ -405,11 +422,12 @@
|
|||
|
||||
/* ── Password input in topbar ── */
|
||||
.stream-input-password {
|
||||
width: 140px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.stream-select-quality {
|
||||
width: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: var(--radius);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue