main navigation redesign

This commit is contained in:
Daniel 2014-05-01 23:48:51 +02:00
commit 99f101306b
4 changed files with 54 additions and 35 deletions

View file

@ -41,19 +41,24 @@
<body>
<header>
<nav>
<nav class="cf">
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" onclick><i class="fa fa-bars"></i>Menü</label>
<div id="home">
<a href="<?=$linker->link(array(), 0, true, array(), true)?>"><?=\nre\configs\AppConfig::$app['name']?></a>
</div>
<?php if(!is_null($loggedUser)) : ?>
<?php if(!is_null($loggedCharacter)) : ?>
<a href="<?=$linker->link(array('characters','character',$loggedSeminary['url'],$loggedCharacter['url']))?>" id="profile"><i class="fa fa-user fa-fw"></i><?=$loggedCharacter['name']?><span class="circlenote"><?=$loggedCharacter['xplevel']?></span></a>
<?php else : ?>
<a href="<?=$linker->link(array('users',$loggedUser['url']))?>" id="profile"><i class="fa fa-user fa-fw"></i><?=$loggedUser['username']?></a>
<div id="profile" class="cf">
<?php if(!is_null($loggedCharacter)) : ?>
<a href="<?=$linker->link(array('characters','character',$loggedSeminary['url'],$loggedCharacter['url']))?>"><img src="http://s1.directupload.net/images/140501/z6ni4yk8.png"><span><?=$loggedCharacter['name']?></span><span class="lvlname">Level <?=$loggedCharacter['xplevel']?></span></a>
<?php else : ?>
<a href="<?=$linker->link(array('users',$loggedUser['url']))?>"><?=$loggedUser['username']?><span class="lvlname">Martina Mustermann</span></a>
<?php endif ?>
</div>
<?php endif ?>
<?php endif ?>
<menu>
<ul id="mainmenu">
<?=$menu?>
</menu>
</ul>
</nav>
</header>
<article class="wrap">

View file

@ -1,9 +1,9 @@
<li><a href="<?=$linker->link(array(), 0, true, array(), true)?>"><i class="fa fa-home fa-fw"></i><?=\nre\configs\AppConfig::$app['name']?></a></li>
<?php if(!is_null($loggedUser) && count(array_intersect(array('admin','moderator'),$loggedUser['roles'])) > 0) : ?><li><a href="<?=$linker->link('users')?>"><i class="fa fa-users fa-fw"></i><?=_('Users')?></a></li><?php endif ?>
<?php if(!is_null($loggedUser)) : ?><li><a href="<?=$linker->link('seminaries')?>"><i class="fa fa-pencil-square-o fa-fw"></i><?=_('Seminaries')?></a></li><?php endif ?>
<li><a href="<?=$linker->link(array(), 0, true, array(), true)?>"><?=\nre\configs\AppConfig::$app['name']?></a></li>
<?php if(!is_null($loggedUser) && count(array_intersect(array('admin','moderator'),$loggedUser['roles'])) > 0) : ?><li><a href="<?=$linker->link('users')?>"><?=_('Users')?></a></li><?php endif ?>
<?php if(!is_null($loggedUser)) : ?><li><a href="<?=$linker->link('seminaries')?>"><?=_('Seminaries')?></a></li><?php endif ?>
<?php if(!is_null($loggedCharacter) && count($loggedCharacter['characterroles']) > 0) : ?><?=$seminarymenu?><?php endif ?>
<?php if(is_null($loggedUser)) : ?>
<li><a href="<?=$linker->link(array('users','login'))?>"><i class="fa fa-sign-in fa-fw"></i><?=_('Login')?></a></li>
<li><a href="<?=$linker->link(array('users','login'))?>"><?=_('Login')?></a></li>
<?php else : ?>
<li><a href="<?=$linker->link(array('users','logout'))?>"><i class="fa fa-sign-out fa-fw"></i><?=_('Logout')?></a></li>
<li><a href="<?=$linker->link(array('users','logout'))?>"><?=_('Logout')?></a></li>
<?php endif ?>

View file

