Center logo

static/app.js

@@ -53,7 +53,6 @@ els('[data-icon]').forEach((svg) => paintIcon(svg, ICONS[svg.dataset.icon]));
 const ui = {
   foot: el('[data-role="foot"]'),
   toast: el('[data-role="toast"]'),
-  refresh: el('[data-role="refresh"]'),
   avrStatus: el('[data-role="avr-status"]'),
   inputButton: el('[data-role="input-button"]'),
   inputName: el('[data-role="input-name"]'),
@@ -719,12 +718,6 @@ function busy() {
     || Object.values(rooms).some((r) => r.taps || r.inflight || r.dragging || r.busy || r.playBusy || seeking(r));
 }
 
-ui.refresh.addEventListener('click', () => {
-  ui.refresh.classList.add('spin');
-  setTimeout(() => ui.refresh.classList.remove('spin'), 700);
-  refresh();
-});
-
 setInterval(() => {
   if (document.visibilityState === 'visible' && !busy()) refresh();
 }, POLL_MS);

static/panel.css

@@ -65,19 +65,10 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .app > .on-top { order: -1; }
 
 /* --- header ---------------------------------------------------------- */
-.top { order: -2; display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 0; }
+.top { order: -2; display: flex; align-items: center; justify-content: center; padding: 6px 4px 0; }
 .top h1 { margin: 0; line-height: 0; }
 .top .logo { height: 34px; width: auto; display: block; }
 
-.icon-button {
-  width: 44px; height: 44px; border-radius: 50%;
-  display: grid; place-items: center;
-  color: var(--muted); background: var(--card);
-}
-.icon-button:active { background: var(--raised); color: var(--ink); }
-.icon-button.spin svg { animation: spin .7s linear; }
-@keyframes spin { to { transform: rotate(360deg); } }
-
 /* --- cards ----------------------------------------------------------- */
 .card {
   background: var(--card);

templates/index.html

@@ -47,9 +47,6 @@
 <div class="app">
   <header class="top">
     <h1><img class="logo" src="{{ url_for('static', filename='logo.svg') }}" alt="{{ app_name }}"></h1>
-    <button class="icon-button" data-role="refresh" aria-label="Refresh">
-      <svg viewBox="0 0 512 512" aria-hidden="true"><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
-    </button>
   </header>
 
   {% for room in rooms %}