Initial Commit
This commit is contained in:
khaccount committed
1 parent
4f495177e4
commit
b6d2142214
166 files changed
+13952
-178
No files matched your search
@@ -0,0 +1,203 @@
|
||||
<f:comment>
|
||||
### This template renders a single usecase with different layouts
|
||||
<f:debug>{_all}</f:debug>
|
||||
File path: EXT:vitec/Resources/Private/Templates/Usecase/Show.html
|
||||
</f:comment>
|
||||
|
||||
<f:layout name="Default" />
|
||||
|
||||
<f:section name="main">
|
||||
|
||||
<!-- Layout Selection -->
|
||||
<f:switch expression="{settings.layout}">
|
||||
|
||||
<f:case value="card">
|
||||
<f:render section="cardLayout" arguments="{usecase: usecase, settings: settings}" />
|
||||
</f:case>
|
||||
|
||||
<f:case value="hero">
|
||||
<f:render section="heroLayout" arguments="{usecase: usecase, settings: settings}" />
|
||||
</f:case>
|
||||
|
||||
<f:case value="compact">
|
||||
<f:render section="compactLayout" arguments="{usecase: usecase, settings: settings}" />
|
||||
</f:case>
|
||||
|
||||
<f:defaultCase>
|
||||
<f:render section="defaultLayout" arguments="{usecase: usecase, settings: settings}" />
|
||||
</f:defaultCase>
|
||||
|
||||
</f:switch>
|
||||
</f:section>
|
||||
|
||||
<!-- Default Layout (your current design) -->
|
||||
<f:section name="defaultLayout">
|
||||
<f:if condition="{settings.debug}">
|
||||
<f:debug>{_all}</f:debug>
|
||||
<code>
|
||||
File path: vscode://file/vitec/Resources/Private/Templates/Usecase/Show.html
|
||||
</code>
|
||||
</f:if>
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-sm border-0 rounded-4">
|
||||
<f:if condition="{usecase.caseimage}">
|
||||
<f:then>
|
||||
<f:image src="{usecase.caseimage.originalResource.originalFile.uid}" title="{usecase.title} {usecase.subtitle}" alt="{usecase.title} - {usecase.subtitle}" class="img-fluid card-img-top rounded-top-4" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
No case image available
|
||||
</f:else>
|
||||
</f:if>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<f:if condition="{usecase.logoimage}">
|
||||
<f:then>
|
||||
<f:image src="{usecase.logoimage.originalResource.originalFile.uid}" title="{usecase.title} {usecase.subtitle}" alt="{usecase.title} - {usecase.subtitle}" class="img-fluid gsap-logo-image"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
No logo image available
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
<h5 class="card-title mb-0">{usecase.title}</h5>
|
||||
<small class="text-muted">{usecase.subtitle}</small><br />
|
||||
<f:format.html>{usecase.description}</f:format.html>
|
||||
</p>
|
||||
<f:link.typolink parameter="{usecase.singlepid}"
|
||||
target="_top"
|
||||
class="ico-class btn btn-primary w-100" title="usecase.title}"
|
||||
additionalAttributes="{type:'button'}"
|
||||
>
|
||||
View Success Story
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<!-- Card Layout -->
|
||||
<f:section name="cardLayout">
|
||||
<f:if condition="{settings.debug}">
|
||||
<f:debug>{_all}</f:debug>
|
||||
<code>
|
||||
File path: vscode://file/vitec/Resources/Private/Templates/Usecase/Show.html
|
||||
</code>
|
||||
</f:if>
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-lg-6 mx-auto">
|
||||
<div class="card shadow-lg border-0 rounded-5">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<f:if condition="{usecase.caseimage}">
|
||||
<f:image src="{usecase.caseimage.originalResource.originalFile.uid}" title="{usecase.title}" alt="{usecase.title}" class="img-fluid rounded-start h-100 object-cover" />
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body h-100 d-flex flex-column">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<f:if condition="{usecase.logoimage}">
|
||||
<f:image src="{usecase.logoimage.originalResource.originalFile.uid}" title="{usecase.title}" alt="{usecase.title}" class="me-3" style="width: 40px; height: 40px; object-fit: contain;"/>
|
||||
</f:if>
|
||||
<div>
|
||||
<h4 class="card-title mb-0">{usecase.title}</h4>
|
||||
<small class="text-primary fw-bold">{usecase.subtitle}</small>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text flex-grow-1">
|
||||
<f:format.html>{usecase.description}</f:format.html>
|
||||
</p>
|
||||
<f:if condition="{usecase.categories}">
|
||||
<div class="mb-3">
|
||||
<f:for each="{usecase.categories}" as="category">
|
||||
<f:if condition="{category.parent.uid} == 18">
|
||||
<span class="badge bg-danger me-1">{category.title}</span>
|
||||
</f:if>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
<f:link.typolink parameter="{usecase.singlepid}" class="btn btn-outline-primary">
|
||||
Read More →
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<!-- Hero Layout -->
|
||||
<f:section name="heroLayout">
|
||||
<f:if condition="{settings.debug}">
|
||||
<f:debug>{_all}</f:debug>
|
||||
<code>
|
||||
File path: vscode://file/vitec/Resources/Private/Templates/Usecase/Show.html
|
||||
</code>
|
||||
</f:if>
|
||||
<div class="hero-section position-relative" style="min-height: 60vh;">
|
||||
<f:if condition="{usecase.caseimage}">
|
||||
<div class="hero-bg position-absolute w-100 h-100" style="background-image: url('{f:uri.image(src: usecase.caseimage.originalResource.originalFile.uid)}'); background-size: cover; background-position: center; opacity: 0.3;"></div>
|
||||
</f:if>
|
||||
<div class="container position-relative h-100 d-flex align-items-center">
|
||||
<div class="row w-100">
|
||||
<div class="col-lg-8 col-xl-6">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<f:if condition="{usecase.logoimage}">
|
||||
<f:image src="{usecase.logoimage.originalResource.originalFile.uid}" title="{usecase.title}" alt="{usecase.title}" class="me-4" style="width: 80px; height: 80px; object-fit: contain;"/>
|
||||
</f:if>
|
||||
<div>
|
||||
<h1 class="display-4 fw-bold mb-2">{usecase.title}</h1>
|
||||
<h2 class="h4 text-primary">{usecase.subtitle}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lead mb-4">
|
||||
<f:format.html>{usecase.description}</f:format.html>
|
||||
</div>
|
||||
<f:link.typolink parameter="{usecase.singlepid}" class="btn btn-primary btn-lg">
|
||||
Discover the Success Story
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
<!-- Compact Layout -->
|
||||
<f:section name="compactLayout">
|
||||
<f:if condition="{settings.debug}">
|
||||
<f:debug>{_all}</f:debug>
|
||||
<code>
|
||||
File path: vscode://file/vitec/Resources/Private/Templates/Usecase/Show.html
|
||||
</code>
|
||||
</f:if>
|
||||
<div class="container py-3">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex align-items-center p-3 border rounded-3 bg-light">
|
||||
<f:if condition="{usecase.logoimage}">
|
||||
<f:image src="{usecase.logoimage.originalResource.originalFile.uid}" title="{usecase.title}" alt="{usecase.title}" class="me-3 rounded" style="width: 60px; height: 60px; object-fit: contain;"/>
|
||||
</f:if>
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mb-1">{usecase.title}</h5>
|
||||
<p class="mb-1 text-muted">{usecase.subtitle}</p>
|
||||
<small class="text-truncate d-block">
|
||||
<f:format.stripTags><f:format.crop maxCharacters="100">{usecase.description}</f:format.crop></f:format.stripTags>
|
||||
</small>
|
||||
</div>
|
||||
<f:link.typolink parameter="{usecase.singlepid}" class="btn btn-sm btn-outline-primary ms-3">
|
||||
View
|
||||
</f:link.typolink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
|
||||
Reference in new issue
Block a user