Skip to content
Code-Schnipsel Gruppen Projekte
Commit c9241ca8 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

feat: SlideOut menu adapted to use with independent menu. 

refactor: Some design improvements (SlideOut)
Übergeordneter beeee984
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
werden angezeigt mit 135 Ergänzungen und 78 Löschungen
bin/SlideOut.css
+ 33
− 60
Zeige Datei @ c9241ca8
......@@ -11,48 +11,41 @@
z-index: 100;
}
.page-menu li {
padding-left: 0;
}
.page-menu-close,
.page-menu-opener {
color: #fff;
cursor: pointer;
/*background: #dddddd;*/
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
outline: none;
/*padding: 0;*/
position: absolute;
right: 10px;
text-align: center;
top: 10px;
z-index: 2000;
transition: all 0.3s ease-in-out;
z-index: 2000;
}
/*.page-menu-close {
top: 10px !important;
}*/
.page-menu-close:hover,
.page-menu-close:focus {
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
}
/* bis fontawesome keinen dünnen Closebutton hat wird das verwendet (×)*/
.fa-times-thin:before {
content: '\00d7';
}
.page-menu-opener .fa {
clear: both;
float: left;
font-size: 20px;
text-align: center;
width: 100%;
}
.page-menu-opener-text {
clear: both;
float: left;
font-size: 10px;
text-align: center;
width: 100%;
......@@ -65,85 +58,65 @@
z-index: 100;
}
/*
.page-menu-morph {
position: absolute;
width: 120px;
height: 99%;
top: 0;
right: 0;
}
*/
.page-navigation ul {
clear: both;
margin-left: 1.5rem;
padding-left: 0;
}
.page-navigation li {
clear: both;
float: left;
list-style-type: none;
text-align: left;
width: 100%;
}
.page-navigation a {
clear: both;
align-items: flex-start;
color: #fff;
float: left;
display: flex;
text-decoration: none;
width: 100%;
}
.page-navigation-home {
float: left;
font-size: 16px;
padding: 10px !important;
width: 100%;
.page-navigation .page-navigation-home {
font-size: 18px;
padding: 10px 0 !important;
width: calc(100% - 40px);
}
.page-navigation-home .fa {
.page-navigation .fa {
flex-shrink: 0;
line-height: inherit;
margin-right: 0.5rem;
text-align: left;
width: 30px;
width: 1.5rem;
}
.page-navigation ul.page-navigation-level-1 {
margin-left: 0;
}
.page-navigation-level-1 a {
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 20px;
font-size: 1.125rem;
padding: 10px 0;
text-transform: uppercase;
vertical-align: bottom;
}
.page-navigation__noHomeLink .page-navigation-level-1 > li:first-child > a {
margin-top: 30px;
}
.page-navigation-level-1 .fa {
font-size: 22px;
float: left;
text-align: center;
width: 40px;
}
.page-navigation-level-2 a {
border-top: none;
font-size: 14px;
font-size: 1rem;
padding: 5px 0;
}
.page-navigation-level-3 {
margin-left: 40px;
}
.page-navigation-level-3 a {
font-size: 14px;
}
.page-navigation-level-3 .fa {
font-size: 14px;
width: 20px;
}
.page-navigation .left-menu-text {
float: left;
width: calc(100% - 40px);
font-size: 0.875rem;
}
/** page navigation -> mobile
......@@ -158,8 +131,8 @@
bottom: 0;
display: none;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
position: fixed;
right: 0;
top: 0;
......@@ -186,8 +159,8 @@
.page-menu-mobile {
background: #dddddd;
cursor: pointer;
color: #333;
cursor: pointer;
left: 0;
padding: 10px;
position: fixed;
......
bin/SlideOut.js
+ 5
− 5
Zeige Datei @ c9241ca8
......@@ -268,13 +268,13 @@ define('package/quiqqer/menu/bin/SlideOut', [
'class': 'page-menu-close',
styles : {
fontSize : 40,
height : 45,
lineHeight: 45,
right : -20,
height : 50,
lineHeight: 50,
right : -30,
position : 'absolute',
textAlign : 'center',
top : 10,
width : 45,
top : 0,
width : 50,
zIndex : 1000
},
events : {
......
src/QUI/Menu/MegaMenu.Independent.html
+ 2
− 2
Zeige Datei @ c9241ca8
......@@ -56,7 +56,7 @@
{$append}
</nav>
{*if $Mobile}
{if $Mobile}
<div class="hide-on-desktop">
{$prepend}
......@@ -68,4 +68,4 @@
{$append}
{$Mobile->create()}
</div>
{/if*}
{/if}
src/QUI/Menu/MegaMenu.php
+ 9
− 1
Zeige Datei @ c9241ca8
......@@ -54,7 +54,15 @@ public function __construct($attributes = [])
return;
}
$this->Mobile = new QUI\Menu\SlideOut();
$slideOutParam = [
'showHomeLink' => true
];
if ($this->getAttribute('menuId')) {
$slideOutParam['menuId'] = $this->getAttribute('menuId');
}
$this->Mobile = new QUI\Menu\SlideOut($slideOutParam);
// defaults
$this->Mobile->setAttribute('Project', $this->getProject());
......
src/QUI/Menu/Menu.Children.Independent.html 0 → 100644
+ 33
− 0
Zeige Datei @ c9241ca8
{if !isset($level)}
{assign var=level value=1}
{else}
{assign var=level value=$level+1}
{/if}
{if count($children)}
<ul class="page-navigation-level-{$level}">
{foreach from=$children item=Child}
<li>
<a href="{$Child->getUrl()}"
class="qui-menu-siteid-{$Child->getIdentifier()} left-menu-a"
title="{$Child->getTitleAttribute()|escape:'html'}"
{if $Child->getTarget()}target="{$Child->getTarget()}"{/if}
>
{if $this->getAttribute('showFirstLevelIcons') && $Child->getIcon() && $Child->getIcon()|strpos:'image' !== 'false' }
{image src=$Child->getIcon() onlyicon=1}
{/if}
<span class="fa fa-angle-right"></span>
<span class="left-menu-text">
{$Child->getTitle()}
</span>
</a>
{include file="`$FileMenu`"
children=$Child->getChildren()
level=$level
}
</li>
{/foreach}
</ul>
{/if}
src/QUI/Menu/Menu.Independent.html 0 → 100644
+ 14
− 0
Zeige Datei @ c9241ca8
<nav class="page-menu" data-qui="{$jsControl}" style="display: none;">
<div class="page-navigation {if !$showHomeLink}page-navigation__noHomeLink{/if}">
{if $showHomeLink}
<a href="{url site=$Project->firstChild()}" class="page-navigation-home">
<span class="fa fa-home"></span>
{$Project->firstChild()->getAttribute('title')}
</a>
{/if}
{include file="`$FileMenu`"
children=$IndependentMenu->getChildren()
}
</div>
</nav>
src/QUI/Menu/Menu.html
+ 3
− 2
Zeige Datei @ c9241ca8
<nav class="page-menu" data-qui="{$jsControl}" style="display: none;">
<div class="page-navigation">
<div class="page-navigation {if !$showHomeLink}page-navigation__noHomeLink{/if}">
{if $showHomeLink}
<a href="{url site=$Project->firstChild()}" class="page-navigation-home">
<span class="fa fa-home"></span>
{$Project->firstChild()->getAttribute('title')}
</a>
{/if}
{include file="`$FileMenu`"
Site=$Project->firstChild()
......
src/QUI/Menu/SlideOut.php
+ 36
− 8
Zeige Datei @ c9241ca8
......@@ -17,6 +17,20 @@
*/
class SlideOut extends QUI\Control
{
/**
* @param array $attributes
*/
public function __construct($attributes = [])
{
$this->setAttributes([
'showHomeLink' => true,
'menuId' => false, // if set independent menu template will be used
'showFirstLevelIcons' => false // current it works only for independent menu
]);
parent::__construct($attributes);
}
/**
* @return string
* @throws QUI\Exception
......@@ -25,15 +39,29 @@ public function getBody()
{
$Engine = QUI::getTemplateManager()->getEngine();
$Engine->assign(array(
'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
'this' => $this,
'Site' => $this->getSite(),
'Project' => $this->getProject(),
'jsControl' => 'package/quiqqer/menu/bin/SlideOut'
));
$params = [
'this' => $this,
'Project' => $this->getProject(),
'jsControl' => 'package/quiqqer/menu/bin/SlideOut',
'showHomeLink' => $this->getAttribute('showHomeLink')
];
if ($this->getAttribute('menuId')) {
$IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
$template = dirname(__FILE__).'/Menu.Independent.html';
$params['FileMenu'] = dirname(__FILE__).'/Menu.Children.Independent.html';
$params['IndependentMenu'] = $IndependentMenu;
$params['showFirstLevelIcons'] = $this->getAttribute('showFirstLevelIcons');
} else {
$template = dirname(__FILE__).'/Menu.html';
$params['FileMenu'] = dirname(__FILE__).'/Menu.Children.html';
$params['Site'] = $this->getSite();
}
$Engine->assign($params);
return $Engine->fetch(dirname(__FILE__) . '/Menu.html');
return $Engine->fetch($template);
}
/**
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab