feat: Implement card scene animations and enhance feature card attributes for improved visual storytelling
This commit is contained in:
Matt Batchelder
@@ -383,6 +383,7 @@ add_action('init', function () {
|
||||
'description' => ['type' => 'string', 'default' => ''],
|
||||
'url' => ['type' => 'string', 'default' => ''],
|
||||
'centered' => ['type' => 'boolean', 'default' => false],
|
||||
'scene' => ['type' => 'string', 'default' => ''],
|
||||
],
|
||||
oribi_card_image_attributes()
|
||||
),
|
||||
@@ -1084,6 +1085,7 @@ function oribi_render_feature_card($a)
|
||||
$href = !empty($a['url']) ? ' href="' . esc_url($a['url']) . '"' : '';
|
||||
$link_cls = !empty($a['url']) ? ' feature-card-link' : '';
|
||||
$center = !empty($a['centered']);
|
||||
$scene = !empty($a['scene']) ? trim($a['scene']) : '';
|
||||
$img = oribi_card_image_html($a);
|
||||
$img_cls = $img['card_class'] ? ' ' . $img['card_class'] : '';
|
||||
|
||||
@@ -1114,7 +1116,9 @@ function oribi_render_feature_card($a)
|
||||
<?php echo $img['html']; ?>
|
||||
<?php
|
||||
endif; ?>
|
||||
<?php if ((!$img['html'] || $img['position'] !== 'replace-icon') && oribi_has_icon($a)): ?>
|
||||
<?php if ($scene): ?>
|
||||
<?php echo oribi_render_card_scene($scene); ?>
|
||||
<?php elseif ((!$img['html'] || $img['position'] !== 'replace-icon') && oribi_has_icon($a)): ?>
|
||||
<div class="feature-icon"<?php echo $center ? ' style="margin-inline:auto;"' : ''; ?>><?php echo oribi_render_icon($a); ?></div>
|
||||
<?php
|
||||
endif; ?>
|
||||
@@ -1126,6 +1130,94 @@ function oribi_render_feature_card($a)
|
||||
return ob_get_clean();
|
||||
}
|
||||
|
||||
/* ── Card Scene Renderer ────────────────────────────────────────────────────── */
|
||||
function oribi_render_card_scene($scene)
|
||||
{
|
||||
switch ($scene) {
|
||||
|
||||
case 'cms':
|
||||
return
|
||||
'<div class="card-scene cs-cms" aria-hidden="true">'
|
||||
. '<div class="cs-screen">'
|
||||
. '<div class="cs-topbar"><div class="cs-dots"><span></span><span></span><span></span></div><div class="cs-title">Media Library</div></div>'
|
||||
. '<div class="cs-files">'
|
||||
. '<div class="cs-file cs-file--1"><span class="cs-ftype cs-ftype-img">IMG</span><div class="cs-fbar"></div><span class="cs-fsize">2.4 MB</span></div>'
|
||||
. '<div class="cs-file cs-file--2"><span class="cs-ftype cs-ftype-vid">VID</span><div class="cs-fbar"></div><span class="cs-fsize">18 MB</span></div>'
|
||||
. '<div class="cs-file cs-file--3"><span class="cs-ftype cs-ftype-html">HTML</span><div class="cs-fbar"></div><span class="cs-fsize">64 KB</span></div>'
|
||||
. '</div>'
|
||||
. '<div class="cs-upload">+ Upload</div>'
|
||||
. '</div></div>';
|
||||
|
||||
case 'scheduler':
|
||||
return
|
||||
'<div class="card-scene cs-scheduler" aria-hidden="true">'
|
||||
. '<div class="cs-screen">'
|
||||
. '<div class="cs-topbar"><div class="cs-dots"><span></span><span></span><span></span></div><div class="cs-title">Scheduler</div></div>'
|
||||
. '<div class="cs-week">'
|
||||
. '<div class="cs-cal-day"><span>M</span><div class="cs-cal-bar"></div></div>'
|
||||
. '<div class="cs-cal-day"><span>T</span><div class="cs-cal-bar"></div></div>'
|
||||
. '<div class="cs-cal-day"><span>W</span><div class="cs-cal-bar"></div></div>'
|
||||
. '<div class="cs-cal-day"><span>T</span><div class="cs-cal-bar"></div></div>'
|
||||
. '<div class="cs-cal-day"><span>F</span><div class="cs-cal-bar"></div></div>'
|
||||
. '<div class="cs-cal-day"><span>S</span><div class="cs-cal-bar"></div></div>'
|
||||
. '<div class="cs-cal-day"><span>S</span><div class="cs-cal-bar"></div></div>'
|
||||
. '</div>'
|
||||
. '</div></div>';
|
||||
|
||||
case 'data-feed':
|
||||
return
|
||||
'<div class="card-scene cs-data-feed" aria-hidden="true">'
|
||||
. '<div class="cs-screen">'
|
||||
. '<div class="cs-topbar"><div class="cs-live-dot"></div><div class="cs-title">Live Feed</div></div>'
|
||||
. '<div class="cs-feed-rows">'
|
||||
. '<div class="cs-feed-row"><span class="cs-feed-label">TEMP</span><div class="cs-feed-val"><span class="cs-fv1-a">22.4°C</span><span class="cs-fv1-b">23.1°C</span><span class="cs-fv1-c">21.8°C</span></div></div>'
|
||||
. '<div class="cs-feed-row"><span class="cs-feed-label">QUEUE</span><div class="cs-feed-val"><span class="cs-fv2-a">14</span><span class="cs-fv2-b">17</span><span class="cs-fv2-c">11</span></div></div>'
|
||||
. '<div class="cs-feed-row"><span class="cs-feed-label">SALES</span><div class="cs-feed-val"><span class="cs-fv3-a">\$1,204</span><span class="cs-fv3-b">\$1,318</span><span class="cs-fv3-c">\$1,271</span></div></div>'
|
||||
. '</div>'
|
||||
. '</div></div>';
|
||||
|
||||
case 'templates':
|
||||
return
|
||||
'<div class="card-scene cs-templates" aria-hidden="true">'
|
||||
. '<div class="cs-screen">'
|
||||
. '<div class="cs-topbar"><div class="cs-dots"><span></span><span></span><span></span></div><div class="cs-title">Templates</div></div>'
|
||||
. '<div class="cs-tmpl-grid">'
|
||||
. '<div class="cs-tmpl cs-tmpl--1"><div class="cs-tmpl-thumb"></div><div class="cs-tmpl-line cs-tmpl-line--med"></div></div>'
|
||||
. '<div class="cs-tmpl cs-tmpl--2"><div class="cs-tmpl-line cs-tmpl-line--short"></div><div class="cs-tmpl-thumb"></div></div>'
|
||||
. '<div class="cs-tmpl cs-tmpl--3"><div class="cs-tmpl-thumb cs-tmpl-thumb--full"></div></div>'
|
||||
. '<div class="cs-tmpl cs-tmpl--4"><div class="cs-tmpl-line cs-tmpl-line--med"></div><div class="cs-tmpl-line cs-tmpl-line--short"></div><div class="cs-tmpl-line cs-tmpl-line--short"></div></div>'
|
||||
. '</div>'
|
||||
. '</div></div>';
|
||||
|
||||
case 'team':
|
||||
return
|
||||
'<div class="card-scene cs-team" aria-hidden="true">'
|
||||
. '<div class="cs-screen">'
|
||||
. '<div class="cs-topbar"><div class="cs-dots"><span></span><span></span><span></span></div><div class="cs-title">Team</div></div>'
|
||||
. '<div class="cs-team-avatars">'
|
||||
. '<div class="cs-avatar cs-avatar--1"><div class="cs-av-circle">A</div><div class="cs-av-role cs-role-admin">Admin</div></div>'
|
||||
. '<div class="cs-avatar cs-avatar--2"><div class="cs-av-circle">E</div><div class="cs-av-role cs-role-editor">Editor</div></div>'
|
||||
. '<div class="cs-avatar cs-avatar--3"><div class="cs-av-circle">V</div><div class="cs-av-role cs-role-viewer">Viewer</div></div>'
|
||||
. '</div>'
|
||||
. '<div class="cs-perm-strip"><div class="cs-perm-dot cs-perm-dot--1"></div><div class="cs-perm-dot cs-perm-dot--2"></div><div class="cs-perm-dot cs-perm-dot--3"></div></div>'
|
||||
. '</div></div>';
|
||||
|
||||
case 'analytics':
|
||||
return
|
||||
'<div class="card-scene cs-analytics" aria-hidden="true">'
|
||||
. '<div class="cs-screen">'
|
||||
. '<div class="cs-topbar"><div class="cs-live-dot"></div><div class="cs-title">Analytics</div></div>'
|
||||
. '<div class="cs-analytics-body">'
|
||||
. '<div class="cs-ring-wrap"><div class="cs-ring"></div><div class="cs-ring-val">94%</div></div>'
|
||||
. '<div class="cs-bars"><div class="cs-sbar cs-sbar--1"></div><div class="cs-sbar cs-sbar--2"></div><div class="cs-sbar cs-sbar--3"></div><div class="cs-sbar cs-sbar--4"></div><div class="cs-sbar cs-sbar--5"></div><div class="cs-sbar cs-sbar--6"></div></div>'
|
||||
. '</div>'
|
||||
. '</div></div>';
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Value Section ─────────────────────────────────────────────────────────── */
|
||||
function oribi_render_value_section($a, $content)
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user