angryzero/rust-rcon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: navbar single-line, chart sizing, text visibility

Browse Source 
- Removed hamburger menu — all stats inline on one navbar row
- Disconnect button at top-right (ms-auto)
- Added data-bs-theme=dark for proper BS5 dark mode text inheritance
- Restored explicit width/height on chart SVGs (required by NVD3)
- Changed text-muted → text-white-50 for field labels on dark bg
- Added flex-nowrap to navbar container
- Overrode --bs-body-bg to maintain original dark shade

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
angryzero
2026-06-13 17:56:05 +02:00
co-authored by Copilot
parent 0a178d17b9
commit c5679feb82
3 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -15
View File
@@ -9,23 +9,18 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link href="rcon.css" rel="stylesheet"> <link href="rcon.css" rel="stylesheet">
</head> </head>
<body class="bg-dark text-light"> <body data-bs-theme="dark">
<!-- Server info header (hidden until connected) --> <!-- Server info header: single-line navbar, no hamburger -->
<nav class="navbar navbar-dark bg-primary" id="server-header" style="display:none"> <nav class="navbar navbar-dark bg-primary" id="server-header" style="display:none">
<div class="container"> <div class="container flex-nowrap">
<a class="navbar-brand" href="#" id="header-hostname"></a> <a class="navbar-brand me-3" href="#" id="header-hostname"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-header"> <span class="navbar-text me-2 small" title="Uptime" id="header-uptime"></span>
<span class="navbar-toggler-icon"></span> <span class="navbar-text me-2 small" title="Map Name" id="header-map"></span>
</button> <span class="navbar-text me-2 small" title="Players" id="header-players"></span>
<div class="collapse navbar-collapse" id="navbar-collapse-header"> <span class="navbar-text me-2 small" title="Framerate" id="header-fps"></span>
<span class="navbar-text me-3" title="Uptime" id="header-uptime"></span> <span class="navbar-text me-2 small" title="Entity Count" id="header-entities"></span>
<span class="navbar-text me-3" title="Map Name" id="header-map"></span> <button class="btn btn-danger btn-sm ms-auto" type="button" id="btn-disconnect">Disconnect</button>
<span class="navbar-text me-3" title="Players" id="header-players"></span>
<span class="navbar-text me-3" title="Framerate" id="header-fps"></span>
<span class="navbar-text me-3" title="Entity Count" id="header-entities"></span>
<button class="btn btn-danger ms-auto" type="button" id="btn-disconnect">Disconnect</button>
</div>
</div> </div>
</nav> </nav>
js/pages/serverInfo.js
+4 -4
View File
@@ -19,7 +19,7 @@ function ServerInfoPage(params, container) {
'<h4 class="card-title mb-0">Server Performance</h4>' + '<h4 class="card-title mb-0">Server Performance</h4>' +
'</div>' + '</div>' +
'<div id="performanceCollapse" class="collapse show">' + '<div id="performanceCollapse" class="collapse show">' +
'<div class="card-body"><svg id="chart-performance"></svg></div>' + '<div class="card-body"><svg id="chart-performance" style="height:200px;width:100%"></svg></div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="card mb-3">' + '<div class="card mb-3">' +
@@ -28,7 +28,7 @@ function ServerInfoPage(params, container) {
'<h4 class="card-title mb-0">Server Networking</h4>' + '<h4 class="card-title mb-0">Server Networking</h4>' +
'</div>' + '</div>' +
'<div id="networkCollapse" class="collapse show">' + '<div id="networkCollapse" class="collapse show">' +
'<div class="card-body"><svg id="chart-network"></svg></div>' + '<div class="card-body"><svg id="chart-network" style="height:250px;width:100%"></svg></div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="card mb-3">' + '<div class="card mb-3">' +
@@ -37,7 +37,7 @@ function ServerInfoPage(params, container) {
'<h4 class="card-title mb-0">Players</h4>' + '<h4 class="card-title mb-0">Players</h4>' +
'</div>' + '</div>' +
'<div id="playersCollapse" class="collapse show">' + '<div id="playersCollapse" class="collapse show">' +
'<div class="card-body"><svg id="chart-players"></svg></div>' + '<div class="card-body"><svg id="chart-players" style="height:250px;width:100%"></svg></div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
@@ -121,7 +121,7 @@ function ServerInfoPage(params, container) {
if (data.hasOwnProperty(key)) { if (data.hasOwnProperty(key)) {
var val = data[key]; var val = data[key];
if (typeof val === 'number') val = formatNumber(val); if (typeof val === 'number') val = formatNumber(val);
fieldsHtml += '<div class="col-sm-4"><p><span class="text-muted">' + key + ':</span> <span>' + val + '</span></p></div>'; fieldsHtml += '<div class="col-sm-4"><p><span class="text-white-50">' + key + ':</span> <span>' + val + '</span></p></div>';
} }
} }
document.getElementById('si-fields').innerHTML = fieldsHtml; document.getElementById('si-fields').innerHTML = fieldsHtml;
rcon.css
+6 -4
View File
@@ -5,6 +5,8 @@
--rcon-text: #cfd2da; --rcon-text: #cfd2da;
--rcon-accent: #1ca8dd; --rcon-accent: #1ca8dd;
--rcon-card-bg: #434857; --rcon-card-bg: #434857;
/* Override BS5 dark theme body background */
--bs-body-bg: #252830;
} }
body { body {
@@ -79,7 +81,7 @@ a:hover { color: #fff; text-decoration: none; }
box-shadow: 0 0 0 0.2rem rgba(28, 168, 221, 0.25); box-shadow: 0 0 0 0.2rem rgba(28, 168, 221, 0.25);
} }
/* Card dark theme */ /* Cards — override BS dark-theme bg to our darker shade */
.card { .card {
background-color: var(--rcon-card-bg); background-color: var(--rcon-card-bg);
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
@@ -104,7 +106,7 @@ a:hover { color: #fff; text-decoration: none; }
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
} }
/* Navbar text color override for dark theme */ /* Navbar text color override */
.navbar-dark .navbar-text { .navbar-dark .navbar-text {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
} }
@@ -116,9 +118,9 @@ a:hover { color: #fff; text-decoration: none; }
border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15);
} }
/* Chart panels */ /* Chart SVGs */
#chart-performance, #chart-performance,
#chart-network, #chart-network,
#chart-players { #chart-players {
min-height: 200px; display: block;
} }