Commit 0ac91f84 authored by Stefan Busemann's avatar Stefan Busemann

Merge branch '619-integrate-global-header-element' into 'master'

Add typo3 universe header element

Closes #619

See merge request !571
parents 54efeda9 602c1257
......@@ -146,7 +146,12 @@
"selector-pseudo-element-colon-notation": "single",
"selector-pseudo-element-no-unknown": true,
"selector-type-case": "lower",
"selector-type-no-unknown": true,
"selector-type-no-unknown": [
true,
{
"ignoreTypes": ["/^typo3-/"]
}
],
"shorthand-property-no-redundant-values": true,
"string-no-newline": true,
"unit-case": "lower",
......
.page-container {
padding-top: 44px;
}
typo3-universe {
z-index: 1001;
position: absolute;
top: 0;
left: 0;
right: 0;
--universe-link-background: #fff;
--universe-link-color: #212121;
--universe-link-hover-background: #f2f2f2;
--universe-link-hover-color: #212121;
--universe-background-color: #fff;
--universe-button-background: #f2f2f2;
--universe-button-color: #212121;
--universe-button-hover-background: #e2e2e2;
--universe-button-hover-color: #212121;
--universe-caret-color: #f49700;
--universe-maxwidth: 1170px;
}
@media (max-width: 991.99px) {
typo3-universe {
position: fixed;
}
.main-header .main-header__bottom {
top: 44px;
}
.main-nav__collapse {
top: 100px;
max-height: calc(100vh - 100px);
}
}
......@@ -59,6 +59,7 @@
@import "layout/infoBanner";
@import "layout/alert-fixed";
@import "layout/lightbox";
@import "layout/typo3-universe";
// Components
//
......
......@@ -5,5 +5,10 @@ page {
includeJSFooterlibs {
t3olayout = EXT:t3olayout/Resources/Public/JavaScript/main.min.js
typo3infrastructure = https://typo3.azureedge.net/typo3infrastructure/universe/dist/webcomponents-loader.js
typo3infrastructure.external = 1
typo3universe = https://typo3.azureedge.net/typo3infrastructure/universe/dist/typo3-universe.js
typo3universe.external = 1
typo3universe.type = module
}
}
# TYPO3 Universe Header
The header bar is added via an external JS.
To highlight the active state, a typoScript constant must be set:
`{$settings.platformKey}`
Possible settings are:
* community
* extensions
![02-universe-header-element](/Users/stefan/Workspace/TYPO3/typo3.org/private/typo3conf/ext/t3olayout/Documentation/Functionality/img/02-universe-header-element.png)
......@@ -3,3 +3,4 @@
## Functionality
* [Feedback Form](Functionality/01-FeedbackForm.md)
* [TYPO3 universe Header](Functionality/02-universe-header-element.md)
<typo3-universe active="{settings.platformKey}">
<!-- Fallback to consume the defined space on loading and no component support -->
<div style="display: block; height: 44px; background-color: #fff;"></div>
</typo3-universe>
<f:render section="Main"/>
......@@ -19,13 +19,6 @@
<header class="container-fluid main-header">
<div class="row clearfix main-header__top">
<div class="col-12 pull-right">
<div class="container m-auto text-right">
<f:render partial="Page/Meta" section="Meta" arguments="{_all}" />
</div>
</div>
</div>
<div class="main-header__bottom">
<div class="container m-auto">
<f:render partial="Page/Navigation" section="Navigation" arguments="{_all}" />
......
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://xsd.helhum.io/ns/typo3/cms-fluid/master/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:section name="Meta">
<ul class="navbar-nav main-nav__list main-nav__meta-nav">
<f:for each="{metanavigation}" as="metaitem">
<li class="main-nav__meta-nav_item{f:if(condition: metaitem.active, then: ' active', else: '')}">
<f:link.typolink title="{metaitem.data.description}" parameter="{metaitem.link}">
<f:if condition="{metaitem.meta_icon}">
<f:image class="main-nav__meta-nav_item-icon img-fluid" image="{metaitem.meta_icon.0}" alt="{metaitem.meta_icon.0.description}" />
</f:if>
{metaitem.title}
</f:link.typolink>
</li>
</f:for>
</ul>
</f:section>
</div>
......@@ -33,8 +33,6 @@
</form>
<!-- END OF solr search form -->
</div>
<f:render partial="Page/Meta" section="Meta" arguments="{_all}" />
</div>
</div>
</nav>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment