sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend): move logo bar content into top bar

Browse Source 
Move the logo/header cluster into the top bar on the left side.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-01 09:55:34 +01:00
parent 0c35051630
commit a9aee190d3
2 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+17 -17
View File
@@ -14,11 +14,23 @@
<body>
<div class="card" id="card">
<div class="tab-bar" style="display:none;" id="tab-bar">
<div class="tab-bar-nav">
<button class="tab active" data-tab="main">Main</button>
<button class="tab" data-tab="plugins">Plugins</button>
<button class="tab" data-tab="map">Map</button>
<button class="tab" data-tab="about">About</button>
<div class="tab-bar-left">
<div class="header-main">
<div class="header-left">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
</div>
<div class="header-text">
<div class="title"><span id="rig-title">trx-rs</span></div>
<div class="subtitle" id="server-subtitle"></div>
<div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
</div>
</div>
<div class="tab-bar-nav">
<button class="tab active" data-tab="main">Main</button>
<button class="tab" data-tab="plugins">Plugins</button>
<button class="tab" data-tab="map">Map</button>
<button class="tab" data-tab="about">About</button>
</div>
</div>
<div class="top-bar-actions">
<div class="header-rig-switch">
@@ -36,18 +48,6 @@
<button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
</div>
</div>
<div class="header">
<div class="header-main">
<div class="header-left">
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
</div>
<div class="header-text">
<div class="title"><span id="rig-title">trx-rs</span></div>
<div class="subtitle" id="server-subtitle"></div>
<div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
</div>
</div>
</div>
<div class="overview-strip">
<canvas id="overview-canvas" aria-hidden="true"></canvas>
<div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+40
View File
@@ -703,10 +703,40 @@ small { color: var(--text-muted); }
position: relative;
z-index: 2;
}
.tab-bar-left {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
flex: 1 1 auto;
}
.tab-bar .header-main {
display: flex;
align-items: center;
gap: 0.7rem;
max-width: min(100%, 24rem);
padding: 0.25rem 0.65rem 0.25rem 0.35rem;
margin-left: 0;
transform: none;
flex-shrink: 0;
}
.tab-bar .header-logo {
height: 2.6rem;
}
.tab-bar .title {
font-size: 1.05rem;
line-height: 1.1;
}
.tab-bar .subtitle {
font-size: 0.78rem;
line-height: 1.15;
}
.tab-bar-nav {
display: flex;
align-items: center;
gap: 0.2rem;
min-width: 0;
flex-wrap: wrap;
}
.tab {
background: transparent;
@@ -910,6 +940,16 @@ button:focus-visible, input:focus-visible, select:focus-visible {
}
.header-left { justify-content: flex-end; }
.tab-bar { flex-wrap: wrap; }
.tab-bar-left {
width: 100%;
flex-wrap: wrap;
gap: 0.7rem;
}
.tab-bar .header-main {
max-width: 100%;
margin-left: 0;
transform: none;
}
.top-bar-actions { width: 100%; justify-content: space-between; }
.header-rig-switch { width: auto; justify-content: flex-end; }
.header-rig-switch select { min-width: 6.5rem; }