@ -1,5 +1,7 @@
<li><a href="<?=$linker->link(array('seminaries',$loggedSeminary['url']))?>" class="smnry"><i class="fa fa-chevron-right fa-fw"></i><?=$loggedSeminary['title']?></a></li>
<?php if(count(array_intersect(array('admin','moderator'),$loggedUser['roles'])) > 0 || count(array_intersect(array('admin','moderator'),$loggedCharacter['characterroles']))) : ?><li><a href="<?=$linker->link(array('characters',$loggedSeminary['url']))?>" class="smnry"><i class="fa fa-users fa-fw"></i><?=_('Characters')?></a></li><?php endif ?>
<li><a href="<?=$linker->link(array('charactergroups','index',$loggedSeminary['url']))?>" class="smnry"><i class="fa fa-users fa-fw"></i><?=_('Character Groups')?></a></li>
<li><a href="<?=$linker->link(array('achievements','index',$loggedSeminary['url']))?>" class="smnry"><i class="fa fa-trophy fa-fw"></i><?=_('Achievements')?></a></li>
<li><a href="<?=$linker->link(array('library','index',$loggedSeminary['url']))?>" class="smnry"><i class="fa fa-book fa-fw"></i><?=_('Library')?></a></li>
<ul id="smnry">
<li><a href="<?=$linker->link(array('seminaries',$loggedSeminary['url']))?>"><i class="fa fa-chevron-right fa-fw"></i><?=$loggedSeminary['title']?></a></li>
<?php if(count(array_intersect(array('admin','moderator'),$loggedUser['roles'])) > 0 || count(array_intersect(array('admin','moderator'),$loggedCharacter['characterroles']))) : ?><li><a href="<?=$linker->link(array('characters',$loggedSeminary['url']))?>"><i class="fa fa-users fa-fw"></i><?=_('Characters')?></a></li><?php endif ?>
<li><a href="<?=$linker->link(array('charactergroups','index',$loggedSeminary['url']))?>"><i class="fa fa-users fa-fw"></i><?=_('Character Groups')?></a></li>
<li><a href="<?=$linker->link(array('achievements','index',$loggedSeminary['url']))?>"><i class="fa fa-trophy fa-fw"></i><?=_('Achievements')?></a></li>
<li><a href="<?=$linker->link(array('library','index',$loggedSeminary['url']))?>"><i class="fa fa-book fa-fw"></i><?=_('Library')?></a></li>
</ul>

View file

@ -62,26 +62,30 @@ a:hover{color:#62c5cd}
header{background:#0f373c;margin-bottom:19px;position:fixed;width:100%;z-index:99}
header nav{z-index:99;margin:0 5%}
header a{display:block;margin-left:5%;color:#d9e5e7;font-family:Georgia,serif;text-transform:uppercase}
header a:hover{color:#fff}
header .fa{color:#5e9499}
header a:hover .fa{color:#7fb0b4}
menu{display:none;opacity:0;position:absolute;margin:0;padding:0 0 15px;background:#0f373c;right:0;left:0}
menu li{display:block;margin:0 5%}
menu a,#profile{display:block;padding:15px 0;color:#d9e5e7}
menu a:hover,#profile:hover{color:#fff}
menu .active{color:#fff}
menu .active .fa,.crewards .unlocked .fa{color:#bcd75e}
menu .smnry{font-size:0.875em;padding:8px 0 8px 12px;background:#0c2e32;border-bottom:2px solid #0f373c;border-radius:3px}
#home{display:none;opacity:0}
#home a{line-height:93px;font-size:22px;letter-spacing:8px}
#profile{float:right}
.circlenote{margin-left:15px;background:#bcd75e;border-radius:0.8em;display:inline-block;color:#0f373c;font-weight:bold;line-height:1.6em;text-align:center;width:1.6em;font-size:.8em}
#profile a{padding-top:10px;font-size:.875em;font-family:"Open sans",sans-serif;text-transform:none;margin-left:0}
#profile img{float:left;width:36px;height:36px;margin-right:15px;border-radius:18px}
#profile span{display:inline-block}
#profile .lvlname{font-size:.875em;color:#889da0;margin-top:-4px;display:block}
#mainmenu{display:none;opacity:0;position:absolute;background:#0f373c;margin:0;left:0;right:0}
#mainmenu a{padding:6px 0;letter-spacing:1px}
#mainmenu .active{color:#fff}
#mainmenu .active .fa,.crewards .unlocked .fa{color:#bcd75e}
#smnry a{font-size:0.875em;font-family:"Open sans",sans-serif;text-transform:none;letter-spacing:0;margin:0 5% 2px;padding:8px 0 8px 12px;background:#0c2e32;border-radius:3px}
#smnry li:first-child{margin-top:10px}
#smnry li:last-child{margin-bottom:10px}
#toggle,.toggle{display:none}
.toggle{color:#d9e5e7;display:inline-block;padding:15px 15px 15px 0;position:relative;cursor:pointer;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
#toggle:checked ~ menu{display:block;position:fixed;left:0;top:54px;bottom:0;overflow-y:auto;opacity:1}
#toggle:checked ~ #mainmenu{display:block;position:fixed;top:56px;bottom:0;overflow-y:auto;opacity:1}
article{padding:70px 0 30px}
aside{display:none}
@ -377,10 +381,18 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
@media only screen and (min-width:1024px){
header{position:fixed;left:0;top:0;bottom:0;width:300px;margin:0}
header nav{margin:30px 10% 0}
menu{display:block;opacity:1;position:relative}
menu a{padding:10px 0}
#profile{float:none;margin:0 0 15px 12px}
header nav{margin:0}
header a{margin-left:40px}
#home{display:block;opacity:1}
#profile{float:none;height:94px;margin-bottom:28px;background:#0c2e32}
#profile a{margin-top:15px;margin-left:40px}
#profile img{width:44px;height:44px;border-radius:22px}
#profile span{display:block}
#profile .lvlname{margin-top:0}
#mainmenu{display:block;opacity:1;position:relative}
#mainmenu li:first-child{display:none;opacity:0}
#smnry li:first-child{display:block;opacity:1}
#smnry a{margin:0 40px 2px}
#toggle,.toggle{display:none}
.wrap{margin:0 0 0 300px}
article{padding:20px 40px 80px 40px}