ソースを参照

fix(ui): size legacy iOS 9 symbols to fill ~3/4 of button height

Two-char symbols (<< >>) get 26px bold, single-char (■ ▶) get 36px bold.
letter-spacing: 2px spreads the chars slightly for better visual weight.
Mute button (vol/mut) gets 16px bold to stay readable in its 48px container.
Flex centering already guaranteed by .btn layout -- no extra work needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
master
Jan Svabenik 1ヶ月前
コミット
a1a2819845
1個のファイルの変更27行の追加7行の削除
  1. +27
    -7
      web/static/app.js

+ 27
- 7
web/static/app.js ファイルの表示

@@ -256,6 +256,7 @@ function updateVolumeFill(muted) {
}
function updateMuteBtn(muted) {
btnMute.textContent = muted ? SYM.volOff : SYM.volOn;
if (isLegacyIOS) { btnMute.style.fontSize = '16px'; btnMute.style.fontWeight = 'bold'; }
btnMute.classList.toggle('muted', muted);
}

@@ -560,14 +561,33 @@ function scrollToCurrentTrack() {
// ── Boot ──────────────────────────────────────────────────────────────────────

// Replace emoji with legacy symbols on iOS 9 where the glyphs are missing.
// Centering is already handled by flex on .btn — we only set size/weight here.
if (isLegacyIOS) {
$('btn-prev').textContent = SYM.prev;
$('btn-play').textContent = SYM.play;
$('btn-stop').textContent = SYM.stop;
$('btn-next').textContent = SYM.next;
$('btn-mute').textContent = SYM.volOn;
$('btn-show-playlist').textContent = SYM.playlist;
$('btn-kill').textContent = SYM.skip + ' Überspringen';
// Helper: replace text and tune font so the symbol fills ~¾ of the button.
function legacySym(id, text, size, weight) {
var el = $(id);
el.textContent = text;
el.style.fontSize = size;
el.style.fontWeight = weight || 'bold';
el.style.letterSpacing = '2px';
}

// Transport controls (btn-h = 64px):
// two-char symbols (<<, >>) → 26px bold; single-char (■) → 36px bold.
// ▶ is natively supported on iOS 9 and already 32px via .btn-play.
legacySym('btn-prev', SYM.prev, '26px'); // <<
legacySym('btn-play', SYM.play, '36px'); // ▶
legacySym('btn-stop', SYM.stop, '36px'); // ■
legacySym('btn-next', SYM.next, '26px'); // >>

// Volume mute (48px tall): short text, large and bold
legacySym('btn-mute', SYM.volOn, '16px');

// Playlist action button (52px tall)
legacySym('btn-show-playlist', SYM.playlist, '18px');

// Kill button: just drop the emoji, keep the label text
$('btn-kill').textContent = SYM.skip + ' Überspringen';
}

connect();


読み込み中…
キャンセル
保存