update Layouts

This commit is contained in:
2020-12-06 13:56:46 +01:00
parent 463e4c05c5
commit b5ee5c33c1
23 changed files with 386 additions and 33 deletions
@@ -0,0 +1,53 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{breadcrumb}">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
<f:for each="{breadcrumb}" as="item" iteration="iterator">
<f:if condition="!{iterator.isFirst}">
{
"@type": "ListItem",
"position": "<f:format.raw>{iterator.index}</f:format.raw>",
"item": {
"@id": "<f:format.raw>{item.data.slug}</f:format.raw>",
"name": "<f:format.raw>{item.title}</f:format.raw>"
}
}<f:if condition="!{iterator.isLast}">,</f:if>
</f:if>
</f:for>
]
}
</script>
<nav id="breadcrumb-section" aria-label="{f:translate(key: 'page.breadcrumb.label', extensionName: 'site_package_base')}">
<f:if condition="{settings.navigation.breadcrumb.showPrefix}">
<span class="breadcrumb-prefix">{f:translate(key: 'page.breadcrumb.prefix', extensionName: 'site_package_base')}: </span>
</f:if>
<ol class="breadcrumb">
<f:for each="{breadcrumb}" as="item">
<li class="breadcrumb-item{f:if(condition: item.current, then: ' active')}"{f:if(condition: item.current, then: ' aria-current="page"')}>
<f:if condition="{item.current} && {breadcrumbSingleRecordEntry} == ''">
<f:then>
{item.title}
</f:then>
<f:else>
<a class="breadcrumb-link" href="{item.link}"{f:if(condition: item.target, then: ' target="{item.target}"')} title="{item.title}">
{item.title}
</a>
</f:else>
</f:if>
</li>
</f:for>
<f:comment>
The following area allows us to display the title of a single record (like tx_news detail page).
</f:comment>
<f:if condition="{breadcrumbSingleRecordEntry}">
<li class="breadcrumb-item active" aria-current="page">
{breadcrumbSingleRecordEntry}
</li>
</f:if>
</ol>
</nav>
</f:if>
</html>
@@ -0,0 +1,23 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{navigationLanguage}">
<ul class="menu menu-language" aria-label="{f:translate(key: 'page.navigation.language.label', extensionName: 'sitepackage')}">
<li>
<span>{f:translate(key: 'page.navigation.language.hint', extensionName: 'sitepackage')}</span>
</li>
<f:for each="{navigationLanguage}" as="item">
<li class="menu-item{f:if(condition: item.active, then: ' active')}{f:if(condition: item.available, else: ' text-muted')}">
<f:if condition="{item.available}">
<f:then>
<a class="menu-link lang-{item.twoLetterIsoCode}" title="{item.title}" href="{item.link}" hreflang="{item.hreflang}">
<span>{item.navigationTitle}</span>
</a>
</f:then>
<f:else>
<span>{item.navigationTitle}</span>
</f:else>
</f:if>
</li>
</f:for>
</ul>
</f:if>
</html>
@@ -0,0 +1,48 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
{f:variable(name: 'hasChildrenClasses', value: ' has-dropdown')}
<f:if condition="{isMobile}">
{f:variable(name: 'listClasses', value: ' off-canvas-list menu vertical accordion-menu')}
{f:variable(name: 'listAttributes', value: ' data-accordion-menu data-submenu-toggle="true"')}
{f:variable(name: 'hasChildrenClasses', value: ' has-submenu')}
</f:if>
<f:if condition="{navigationMain}">
<ul role="menubar" class="menu lvl1{listClasses}"{listAttributes}>
<f:if condition="{settings.navigation.navigationMain.showLinkToHome}">
<li class="menu-item first{f:if(condition: '{data.uid} == {rootPage}', then:' active')}">
<f:link.page pageUid="{rootPage}" id="menu-link-{rootPage}" class="menu-link" title="{f:translate(key: 'page.navigation.main.home', extensionName: 'site_package_base')}">{f:translate(key: 'page.navigation.main.home', extensionName: 'site_package_base')}</f:link.page>
</li>
</f:if>
<f:for each="{navigationMain}" as="item" iteration="iteratorLvl1">
<li class="menu-item{f:if(condition: iteratorLvl1.isLast, then: ' last')}{f:if(condition: item.active, then:' active')}{f:if(condition: item.children, then:' {hasChildrenClasses}')}">
<f:render section="linkItem" arguments="{linkItem: item}"/>
<f:if condition="{item.children}">
<ul class="lvl2 dropdown" aria-labelledby="menu-item-{item.data.uid}">
<f:for each="{item.children}" as="child" iteration="iteratorLvl2">
<li class="menu-item{f:if(condition: iteratorLvl2.isFirst, then: ' first')}{f:if(condition: iteratorLvl2.isLast, then: ' last')}{f:if(condition: child.active, then:' active')}">
<f:render section="linkItem" arguments="{linkItem: child}"/>
<f:if condition="{child.children}">
<ul class="lvl3 dropdown" aria-labelledby="menu-item-{child.data.uid}">
<f:for each="{child.children}" as="grandchild" iteration="iteratorLvl3">
<li class="menu-item{f:if(condition: iteratorLvl3.isFirst, then: ' first')}{f:if(condition: iteratorLvl3.isLast, then: ' last')}{f:if(condition: grandchild.active, then:' active')}">
<f:render section="linkItem" arguments="{linkItem: grandchild}"/>
</li>
</f:for>
</ul>
</f:if>
</li>
</f:for>
</ul>
</f:if>
</li>
</f:for>
</ul>
</f:if>
<f:section name="linkItem">
<a role="menuitem" id="menu-link-{linkItem.data.uid}" class="menu-link" title="{linkItem.title}" href="{linkItem.link}"{f:if(condition: linkItem.target, then: ' target="{linkItem.target}"')}{f:if(condition: linkItem.children, then:' aria-haspopup="true" aria-expanded="false"')}>
{linkItem.title}<f:if condition="{linkItem.current}"> <span class="show-for-sr">(current)</span></f:if>
</a>
</f:section>
</html>
@@ -0,0 +1,13 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{navigationMeta}">
<ul role="menubar" class="menu menu-meta" aria-label="{f:translate(key: 'page.navigation.meta.label', extensionName: 'site_package_base')}">
<f:for each="{navigationMeta}" as="item" iteration="iterator">
<li class="menu-item{f:if(condition: iterator.isFirst, then: ' first')}{f:if(condition: iterator.isLast, then: ' last')}{f:if(condition: item.active, then:' active')}">
<a role="menuitem" class="menu-link" title="{item.title}" href="{item.link}"{f:if(condition: item.target, then: ' target="{item.target}"')}>
{item.title}
</a>
</li>
</f:for>
</ul>
</f:if>
</html>