Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

tweak: keep player bar static during swipe-up; improve title/album/artist spacing

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-19 21:03:54 +02:00
1 parent 32036b7312
commit 2553534cc8
2 files changed
+3 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/main.js
-5
View File
@@ -220,7 +220,6 @@ window.addEventListener('load', () => {
function _resetDrag(open) { function _resetDrag(open) {
playerBar.classList.remove('dragging'); playerBar.classList.remove('dragging');
playerBar.style.transform = '';
if (!npOverlay) { if(open) openNowPlaying(); _sy=0; _dragging=false; return; } if (!npOverlay) { if(open) openNowPlaying(); _sy=0; _dragging=false; return; }
@@ -257,10 +256,6 @@ window.addEventListener('load', () => {
const dy = _sy - e.touches[0].clientY; const dy = _sy - e.touches[0].clientY;
if(dy < 5) return; if(dy < 5) return;
_dragging = true; _dragging = true;
playerBar.classList.add('dragging');
// Player bar rises up to its own height, then stops — no need to travel further.
const barH = playerBar.offsetHeight || 72;
playerBar.style.transform = `translateY(${-Math.min(dy, barH)}px)`;
if(npOverlay) { if(npOverlay) {
npOverlay.style.transition = 'none'; npOverlay.style.transition = 'none';
// Overlay tracks finger with no cap: 2.5× speed so ~360px drag = fully open. // Overlay tracks finger with no cap: 2.5× speed so ~360px drag = fully open.
styles.css
+3 -2
View File
@@ -238,7 +238,7 @@ button:focus{outline:none}
.player-art.spinning::after{opacity:1} .player-art.spinning::after{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}} @keyframes spin{to{transform:rotate(360deg)}}
.player-info{min-width:0;display:flex;flex-direction:column;justify-content:center} .player-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
.player-title{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s} .player-title{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;margin-bottom:2px}
/* Player bar clickable title/artist */ /* Player bar clickable title/artist */
.player-title:hover{color:var(--accent);text-decoration:underline} .player-title:hover{color:var(--accent);text-decoration:underline}
#player-artist-name{color:var(--accent)} #player-artist-name{color:var(--accent)}
@@ -263,7 +263,8 @@ button:focus{outline:none}
.np-sheet-item.danger{color:var(--danger)} .np-sheet-item.danger{color:var(--danger)}
.np-sheet-item.danger svg{color:var(--danger)} .np-sheet-item.danger svg{color:var(--danger)}
.player-artist{font-size:11px;color:var(--text2);margin-top:1px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .player-artist{font-size:11px;color:var(--text2);margin-top:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-artist+.player-artist{margin-top:2px}
.player-badge{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle} .player-badge{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle}
.player-controls{display:flex;flex-direction:column;align-items:center;gap:7px;width:420px;padding:0 24px} .player-controls{display:flex;flex-direction:column;align-items:center;gap:7px;width:420px;padding:0 24px}
.ctrl-buttons{display:flex;align-items:center;gap:10px} .ctrl-buttons{display:flex;align-items:center;gap:10px}