thuecat/Resources/Private/Partials/Frontend/ContentElement/Accessibility.html
Carlos Pozo 46df4f4028
Improve detail view templates
Adapt detail view template for Bootstrap usage.
Provide proper out-of-the-box integration.
2022-03-08 08:27:18 +00:00

136 lines
9.5 KiB
HTML

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="accessibility">
<div class="row">
<div class="col-12 col-md-6">
<f:if condition="{specification.searchCriteria}">
<ul>
<f:for each="{specification.searchCriteria}" key="id" as="criterias">
<f:for each="{criterias}" as="criteria">
<li>{f:translate(id: 'content.accessibilitySpecification.searchCriteria.criteria.{criteria}', default: criteria, extensionName: 'Thuecat')}</li>
</f:for>
</f:for>
</ul>
</f:if>
</div>
<div class="col-12 col-md-6">
<ul>
<f:if condition="{specification.certificationDeaf}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationDeaf}', default: specification.certificationDeaf, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.deaf', extensionName: 'Thuecat')}</li>
</f:if>
<f:if condition="{specification.certificationMental}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationMental}', default: specification.certificationMental, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.mental', extensionName: 'Thuecat')}</li>
</f:if>
<f:if condition="{specification.certificationPartiallyDeaf}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationPartiallyDeaf}', default: specification.certificationPartiallyDeaf, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.partiallyDeaf', extensionName: 'Thuecat')}</li>
</f:if>
<f:if condition="{specification.certificationPartiallyVisual}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationPartiallyVisual}', default: specification.certificationPartiallyVisual, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.partiallyVisual', extensionName: 'Thuecat')}</li>
</f:if>
<f:if condition="{specification.certificationVisual}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationVisual}', default: specification.certificationVisual, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.visual', extensionName: 'Thuecat')}</li>
</f:if>
<f:if condition="{specification.certificationWalking}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationWalking}', default: specification.certificationWalking, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.walking', extensionName: 'Thuecat')}</li>
</f:if>
<f:if condition="{specification.certificationWheelchair}">
<li>{f:translate(id: 'content.accessibilitySpecification.certification.{specification.certificationWheelchair}', default: specification.certificationWheelchair, extensionName: 'Thuecat')} {f:translate(id: 'content.accessibilitySpecification.certification.wheelchair', extensionName: 'Thuecat')}</li>
</f:if>
</ul>
</div>
</div>
<div class="row accordion" id="accordionShortDescriptions">
<f:if condition="{specification.shortDescriptionAllGenerations}">
<div class="accordion-item">
<h3 class="accordion-header" id="headingAllGenerations">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#shortDescriptionAllGenerations-{uid}" role="button" aria-expanded="false" aria-controls="shortDescriptionAllGenerations-{uid}">
{f:translate(id: 'content.accessibilitySpecification.shortDescriptionAllGenerations', extensionName: 'Thuecat')}
</button>
</h3>
<div class="accordion-collapse collapse" id="shortDescriptionAllGenerations-{uid}">
<div class="accordion-body">
<p>{specification.shortDescriptionAllGenerations -> f:format.nl2br()}</p>
</div>
</div>
</div>
</f:if>
<f:if condition="{specification.shortDescriptionAllergic}">
<div class="accordion-item">
<h3 class="accordion-header" id="headingAllergic">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#shortDescriptionAllergic-{uid}" role="button" aria-expanded="false" aria-controls="shortDescriptionAllergic-{uid}">
{f:translate(id: 'content.accessibilitySpecification.shortDescriptionAllergic', extensionName: 'Thuecat')}
</button>
</h3>
<div class="accordion-collapse collapse" id="shortDescriptionAllergic-{uid}">
<div class="accordion-body">
<p>{specification.shortDescriptionAllergic -> f:format.nl2br()}</p>
</div>
</div>
</div>
</f:if>
<f:if condition="{specification.shortDescriptionDeaf}">
<div class="accordion-item">
<h3 class="accordion-header" id="headingDeaf">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#shortDescriptionDeaf-{uid}" role="button" aria-expanded="false" aria-controls="shortDescriptionDeaf-{uid}">
{f:translate(id: 'content.accessibilitySpecification.shortDescriptionDeaf', extensionName: 'Thuecat')}
</button>
</h3>
<div class="accordion-collapse collapse" id="shortDescriptionDeaf-{uid}">
<div class="accordion-body">
<p>{specification.shortDescriptionDeaf -> f:format.nl2br()}</p>
</div>
</div>
</div>
</f:if>
<f:if condition="{specification.shortDescriptionMental}">
<div class="accordion-item">
<h3 class="accordion-header" id="headingMetal">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" href="#shortDescriptionMental-{uid}" role="button" aria-expanded="false" aria-controls="shortDescriptionMental-{uid}">
{f:translate(id: 'content.accessibilitySpecification.shortDescriptionMental', extensionName: 'Thuecat')}
</button>
</h3>
<div class="accordion-collapse collapse" id="shortDescriptionMental-{uid}">
<div class="accordion-body">
<p>{specification.shortDescriptionMental -> f:format.nl2br()}</p>
</div>
</div>
</div>
</f:if>
<f:if condition="{specification.shortDescriptionVisual}">
<div class="accordion-item">
<h3 class="accordion-header" id="headingVisual">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" href="#shortDescriptionVisual-{uid}" role="button" aria-expanded="false" aria-controls="shortDescriptionVisual-{uid}">
{f:translate(id: 'content.accessibilitySpecification.shortDescriptionVisual', extensionName: 'Thuecat')}
</button>
</h3>
<div class="accordion-collapse collapse" id="shortDescriptionVisual-{uid}">
<div class="accordion-body">
<p>{specification.shortDescriptionVisual -> f:format.nl2br()}</p>
</div>
</div>
</div>
</f:if>
<f:if condition="{specification.shortDescriptionWalking}">
<div class="accordion-item">
<h3 class="accordion-header" id="headingVisual">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" href="#shortDescriptionWalking-{uid}" role="button" aria-expanded="false" aria-controls="shortDescriptionWalking-{uid}">
{f:translate(id: 'content.accessibilitySpecification.shortDescriptionWalking', extensionName: 'Thuecat')}
</button>
</h3>
<div class="accordion-collapse collapse" id="shortDescriptionWalking-{uid}">
<div class="accordion-body">
<p>{specification.shortDescriptionWalking -> f:format.nl2br()}</p>
</div>
</div>
</div>
</f:if>
</div>
</div>
</html>