From c9ad6da60845063313b83c457e5cf5c3785eab8c Mon Sep 17 00:00:00 2001
From: "michael.daniel" <michael@pcsg.de>
Date: Wed, 10 Apr 2019 15:50:35 +0200
Subject: [PATCH] feat: Top menu (mega menu) structure in template reworked.
---
bin/css/style.css | 19 ++++++++-----------
bin/javascript/init.js | 2 +-
index.php | 10 ++++++++++
template/mainMenu.html | 8 +++++++-
template/menu/menuPrefix.html | 5 +++++
template/menu/menuSuffix.html | 3 +++
template/topBar.html | 9 ++-------
7 files changed, 36 insertions(+), 20 deletions(-)
create mode 100644 template/menu/menuPrefix.html
create mode 100644 template/menu/menuSuffix.html
diff --git a/bin/css/style.css b/bin/css/style.css
index 6b9f85c..9df7364 100644
--- a/bin/css/style.css
+++ b/bin/css/style.css
@@ -636,6 +636,11 @@ a.toTop:before {
/** Mega Menu
===================================== */
+.quiqqer-menu-megaMenu nav {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+}
.cologne-header-nav {
height: 100%;
@@ -651,7 +656,8 @@ a.toTop:before {
position: initial;
}
-.quiqqer-menu-megaMenu a {
+.quiqqer-menu-megaMenu-list a,
+.quiqqer-menu-megaMenu-list-item-menu a {
color: inherit;
text-decoration: none;
}
@@ -736,6 +742,7 @@ a.toTop:before {
display: flex;
position: relative;
z-index: 2;
+ height: 100%;
}
.cologne-header-control-basket {
@@ -789,16 +796,6 @@ a.toTop:before {
width: 17px;
}
-/*
-.quiqqer-order-basketButton-batch.quiqqer-order-basketButton-batch-custom {
- background: none;
- color: inherit;
- display: inline-block;
- min-width: 2em;
- position: initial;
-}*/
-
-
/****************/
/* basket popup */
/****************/
diff --git a/bin/javascript/init.js b/bin/javascript/init.js
index 532d850..df30a52 100644
--- a/bin/javascript/init.js
+++ b/bin/javascript/init.js
@@ -191,7 +191,7 @@ window.addEvent('domready', function () {
height.y = 0;
Basket.$BasketContainer.setStyles({
- right: 20 // right margin from .cologne-header-control-basket
+ right: 0 // right margin from .cologne-header-control-basket
});
// Do not scroll the page
diff --git a/index.php b/index.php
index f694c2c..4b28319 100644
--- a/index.php
+++ b/index.php
@@ -15,6 +15,16 @@
'Project' => $Site->getProject()
]);
+// header logo
+$EngineForMenu = QUI::getTemplateManager()->getEngine();
+
+$EngineForMenu->assign([
+ 'Logo' => $Project->getMedia()->getLogoImage()
+]);
+
+$Menu->prependHTML($EngineForMenu->fetch(dirname(__FILE__) . '/template/menu/menuPrefix.html'));
+$Menu->appendHTML($EngineForMenu->fetch(dirname(__FILE__) . '/template/menu/menuSuffix.html'));
+
/* user avatar */
$Avatar = new QUI\FrontendUsers\Controls\UserIcon([
'showLogout' => false, // template cologne use own logout popup (see bin/javascript/init.js)
diff --git a/template/mainMenu.html b/template/mainMenu.html
index 64bd331..b2e71fd 100644
--- a/template/mainMenu.html
+++ b/template/mainMenu.html
@@ -1,4 +1,10 @@
<header class="cologne-header cologne-header-menu template-columns">
+ <div class="template-column cologne-header-nav">
+ {$Menu->create()}
+ </div>
+</header>
+
+{*<header class="cologne-header cologne-header-menu template-columns">
<div class="template-column cologne-header-logo hide-on-mobile">
<a href="/" class="cologne-header-logo-link">
{image image=$Project->getMedia()->getLogoImage() class="logo"}
@@ -14,4 +20,4 @@
<div class="cologne-header-control">
<div class="template-column cologne-header-control-basket"></div>
</div>
-</header>
\ No newline at end of file
+</header>*}
\ No newline at end of file
diff --git a/template/menu/menuPrefix.html b/template/menu/menuPrefix.html
new file mode 100644
index 0000000..71391a3
--- /dev/null
+++ b/template/menu/menuPrefix.html
@@ -0,0 +1,5 @@
+<div class="cologne-header-logo">
+ <a href="/" class="cologne-header-logo-link">
+ {image image=$Logo class="logo"}
+ </a>
+</div>
\ No newline at end of file
diff --git a/template/menu/menuSuffix.html b/template/menu/menuSuffix.html
new file mode 100644
index 0000000..646aa6f
--- /dev/null
+++ b/template/menu/menuSuffix.html
@@ -0,0 +1,3 @@
+<div class="cologne-header-control">
+ <div class="cologne-header-control-basket"></div>
+</div>
\ No newline at end of file
diff --git a/template/topBar.html b/template/topBar.html
index 8c164f0..81e0bdb 100644
--- a/template/topBar.html
+++ b/template/topBar.html
@@ -1,7 +1,7 @@
<div class="topbar template-columns">
- <a href="/" class="topbar-mobile-logo hide-on-desktop">
+ {*<!--<a href="/" class="topbar-mobile-logo hide-on-desktop">
{image image=$Project->getMedia()->getLogoImage() class="logo"}
- </a>
+ </a>-->*}
<div class="template-column topbar-left hide-on-mobile">
{locale group="quiqqer/template-cologne" var="template.topbar.content.left"}
@@ -9,11 +9,8 @@
<div class="topbar-right template-column">
- {*$Flags->create()*}
-
{$LangCurrencySwitch->create()}
-
<span class="cologne-header-control-user">
{if $User->getId()}
{$Avatar->create()}
@@ -25,7 +22,5 @@
</span>
</span>
- <!--<span class="template-column cologne-header-control-currencies"></span>-->
-
</div>
</div>
\ No newline at end of file
--
GitLab