OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Add dashboard TV frame styles and update rendering structure for animated charts

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 02:23:06 -05:00
parent b37bcfb72b
commit 954c418556
2 changed files with 61 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
theme/assets/css/main.css
View File

@@ -1995,6 +1995,61 @@ p:last-child { margin-bottom: 0; }
box-shadow: none;
}
/* ── Dashboard TV frame ────────────────────────── */
.dashboard-tv {
display: flex;
flex-direction: column;
align-items: center;
}
.dashboard-tv__body {
width: 100%;
max-width: 520px;
background: var(--color-bg-alt);
border: 4px solid var(--color-bg-alt);
border-radius: 6px 6px 4px 4px;
outline: 1px solid var(--color-border);
padding: 3px;
position: relative;
box-shadow: 0 14px 48px rgba(0,0,0,0.55);
}
.dashboard-tv__body::after {
content: '\25B6';
position: absolute;
bottom: -13px;
left: 50%;
transform: translateX(-50%);
font-size: 8px;
color: rgba(74,222,128,0.7);
}
.dashboard-tv__screen {
width: 100%;
aspect-ratio: 16/9;
background: #111;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.dashboard-tv__screen .dashboard-chart {
width: 100%;
height: 100%;
display: block;
}
.dashboard-tv__feet {
display: flex;
justify-content: space-between;
width: 60%;
max-width: 300px;
}
.dashboard-tv__foot {
width: 12px;
height: 8px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: 0 0 4px 4px;
}
/* ── 10b. Device Animator ───────────────────────────────────── */
.platform-visual.has-anim {
background: none !important;
@@ -2614,17 +2669,6 @@ p:last-child { margin-bottom: 0; }
}
/* ── Dashboard Chart ───────────────────────────────────── */
.dashboard-chart-container {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 1.5rem;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.dashboard-chart {
width: 100%;
height: auto;

8
theme/blocks/index.php
View File

@@ -1347,8 +1347,10 @@ function oribi_render_platform_row( $a ) {
// Render animated dashboard chart SVG
// Text uses class hooks: .ct = title, .cl = label, .cv = value
// JS will dynamically set fill colours based on data-theme
$visual_html = '<div class="dashboard-chart-container" data-dashboard-container="true">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts" style="border-radius:4px">
$visual_html = '<div class="dashboard-tv" data-dashboard-container="true">
<div class="dashboard-tv__body">
<div class="dashboard-tv__screen">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts">
<defs>
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#004225" stop-opacity="1"/>
@@ -1455,6 +1457,8 @@ function oribi_render_platform_row( $a ) {
</g>
</g>
</svg>
</div></div>
<div class="dashboard-tv__feet"><div class="dashboard-tv__foot"></div><div class="dashboard-tv__foot"></div></div>
</div>';
$visual_cls = 'platform-visual has-dashboard';
} elseif ( $img_url ) {