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

feat: Replace hard-coded screen count with sparkline and update KPI rendering for improved visualization

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-06 07:22:38 -04:00
parent 974e048f76
commit 96677fdd77
2 changed files with 72 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11192,23 +11192,25 @@ p:last-child { margin-bottom: 0; }
font-size: 11px;
color: rgba(255,255,255,0.35);
}
.rsl-screens {
/* Sparkline replaces the hard-coded screen count in the header */
.rsl-sparkline {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
gap: 3px;
height: 32px;
}
.rsl-screens__val {
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
.rsl-spark__bar {
width: 5px;
background: rgba(255,255,255,0.25);
border-radius: 2px 2px 0 0;
min-height: 4px;
animation: rsl-spark-idle 3.5s ease-in-out infinite;
}
.rsl-screens__lbl {
font-size: 10px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
.rsl-spark__bar:nth-child(odd) { animation-delay: 0.2s; }
.rsl-spark__bar:nth-child(even) { animation-delay: 0.7s; }
@keyframes rsl-spark-idle {
0%,100% { opacity: 0.9; }
50% { opacity: 0.45; }
}
.rsl-kpis {
display: flex;
@@ -11219,30 +11221,43 @@ p:last-child { margin-bottom: 0; }
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
padding: 10px;
padding: 10px 8px 8px;
display: flex;
flex-direction: column;
gap: 3px;
gap: 6px;
align-items: center;
}
.rsl-kpi--primary {
background: rgba(var(--color-primary-rgb),0.1);
border-color: rgba(var(--color-primary-rgb),0.3);
}
.rsl-kpi__val {
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
/* Mini bar chart inside each KPI tile */
.rsl-kpi__bars {
display: flex;
align-items: flex-end;
gap: 3px;
width: 100%;
height: 28px;
}
.rsl-kpi--primary .rsl-kpi__val {
color: var(--color-primary);
animation: rsl-kpi-tick 6s ease-in-out infinite;
.rsl-kpi__bar {
flex: 1;
background: rgba(255,255,255,0.22);
border-radius: 2px 2px 0 0;
min-height: 4px;
transform-origin: bottom;
animation: rsl-bar-idle 4s ease-in-out infinite;
}
@keyframes rsl-kpi-tick {
0%,40% { opacity: 1; }
50% { opacity: 0.3; }
60%,100%{ opacity: 1; }
.rsl-kpi--primary .rsl-kpi__bar {
background: var(--color-primary);
}
.rsl-kpi__bar:nth-child(1) { animation-delay: 0s; }
.rsl-kpi__bar:nth-child(2) { animation-delay: 0.15s; }
.rsl-kpi__bar:nth-child(3) { animation-delay: 0.3s; }
.rsl-kpi__bar:nth-child(4) { animation-delay: 0.45s; }
.rsl-kpi__bar:nth-child(5) { animation-delay: 0.6s; }
@keyframes rsl-bar-idle {
0%,100% { opacity: 1; }
45%,55% { opacity: 0.6; }
}
.rsl-kpi__lbl {
font-size: 9px;
@@ -11290,17 +11305,7 @@ p:last-child { margin-bottom: 0; }
0%,100% { filter: brightness(1); }
50% { filter: brightness(1.35); box-shadow: 0 0 8px rgba(251,191,36,0.5); }
}
.rsl-tier__rate {
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.5);
min-width: 28px;
text-align: right;
flex-shrink: 0;
}
.rsl-tier--active .rsl-tier__rate {
color: #f59e0b;
}
/* .rsl-tier__rate removed — no specific margin percentages displayed */
.rsl-next {
display: flex;
flex-direction: column;

41
theme/blocks/index.php
View File

@@ -3550,36 +3550,53 @@ function oribi_render_platform_row($a)
$rs .= '<div class="rsl-badge">&#9733; Gold Partner</div>';
$rs .= '<div class="rsl-sub">Member since 2023</div>';
$rs .= '</div>';
$rs .= '<div class="rsl-screens"><span class="rsl-screens__val">248</span><span class="rsl-screens__lbl">screens</span></div>';
/* Sparkline replaces the hard-coded screen count */
$spark = [35, 45, 38, 55, 50, 68, 80];
$rs .= '<div class="rsl-sparkline">';
foreach ($spark as $h) {
$rs .= '<div class="rsl-spark__bar" style="height:' . $h . '%"></div>';
}
$rs .= '</div>';
$rs .= '</div>';
/* KPI row */
/* KPI row — mini bar charts, no specific figures */
$kpis = [
['label' => 'Margin', 'bars' => [48, 52, 58, 55, 65], 'cls' => ''],
['label' => 'Revenue', 'bars' => [38, 52, 48, 68, 78], 'cls' => 'rsl-kpi--primary'],
['label' => 'Clients', 'bars' => [42, 46, 54, 62, 70], 'cls' => ''],
];
$rs .= '<div class="rsl-kpis">';
$rs .= '<div class="rsl-kpi"><div class="rsl-kpi__val">32%</div><div class="rsl-kpi__lbl">Margin</div></div>';
$rs .= '<div class="rsl-kpi rsl-kpi--primary"><div class="rsl-kpi__val">$2,840</div><div class="rsl-kpi__lbl">This month</div></div>';
$rs .= '<div class="rsl-kpi"><div class="rsl-kpi__val">14</div><div class="rsl-kpi__lbl">Clients</div></div>';
foreach ($kpis as $k) {
$rs .= '<div class="rsl-kpi ' . trim($k['cls']) . '">';
$rs .= '<div class="rsl-kpi__bars">';
foreach ($k['bars'] as $h) {
$rs .= '<div class="rsl-kpi__bar" style="height:' . $h . '%"></div>';
}
$rs .= '</div>';
$rs .= '<div class="rsl-kpi__lbl">' . $k['label'] . '</div>';
$rs .= '</div>';
}
$rs .= '</div>';
/* Tier progress bars */
/* Tier progress bars — no percentage labels */
$rs .= '<div class="rsl-tiers">';
$tiers = [
['name' => 'Silver', 'rate' => '25%', 'cls' => 'silver', 'w' => '100'],
['name' => 'Gold &#9733;', 'rate' => '32%', 'cls' => 'gold', 'w' => '68', 'active' => true],
['name' => 'Platinum', 'rate' => '40%', 'cls' => 'plat', 'w' => '30'],
['name' => 'Silver', 'cls' => 'silver', 'w' => '100'],
['name' => 'Gold &#9733;', 'cls' => 'gold', 'w' => '68', 'active' => true],
['name' => 'Platinum', 'cls' => 'plat', 'w' => '30'],
];
foreach ($tiers as $t) {
$act = !empty($t['active']) ? ' rsl-tier--active' : '';
$rs .= '<div class="rsl-tier' . $act . '">';
$rs .= '<span class="rsl-tier__name">' . $t['name'] . '</span>';
$rs .= '<div class="rsl-tier__bar"><div class="rsl-tier__fill rsl-tf--' . $t['cls'] . '" style="width:' . $t['w'] . '%"></div></div>';
$rs .= '<span class="rsl-tier__rate">' . $t['rate'] . '</span>';
$rs .= '</div>';
}
$rs .= '</div>';
/* Progress to Platinum */
/* Progress to next tier */
$rs .= '<div class="rsl-next">';
$rs .= '<span class="rsl-next__lbl">116 screens to Platinum</span>';
$rs .= '<span class="rsl-next__lbl">Progress to Platinum</span>';
$rs .= '<div class="rsl-next__bar"><div class="rsl-next__fill"></div></div>';
$rs .= '</div>';