ab/furumi-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed UI
All checks were successful
Build and Publish Deb Package / build-deb (push) Successful in 47s
Details
Publish Server Image / build-and-push-image (push) Successful in 2m19s
Details

Browse Source
This commit is contained in:
Ultradesu
2026-03-17 15:17:30 +00:00
parent 754097f894
commit cbc5639f99
9 changed files with 90 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
furumi-server/src/web/player.html
View File

@@ -58,14 +58,30 @@ body {
padding: 0.3rem 0.75rem; cursor: pointer; transition: all 0.2s;
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }
.btn-menu {
display: none;
background: none; border: none; color: var(--text);
font-size: 1.2rem; cursor: pointer; padding: 0.1rem 0.5rem;
margin-right: 0.2rem; border-radius: 4px; transition: all 0.2s;
}
.btn-menu:hover { background: var(--bg-hover); }
/* ─── Main layout ─── */
.main {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
/* Mobile Overlay */
.sidebar-overlay {
display: none;
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6); z-index: 20;
}
.sidebar-overlay.show { display: block; }
/* ─── File browser ─── */
.sidebar {
width: 280px;
@@ -322,6 +338,30 @@ body {
transition: all 0.25s; pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
/* ─── Responsive (Mobile) ─── */
@media (max-width: 768px) {
.btn-menu { display: inline-block; }
.header { padding: 0.75rem 1rem; }
.sidebar {
position: absolute;
top: 0; bottom: 0; left: -100%;
width: 85%; max-width: 320px;
z-index: 30;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 20px rgba(0,0,0,0.6);
}
.sidebar.open { left: 0; }
.queue-panel { flex: 1; min-width: 0; }
.player-bar {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.np-info { display: grid; grid-template-columns: auto 1fr; text-align: left; }
.volume-row { display: none; /* Hide volume on mobile to save space, rely on hardware buttons */ }
}
</style>
</head>
<body>
@@ -329,19 +369,27 @@ body {
<!-- Header -->
<header class="header">
<div class="header-logo">
<button class="btn-menu" id="btnMenu" onclick="toggleSidebar()">☰</button>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="9" cy="18" r="3"/><circle cx="18" cy="15" r="3"/>
<path d="M12 18V6l9-3v3"/>
</svg>
Furumi Player
</div>
<button class="btn-logout" onclick="logout()">Sign out</button>
<div style="display: flex; align-items: center; gap: 1rem;">
<span style="font-size: 0.8rem; color: var(--text-dim);">
<span style="opacity: 0.6; margin-right: 0.2rem;">👤</span>
<!-- USERNAME_PLACEHOLDER -->
</span>
<button class="btn-logout" onclick="logout()">Sign out</button>
</div>
</header>
<!-- Main -->
<div class="main">
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
<!-- Sidebar: file browser -->
<aside class="sidebar">
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">📁 Library</div>
<div class="breadcrumb" id="breadcrumb">/ <span onclick="navigate('')">root</span></div>
<div class="file-list" id="fileList">
@@ -665,6 +713,13 @@ async function fetchMeta(path, idx) {
} catch(e) {}
}
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay');
sidebar.classList.toggle('open');
overlay.classList.toggle('show');
}
function renderQueue() {
const listEl = document.getElementById('queueList');