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

Refactor platform row to implement promotional content layouts for welcome, sale, and menu displays

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:43:07 -05:00
parent 624a5c2d4e
commit 75588a5151
2 changed files with 149 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5070,13 +5070,7 @@ p:last-child { margin-bottom: 0; }
border-radius: 2px;
position: relative;
overflow: hidden;
background:
repeating-linear-gradient(
180deg,
transparent, transparent 3px,
rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px
),
linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%);
background: linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%);
}
.bd-device__label {
font-size: 10px;
@@ -5234,6 +5228,126 @@ p:last-child { margin-bottom: 0; }
border: 1px solid rgba(76,175,80,.12);
}
/* ── Promotional content layouts ─────────────────────── */
.bd-promo {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
/* ── Kiosk: Welcome / check-in screen ── */
.bd-promo--welcome {
align-items: center;
text-align: center;
gap: 4px;
}
.bd-promo__hero {
width: 100%;
flex: 1;
min-height: 28px;
background: linear-gradient(135deg, rgba(76,175,80,.18) 0%, rgba(76,175,80,.06) 100%);
border-radius: 2px;
}
.bd-promo__heading {
width: 70%;
height: 5px;
background: rgba(255,255,255,.3);
border-radius: 1px;
}
.bd-promo__text {
width: 85%;
height: 3px;
background: rgba(255,255,255,.14);
border-radius: 1px;
}
.bd-promo__btn {
width: 45%;
height: 8px;
background: #4CAF50;
border-radius: 3px;
margin-top: 2px;
}
/* ── Wall display: Sale / featured product ── */
.bd-promo--sale {
gap: 0;
}
.bd-promo__cols {
display: flex;
gap: 5px;
flex: 1;
}
.bd-promo__visual {
flex: 1;
background: linear-gradient(160deg, rgba(76,175,80,.20) 0%, rgba(76,175,80,.06) 100%);
border-radius: 2px;
min-height: 24px;
}
.bd-promo__info {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
justify-content: center;
}
.bd-promo__badge {
width: 28px;
height: 6px;
background: rgba(239,68,68,.7);
border-radius: 2px;
}
.bd-promo--sale .bd-promo__heading {
width: 90%;
height: 4px;
}
.bd-promo--sale .bd-promo__text {
width: 100%;
height: 3px;
}
.bd-promo__text--short {
width: 65% !important;
}
.bd-promo__price {
width: 36px;
height: 6px;
background: rgba(255,200,80,.6);
border-radius: 1px;
margin-top: 1px;
}
/* ── Interactive: Touch menu / category grid ── */
.bd-promo--menu {
gap: 3px;
}
.bd-promo--menu .bd-promo__heading {
width: 55%;
height: 4px;
}
.bd-promo__grid {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
}
.bd-promo__tile {
background: rgba(255,255,255,.06);
border-radius: 2px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.bd-promo__tile-img {
flex: 1;
background: linear-gradient(135deg, rgba(76,175,80,.14) 0%, rgba(76,175,80,.04) 100%);
}
.bd-promo__tile-lbl {
height: 4px;
margin: 2px 3px;
background: rgba(255,255,255,.18);
border-radius: 1px;
}
/* ═══════════════════════════════════════════════════════════
KEYFRAMES (8 s cycle)
═══════════════════════════════════════════════════════════ */
@@ -5278,19 +5392,6 @@ p:last-child { margin-bottom: 0; }
96%, 100% { opacity: 0; transform: translateY(4px); }
}
/* ── Scanline sweep (reuses da-scan) ───────────────────────── */
.bd-device__screen::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(76,175,80,.18), transparent);
animation: da-scan 4s linear infinite;
pointer-events: none;
z-index: 3;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
.bd-stage { max-width: 360px; gap: 12px; }
@@ -5314,8 +5415,7 @@ p:last-child { margin-bottom: 0; }
.bd-splash__logo,
.bd-ui,
.bd-ui__brand-bar,
.bd-ui__content,
.bd-device__screen::after { animation: none !important; }
.bd-ui__content { animation: none !important; }
/* Static fallback: show branded UI */
.bd-splash { opacity: 0; }
.bd-ui { opacity: 1; }

36
theme/blocks/index.php
View File

@@ -1663,9 +1663,12 @@ function oribi_render_platform_row( $a ) {
$bd .= '<div class="bd-ui">';
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
$bd .= '<div class="bd-ui__content">';
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
$bd .= '<div class="bd-promo bd-promo--welcome">';
$bd .= '<div class="bd-promo__hero"></div>';
$bd .= '<div class="bd-promo__heading"></div>';
$bd .= '<div class="bd-promo__text"></div>';
$bd .= '<div class="bd-promo__btn"></div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
@@ -1683,9 +1686,18 @@ function oribi_render_platform_row( $a ) {
$bd .= '<div class="bd-ui">';
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
$bd .= '<div class="bd-ui__content">';
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
$bd .= '<div class="bd-promo bd-promo--sale">';
$bd .= '<div class="bd-promo__cols">';
$bd .= '<div class="bd-promo__visual"></div>';
$bd .= '<div class="bd-promo__info">';
$bd .= '<div class="bd-promo__badge"></div>';
$bd .= '<div class="bd-promo__heading"></div>';
$bd .= '<div class="bd-promo__text"></div>';
$bd .= '<div class="bd-promo__text bd-promo__text--short"></div>';
$bd .= '<div class="bd-promo__price"></div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
@@ -1704,9 +1716,15 @@ function oribi_render_platform_row( $a ) {
$bd .= '<div class="bd-ui">';
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
$bd .= '<div class="bd-ui__content">';
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
$bd .= '<div class="bd-promo bd-promo--menu">';
$bd .= '<div class="bd-promo__heading"></div>';
$bd .= '<div class="bd-promo__grid">';
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
$bd .= '<div class="bd-promo__tile"><div class="bd-promo__tile-img"></div><div class="bd-promo__tile-lbl"></div></div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';