dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-08-28 05:54:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Customization: compact icon tabs — no scrolling needed

Browse Source 
Tabs now use emoji + short text label below, flex equally across
panel width. No horizontal scrolling.
This commit is contained in:
you
2026-03-23 01:17:39 +00:00
parent 468e601096
commit 65ff1ad6fe
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/customize.js
+10 -9
View File
@@ -159,9 +159,10 @@
.cust-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 4px; }
.cust-close:hover { background: var(--surface-3); color: var(--text); }
.cust-body { flex: 1; overflow-y: auto; padding: 0; }
.cust-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.cust-tab { padding: 8px 12px; cursor: pointer; border: none; background: none; color: var(--text-muted);
font-size: 12px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cust-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cust-tab { padding: 8px 10px; cursor: pointer; border: none; background: none; color: var(--text-muted);
font-size: 12px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 1; text-align: center; }
.cust-tab-text { font-size: 10px; display: block; }
.cust-tab:hover { color: var(--text); }
.cust-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.cust-panel { display: none; padding: 12px 16px; }
@@ -233,15 +234,15 @@
function renderTabs() {
var tabs = [
{ id: 'branding', label: '🏷️ Branding' },
{ id: 'theme', label: '🎨 Theme' },
{ id: 'nodes', label: '📡 Nodes' },
{ id: 'home', label: '🏠 Home Page' },
{ id: 'export', label: '📤 Export' }
{ id: 'branding', label: '🏷️', title: 'Branding' },
{ id: 'theme', label: '🎨', title: 'Theme Colors' },
{ id: 'nodes', label: '📡', title: 'Node Colors' },
{ id: 'home', label: '🏠', title: 'Home Page' },
{ id: 'export', label: '📤', title: 'Export / Save' }
];
return '<div class="cust-tabs">' +
tabs.map(function (t) {
return '<button class="cust-tab' + (t.id === activeTab ? ' active' : '') + '" data-tab="' + t.id + '">' + t.label + '</button>';
return '<button class="cust-tab' + (t.id === activeTab ? ' active' : '') + '" data-tab="' + t.id + '" title="' + t.title + '">' + t.label + ' <span class="cust-tab-text">' + t.title + '</span></button>';
}).join('') + '</div>';
}
public/index.html
+1 -1
View File
@@ -101,6 +101,6 @@
<script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774227196" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774228659" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>