iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feeat: improve icons, update screenshots

Browse Source
This commit is contained in:
0x1d
2025-10-14 10:38:47 +02:00
parent fa6d72ea62
commit f77973a876
7 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/cluster.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 502 KiB

After

Width:  |  Height:  |  Size: 458 KiB

BIN
assets/firmware.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 303 KiB

BIN
assets/monitoring.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 KiB

After

Width:  |  Height:  |  Size: 455 KiB

BIN
assets/topology.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 399 KiB

After

Width:  |  Height:  |  Size: 390 KiB

9
public/index.html
View File

@@ -30,9 +30,12 @@
</button>
<button class="nav-tab" data-view="topology">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
<path d="M6 3v6M6 15v6M18 3v6M18 15v6"/>
<rect x="3" y="9" width="6" height="6" rx="2"/>
<rect x="15" y="9" width="6" height="6" rx="2"/>
<circle cx="12" cy="4" r="1.6"/>
<circle cx="19" cy="9" r="1.6"/>
<circle cx="16" cy="18" r="1.6"/>
<circle cx="8" cy="18" r="1.6"/>
<circle cx="5" cy="9" r="1.6"/>
<path d="M12 4L16 18M16 18L5 9M5 9L19 9M19 9L8 18M8 18L12 4"/>
</svg>
Topology
</button>

11
public/scripts/icons.js
View File

@@ -19,7 +19,16 @@
const Icons = {
// Navigation / sections
cluster: (o) => withSvg(`<circle cx="12" cy="12" r="9"/><circle cx="8" cy="10" r="1.5"/><circle cx="16" cy="8" r="1.5"/><circle cx="14" cy="15" r="1.5"/><path d="M9 11l3 3M9 11l6-3"/>`, o),
topology: (o) => withSvg(`<path d="M6 3v6M6 15v6M18 3v6M18 15v6"/><rect x="3" y="9" width="6" height="6" rx="2"/><rect x="15" y="9" width="6" height="6" rx="2"/>`, o),
topology: (o) => withSvg(`
<g transform="rotate(-60 12 12)">
<circle cx="12" cy="4" r="1.6"/>
<circle cx="19" cy="9" r="1.6"/>
<circle cx="16" cy="18" r="1.6"/>
<circle cx="8" cy="18" r="1.6"/>
<circle cx="5" cy="9" r="1.6"/>
<path d="M12 4L16 18M16 18L5 9M5 9L19 9M19 9L8 18M8 18L12 4"/>
</g>
`, o),
monitoring: (o) => withSvg(`<path d="M3 12h3l2 7 4-14 3 10 2-6h4"/>`, o),
firmware: (o) => withSvg(`<path d="M4 7l8-4 8 4v10l-8 4-8-4z"/><path d="M12 8v8"/>`, o),

11
public/styles/main.css
View File

@@ -1,3 +1,8 @@
/* Slight rotation for the Topology icon in the main navigation only */
.main-navigation .nav-left .nav-tab[data-view="topology"] > svg {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
* {
margin: 0;
padding: 0;
@@ -27,6 +32,12 @@ h3 > svg,
vertical-align: middle;
}
/* Navigation icons slightly larger for readability */
.nav-tab > svg {
width: 18px;
height: 18px;
}
/* Monitoring view: slightly larger summary stat icons */
.summary-stats .stat-icon > svg {
width: 22px;