[verified] style: stack Play button label
This commit is contained in:
1 parent
3d21bdbff0
commit
4becf52616
2 files changed
+14
-1
No files matched your search
+4
-1
@@ -52,7 +52,10 @@ function render() {
|
||||
const track = el('p', 'track', zone.error || (zone.track.title ? `${zone.track.title}${zone.track.artist ? ' · ' + zone.track.artist : ''}` : 'Kein aktueller Titel'));
|
||||
const controls = el('div', 'controls');
|
||||
for (const [icon, label, action] of [['▶','Play','play'], ['Ⅱ','Pause','pause'], ['■','Stopp','stop']]) {
|
||||
const button = el('button', null, `${icon} ${label}`); button.disabled = Boolean(zone.error);
|
||||
const button = el('button', action === 'play' ? 'stacked-play' : null);
|
||||
if (action === 'play') button.append(el('span', 'play-icon', icon), el('span', null, label));
|
||||
else button.textContent = `${icon} ${label}`;
|
||||
button.disabled = Boolean(zone.error);
|
||||
button.onclick = () => act(`/api/zones/${encodeURIComponent(zone.uid)}/transport`, 'POST', {action}); controls.append(button);
|
||||
}
|
||||
const volume = el('label', null, `Lautstärke: ${zone.volume ?? '–'}`), slider = el('input');
|
||||
|
||||
@@ -117,6 +117,16 @@ button:hover, button:focus {
|
||||
}
|
||||
|
||||
.controls button { flex: 1; }
|
||||
.controls .stacked-play {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.play-icon { line-height: 1; }
|
||||
.danger { color: var(--danger); }
|
||||
|
||||
.eq-controls {
|
||||
|
||||
Reference in new issue
Block a user