Revamp CommonwealthOnline browser UI and styles
Rework the CommonwealthOnline browser UI: restructure HTML into a nav + subpanel layout, add SVG/PNG/font assets and new sprites, and overhaul styles with a new font-face and refreshed color/spacing variables. Refactor components: tabs use a left nav list; filters extraction (renderRow) and reset focus handling; direct-connect renders into a dedicated container; server-list switched to compact row layout and adds a scroll indicator; server-details now uses a preview area and simplified preview/stats rendering. Update app logic: adjust focus zone handling (nextFocusZone), limit zones per tab, update connection status/count display, and avoid rendering details for direct-connect. Overall changes improve responsiveness, visual hierarchy, and focus/navigation behavior.
This commit is contained in:
@@ -9,63 +9,59 @@
|
||||
<body>
|
||||
<div class="co-root" id="coRoot">
|
||||
<div class="co-panel" id="coPanel">
|
||||
<header class="co-header">
|
||||
<h1>Commonwealth Online</h1>
|
||||
<div class="co-subtitle">Server Browser</div>
|
||||
</header>
|
||||
<svg class="co-panel-border co-panel-border-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.97 11" preserveAspectRatio="none" aria-hidden="true">
|
||||
<polyline class="co-panel-border-line" points="0 10.97 0 0 1075.97 0 1075.97 10.5"/>
|
||||
</svg>
|
||||
<svg class="co-panel-border co-panel-border-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.97 11" preserveAspectRatio="none" aria-hidden="true">
|
||||
<polyline class="co-panel-border-line" points="0 0.47 0 8.91 1075.97 8.97 1075.97 0.47"/>
|
||||
</svg>
|
||||
|
||||
<nav class="co-tabs"></nav>
|
||||
<div class="co-subpanel">
|
||||
<nav class="co-nav-list"></nav>
|
||||
|
||||
<div class="co-body">
|
||||
<div class="co-tab-content">
|
||||
<div class="co-tab-pane" data-pane="direct-connect"></div>
|
||||
<div class="co-tab-pane active" data-pane="server-browser">
|
||||
<div class="co-browser-layout">
|
||||
<aside class="co-filters"></aside>
|
||||
<div class="co-server-list-wrap">
|
||||
<div class="co-server-list-header">
|
||||
<span></span>
|
||||
<span>Server Name</span>
|
||||
<span>Players</span>
|
||||
<span>Ping</span>
|
||||
<span>Worldspace</span>
|
||||
<span>Mode</span>
|
||||
<span>Status</span>
|
||||
<div class="co-subpanel-content">
|
||||
<div class="co-tab-content">
|
||||
<div class="co-tab-pane" data-pane="direct-connect">
|
||||
<header class="co-subpanel-header">
|
||||
<h2 class="co-subpanel-title">Direct Connect</h2>
|
||||
</header>
|
||||
<div class="co-direct-connect"></div>
|
||||
</div>
|
||||
|
||||
<div class="co-tab-pane active" data-pane="server-browser">
|
||||
<header class="co-subpanel-header">
|
||||
<h2 class="co-subpanel-title" id="coSubpanelTitle">Servers</h2>
|
||||
<div class="co-subpanel-meta">
|
||||
<span id="coConnectionStatus">Online</span>
|
||||
<span class="co-count" id="coServerCount"></span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="co-filters"></div>
|
||||
<div class="co-server-list-wrap">
|
||||
<div class="co-server-list"></div>
|
||||
<div class="co-scroll-indicator" aria-hidden="true">»»</div>
|
||||
</div>
|
||||
<aside class="co-details"></aside>
|
||||
</div>
|
||||
</div>
|
||||
<div class="co-tab-pane" data-pane="favorites">
|
||||
<div class="co-browser-layout co-favorites-layout">
|
||||
|
||||
<div class="co-tab-pane" data-pane="favorites">
|
||||
<header class="co-subpanel-header">
|
||||
<h2 class="co-subpanel-title">Favorites</h2>
|
||||
</header>
|
||||
<div class="co-preview-area"></div>
|
||||
<div class="co-server-list-wrap">
|
||||
<div class="co-server-list-header">
|
||||
<span></span>
|
||||
<span>Server Name</span>
|
||||
<span>Players</span>
|
||||
<span>Ping</span>
|
||||
<span>Worldspace</span>
|
||||
<span>Mode</span>
|
||||
<span>Status</span>
|
||||
</div>
|
||||
<div class="co-server-list co-favorites-list"></div>
|
||||
<div class="co-scroll-indicator" aria-hidden="true">»»</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="co-tab-pane" data-pane="recent">
|
||||
<div class="co-browser-layout co-recent-layout">
|
||||
|
||||
<div class="co-tab-pane" data-pane="recent">
|
||||
<header class="co-subpanel-header">
|
||||
<h2 class="co-subpanel-title">Recent</h2>
|
||||
</header>
|
||||
<div class="co-preview-area"></div>
|
||||
<div class="co-server-list-wrap">
|
||||
<div class="co-server-list-header">
|
||||
<span></span>
|
||||
<span>Server Name</span>
|
||||
<span>Players</span>
|
||||
<span>Ping</span>
|
||||
<span>Worldspace</span>
|
||||
<span>Mode</span>
|
||||
<span>Status</span>
|
||||
</div>
|
||||
<div class="co-server-list co-recent-list"></div>
|
||||
<div class="co-scroll-indicator" aria-hidden="true">»»</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,10 +69,6 @@
|
||||
</div>
|
||||
|
||||
<footer class="co-action-bar">
|
||||
<div class="co-status-text">
|
||||
Status: <span id="coConnectionStatus">Online</span>
|
||||
<span class="co-count" id="coServerCount"></span>
|
||||
</div>
|
||||
<div class="co-prompts"></div>
|
||||
</footer>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user