Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(system): put OS + CPU logos in a rounded tile (backup-tile style)

Browse Source 
Wrap both the OS and CPU logos in a 36x36 rounded icon tile with a subtle
background — same treatment as the backup app-list tiles — at a uniform
size, with the logo centred inside.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-29 00:21:31 +01:00
parent 00736b57a7
commit 83b129fdad
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
containers/libreportal/frontend/css/admin.css
View File

@ -324,10 +324,22 @@
color: var(--text-primary); color: var(--text-primary);
word-break: break-word; word-break: break-word;
} }
.sys-os-value { display: inline-flex; align-items: center; gap: 8px; } /* OS + CPU value rows: a rounded icon tile (same look as the backup app
.sys-os-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; } tiles) followed by the label text. */
/* CPU vendor logos are wordmarks (wide), so size by height and let width follow. */ .sys-id-value { display: inline-flex; align-items: center; gap: 10px; }
.sys-cpu-icon { height: 18px; width: auto; max-width: 70px; flex-shrink: 0; object-fit: contain; } .sys-id-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
box-sizing: border-box;
padding: 5px;
border-radius: 8px;
background: rgba(var(--text-rgb), 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
}
.sys-id-icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* Per-app table */ /* Per-app table */
.sys-apps-wrap { .sys-apps-wrap {

8
containers/libreportal/frontend/js/components/admin/admin-system.js
View File

@ -406,8 +406,8 @@ class AdminSystem {
const slug = String(os || '').toLowerCase().replace(/[^a-z0-9]/g, '') || 'linux'; const slug = String(os || '').toLowerCase().replace(/[^a-z0-9]/g, '') || 'linux';
return `<div class="sys-stat"> return `<div class="sys-stat">
<span class="sys-stat-label">OS</span> <span class="sys-stat-label">OS</span>
<strong class="sys-stat-value sys-os-value"> <strong class="sys-stat-value sys-id-value">
<img class="sys-os-icon" src="/icons/os/${slug}.svg" alt="" onerror="this.onerror=null;this.src='/icons/os/linux.svg'"> <span class="sys-id-icon"><img src="/icons/os/${slug}.svg" alt="" onerror="this.onerror=null;this.src='/icons/os/linux.svg'"></span>
${this.escape(os || '—')} ${this.escape(os || '—')}
</strong> </strong>
</div>`; </div>`;
@ -429,10 +429,10 @@ class AdminSystem {
_cpuStat(cpu) { _cpuStat(cpu) {
const raw = String(cpu || ''); const raw = String(cpu || '');
const vendor = /amd/i.test(raw) ? 'amd' : /intel/i.test(raw) ? 'intel' : null; const vendor = /amd/i.test(raw) ? 'amd' : /intel/i.test(raw) ? 'intel' : null;
const icon = vendor ? `<img class="sys-cpu-icon" src="/icons/cpu/${vendor}.svg" alt="${vendor}">` : ''; const icon = vendor ? `<span class="sys-id-icon"><img src="/icons/cpu/${vendor}.svg" alt="${vendor}"></span>` : '';
return `<div class="sys-stat"> return `<div class="sys-stat">
<span class="sys-stat-label">CPU</span> <span class="sys-stat-label">CPU</span>
<strong class="sys-stat-value sys-os-value">${icon}${this.escape(this._cleanCpu(raw))}</strong> <strong class="sys-stat-value sys-id-value">${icon}${this.escape(this._cleanCpu(raw))}</strong>
</div>`; </div>`;
} }
} }