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; font-size: 11px;
color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.35);
} }
.rsl-screens { /* Sparkline replaces the hard-coded screen count in the header */
.rsl-sparkline {
display: flex; display: flex;
flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: 1px; gap: 3px;
height: 32px;
} }
.rsl-screens__val { .rsl-spark__bar {
font-size: 22px; width: 5px;
font-weight: 700; background: rgba(255,255,255,0.25);
font-variant-numeric: tabular-nums; border-radius: 2px 2px 0 0;
line-height: 1; min-height: 4px;
animation: rsl-spark-idle 3.5s ease-in-out infinite;
} }
.rsl-screens__lbl { .rsl-spark__bar:nth-child(odd) { animation-delay: 0.2s; }
font-size: 10px; .rsl-spark__bar:nth-child(even) { animation-delay: 0.7s; }
color: rgba(255,255,255,0.4); @keyframes rsl-spark-idle {
text-transform: uppercase; 0%,100% { opacity: 0.9; }
letter-spacing: 0.5px; 50% { opacity: 0.45; }
} }
.rsl-kpis { .rsl-kpis {
display: flex; display: flex;
@@ -11219,30 +11221,43 @@ p:last-child { margin-bottom: 0; }
background: rgba(255,255,255,0.04); background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px 8px 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 6px;
align-items: center; align-items: center;
} }
.rsl-kpi--primary { .rsl-kpi--primary {
background: rgba(var(--color-primary-rgb),0.1); background: rgba(var(--color-primary-rgb),0.1);
border-color: rgba(var(--color-primary-rgb),0.3); border-color: rgba(var(--color-primary-rgb),0.3);
} }
.rsl-kpi__val { /* Mini bar chart inside each KPI tile */
font-size: 16px; .rsl-kpi__bars {
font-weight: 700; display: flex;
font-variant-numeric: tabular-nums; align-items: flex-end;
color: #fff; gap: 3px;
width: 100%;
height: 28px;
} }
.rsl-kpi--primary .rsl-kpi__val { .rsl-kpi__bar {
color: var(--color-primary); flex: 1;
animation: rsl-kpi-tick 6s ease-in-out infinite; 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 { .rsl-kpi--primary .rsl-kpi__bar {
0%,40% { opacity: 1; } background: var(--color-primary);
50% { opacity: 0.3; } }
60%,100%{ opacity: 1; } .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 { .rsl-kpi__lbl {
font-size: 9px; font-size: 9px;
@@ -11290,17 +11305,7 @@ p:last-child { margin-bottom: 0; }
0%,100% { filter: brightness(1); } 0%,100% { filter: brightness(1); }
50% { filter: brightness(1.35); box-shadow: 0 0 8px rgba(251,191,36,0.5); } 50% { filter: brightness(1.35); box-shadow: 0 0 8px rgba(251,191,36,0.5); }
} }
.rsl-tier__rate { /* .rsl-tier__rate removed — no specific margin percentages displayed */
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-next { .rsl-next {
display: flex; display: flex;
flex-direction: column; 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-badge">&#9733; Gold Partner</div>';
$rs .= '<div class="rsl-sub">Member since 2023</div>'; $rs .= '<div class="rsl-sub">Member since 2023</div>';
$rs .= '</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>'; $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-kpis">';
$rs .= '<div class="rsl-kpi"><div class="rsl-kpi__val">32%</div><div class="rsl-kpi__lbl">Margin</div></div>'; foreach ($kpis as $k) {
$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 ' . trim($k['cls']) . '">';
$rs .= '<div class="rsl-kpi"><div class="rsl-kpi__val">14</div><div class="rsl-kpi__lbl">Clients</div></div>'; $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>'; $rs .= '</div>';
/* Tier progress bars */ /* Tier progress bars — no percentage labels */
$rs .= '<div class="rsl-tiers">'; $rs .= '<div class="rsl-tiers">';
$tiers = [ $tiers = [
['name' => 'Silver', 'rate' => '25%', 'cls' => 'silver', 'w' => '100'], ['name' => 'Silver', 'cls' => 'silver', 'w' => '100'],
['name' => 'Gold &#9733;', 'rate' => '32%', 'cls' => 'gold', 'w' => '68', 'active' => true], ['name' => 'Gold &#9733;', 'cls' => 'gold', 'w' => '68', 'active' => true],
['name' => 'Platinum', 'rate' => '40%', 'cls' => 'plat', 'w' => '30'], ['name' => 'Platinum', 'cls' => 'plat', 'w' => '30'],
]; ];
foreach ($tiers as $t) { foreach ($tiers as $t) {
$act = !empty($t['active']) ? ' rsl-tier--active' : ''; $act = !empty($t['active']) ? ' rsl-tier--active' : '';
$rs .= '<div class="rsl-tier' . $act . '">'; $rs .= '<div class="rsl-tier' . $act . '">';
$rs .= '<span class="rsl-tier__name">' . $t['name'] . '</span>'; $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 .= '<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>';
} }
$rs .= '</div>'; $rs .= '</div>';
/* Progress to Platinum */ /* Progress to next tier */
$rs .= '<div class="rsl-next">'; $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 class="rsl-next__bar"><div class="rsl-next__fill"></div></div>';
$rs .= '</div>'; $rs .= '</div>';