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

feat: Refactor stick device positioning for improved responsiveness and animation

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-17 22:18:39 -04:00
parent c7e433d4c1
commit e0240d5e7a
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/features.php
View File

@@ -56,13 +56,13 @@ return <<<'ORIBI_SYNC_CONTENT'
<!-- /wp:oribi/feature-section -->
<!-- wp:oribi/feature-section {"heading":"Prove Every Play","lead":"Know exactly what's playing, where, and when. Export reports, automate delivery, and monitor the health of every player in your network."} -->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-chart-pie","title":"Proof of Play","description":"Track every piece of content at the layout, media, and widget level. Configurable retention depth lets you store as much history as you need.","cardStyle":"bold-statement"} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-chart-pie","title":"Proof of Play","description":"Track every piece of content at the layout, media, and widget level. Configurable retention depth lets you store as much history as you need."} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-file-pdf","title":"Scheduled Reports","description":"Set up automated PDF reports and have them emailed to stakeholders on your schedule. Export raw data as CSV for deeper analysis.","cardStyle":"minimal-feature"} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-file-pdf","title":"Scheduled Reports","description":"Set up automated PDF reports and have them emailed to stakeholders on your schedule. Export raw data as CSV for deeper analysis."} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-heart-pulse","title":"Player Health","description":"Monitor connection status, storage usage, and player performance live. Get alerted the moment a player goes offline.","cardStyle":"action"} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-heart-pulse","title":"Player Health","description":"Monitor connection status, storage usage, and player performance live. Get alerted the moment a player goes offline."} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-box-archive","title":"Content Usage","description":"See which media is assigned to layouts and which is unused. Library usage reports by user help you manage storage and keep your library clean.","cardStyle":"prominent-stat"} /-->
<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-box-archive","title":"Content Usage","description":"See which media is assigned to layouts and which is unused. Library usage reports by user help you manage storage and keep your library clean."} /-->
<!-- /wp:oribi/feature-section -->
<!-- wp:oribi/value-section {"variant":"alt","heading":"Live in Minutes. Secure on Every Plan.","lead":"Every plan includes 2FA, role-based access, and audit trails. Scale your team and your network without worrying about per-user fees or access limits.","columns":4} -->

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

@@ -3074,6 +3074,9 @@ p:last-child { margin-bottom: 0; }
align-self: center;
}
.ts-stage {
--ts-stick-right: -96px;
--ts-stick-start-x: 80px;
--ts-stick-plug-x: 0px;
position: relative;
width: 100%;
aspect-ratio: 4/3;
@@ -3451,9 +3454,9 @@ p:last-child { margin-bottom: 0; }
/* ── Stick device ── */
.ts-stick {
position: absolute;
right: -44px;
right: var(--ts-stick-right);
top: 50%;
transform: translateY(-50%) translateX(80px) scaleX(-1);
transform: translateY(-50%) translateX(var(--ts-stick-start-x)) scaleX(-1);
display: flex;
align-items: center;
opacity: 0;
@@ -3522,20 +3525,22 @@ p:last-child { margin-bottom: 0; }
animation: ts-slide-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes ts-slide-in {
0% { opacity: 0; transform: translateY(-50%) translateX(80px) scaleX(-1); }
20% { opacity: 1; transform: translateY(-50%) translateX(60px) scaleX(-1); }
70% { transform: translateY(-50%) translateX(8px) scaleX(-1); }
85% { transform: translateY(-50%) translateX(12px) scaleX(-1); }
100% { opacity: 1; transform: translateY(-50%) translateX(6px) scaleX(-1); }
0% { opacity: 0; transform: translateY(-50%) translateX(var(--ts-stick-start-x)) scaleX(-1); }
20% { opacity: 1; transform: translateY(-50%) translateX(calc(var(--ts-stick-start-x) - 20px)) scaleX(-1); }
70% { transform: translateY(-50%) translateX(calc(var(--ts-stick-plug-x) + 8px)) scaleX(-1); }
85% { transform: translateY(-50%) translateX(calc(var(--ts-stick-plug-x) + 12px)) scaleX(-1); }
100% { opacity: 1; transform: translateY(-50%) translateX(var(--ts-stick-plug-x)) scaleX(-1); }
}
/* Responsive scale-down */
@media (max-width: 900px) {
.ts-stage { --ts-stick-right: -84px; }
.ts-tv__body { width: 320px; height: 188px; }
.ts-tv__feet { width: 178px; }
.ts-stick__body { width: 68px; height: 26px; }
.ts-stage { padding-right: 72px; }
}
@media (max-width: 640px) {
.ts-stage { --ts-stick-right: -66px; }
.ts-tv__body { width: 240px; height: 142px; }
.ts-tv__feet { width: 134px; }
.ts-stick__body { width: 52px; height: 20px; }
@@ -3547,7 +3552,7 @@ p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.ts-stage .ts-stick {
opacity: 1;
transform: translateY(-50%) translateX(6px) scaleX(-1);
transform: translateY(-50%) translateX(var(--ts-stick-plug-x)) scaleX(-1);
}
.ts-stage.is-animating .ts-stick { animation: none; }
.ts-stage.is-plugged .ts-tv__screen { animation: none; }