blog theme: more on header/nav

This commit is contained in:
Fabrixxm 2012-06-21 15:37:03 +02:00
parent 77d0f4f2b8
commit 34f01ece9f
2 changed files with 170 additions and 5 deletions

View file

@ -10,13 +10,98 @@
<img width="1000" height="288" alt="" src="~blog.header.image~">
</a>
<form id="searchform" action="$baseurl/search" method="get">
<form id="searchform" action="$baseurl/search" method="get" role="search">
<label class="assistive-text" for="search">Search</label>
<input id="search" class="field" type="text" placeholder="Search" name="search">
<input id="searchsubmit" class="submit" type="submit" value="Search" name="submit">
</form>
<nav id="access" role="navigation">
<div class="menu">
<ul>
{{ if $nav.home }}
<li class="$sel.home"><a id="nav-home-link" class="nav-commlink $nav.home.2" href="$nav.home.0" title="$nav.home.3" >$nav.home.1</a></li>
<span id="home-update" class="nav-ajax-left"></span>
{{ endif }}
{{ if $nav.community }}<li class="$sel.community"><a id="nav-community-link" class="nav-commlink $nav.community.2 " href="$nav.community.0" title="$nav.community.3" >$nav.community.1</a></li>{{ endif }}
{{ if $nav.login }}<li class="$sel.login"><a id="nav-login-link" class="nav-login-link $nav.login.2" href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a></li>{{ endif }}
{{ if $nav.register }}<li class="$sel.register"><a id="nav-register-link" class="nav-commlink $nav.register.2 " href="$nav.register.0" title="$nav.register.3" >$nav.register.1</a></li>{{ endif }}
{{ if $nav.apps }}<li class="$sel.apps"><a id="nav-apps-link" class="nav-link $nav.apps.2" href="$nav.apps.0" title="$nav.apps.3" >$nav.apps.1</a></li>{{ endif }}
{#<li><a id="nav-search-link" class="nav-link $nav.search.2" href="$nav.search.0" title="$nav.search.3" >$nav.search.1</a></li> #}
{{ if $nav.directory }}<li class="$sel.directory"><a id="nav-directory-link" class="nav-link $nav.directory.2" href="$nav.directory.0" title="$nav.directory.3" >$nav.directory.1</a></li>{{ endif }}
{{ if $nav.help }} <li class="$sel.help"><a id="nav-help-link" class="nav-link $nav.help.2" target="friendika-help" href="$nav.help.0" title="$nav.help.3" >$nav.help.1</a></li>{{ endif }}
</ul>
</div>
</nav>
{{ if $nav.logout }}
<nav id="tools" role="navigation">
<div class="user">
<ul>
{{ if $userinfo }}
<li><a href="$nav.home.0" title="$sitelocation"><img src="$userinfo.icon" alt="$userinfo.name">$userinfo.name</a>
<ul id="nav-user-menu" class="menu-popup">
{{ for $nav.usermenu as $usermenu }}
<li><a class="$usermenu.2" href="$usermenu.0" title="$usermenu.3">$usermenu.1</a></li>
{{ endfor }}
{{ if $nav.contacts }}<li><a class="$nav.contacts.2" href="$nav.contacts.0" title="$nav.contacts.3" >$nav.contacts.1</a></li>{{ endif }}
{{ if $nav.manage }}<li><a class="$nav.manage.2 sep" href="$nav.manage.0" title="$nav.manage.3">$nav.manage.1</a></li>{{ endif }}
{{ if $nav.settings }}<li><a class="$nav.settings.2 sep" href="$nav.settings.0" title="$nav.settings.3">$nav.settings.1</a></li>{{ endif }}
{{ if $nav.admin }}<li><a class="$nav.admin.2" href="$nav.admin.0" title="$nav.admin.3" >$nav.admin.1</a></li>{{ endif }}
{{ if $nav.logout }}<li><a class="$nav.logout.2 sep" href="$nav.logout.0" title="$nav.logout.3" >$nav.logout.1</a></li>{{ endif }}
</ul>
</li>
{{ endif }}
{{ if $nav.network }}
<li class="$sel.network">
<a class="$nav.network.2" href="$nav.network.0" title="$nav.network.3" >$nav.network.1</a>
<span id="net-update" class="nav-notify"></span>
</li>
{{ endif }}
{{ if $nav.notifications }}
<li class="$sel.notifications">
<a id="nav-notifications-linkmenu" class="nav-commlink" href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1">$nav.notifications.1</a>
<span id="notify-update" class="nav-ajax-left"></span>
<ul id="nav-notifications-menu" class="menu-popup">
<li id="nav-notifications-see-all"><a href="$nav.notifications.all.0">$nav.notifications.all.1</a></li>
<li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">$nav.notifications.mark.1</a></li>
<li class="empty">$emptynotifications</li>
</ul>
</li>
{{ endif }}
{{ if $nav.introductions }}
<li class="$sel.introductions">
<a id="nav-notify-link" class="nav-commlink $nav.introductions.2" href="$nav.introductions.0" title="$nav.introductions.3" >$nav.introductions.1</a>
<span id="intro-update" class="nav-ajax-left"></span>
</li>
{{ endif }}
{{ if $nav.messages }}
<li class="$sel.messages">
<a id="nav-messages-link" class="nav-commlink $nav.messages.2" href="$nav.messages.0" title="$nav.messages.3" >$nav.messages.1</a>
<span id="mail-update" class="nav-ajax-left"></span>
</li>
{{ endif }}
</ul>
</div>
</nav>
{{ endif }}
</header>
<script type="text/plain" id="nav-notifications-template" rel="template">
<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
</script>

View file

@ -234,6 +234,9 @@ a:focus, a:active, a:hover {
margin: 0 auto 6px;
width: 100%;
}
#access div {
margin: 0 7.6%;
}
#access ul {
font-size: 13px;
list-style: none outside none;
@ -287,7 +290,7 @@ a:focus, a:active, a:hover {
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
.selected > a, #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
font-weight: bold;
}
#branding #searchform {
@ -338,9 +341,86 @@ a:focus, a:active, a:hover {
}
#branding #site-location {
font-size: 0.7em;
color: #666666;
color: #BBBBBB;
position: absolute;
right: 7.6%;
text-align: right;
top: -1.4em;
top: 13.5em;
}
/* user bar */
#tools {
background: -moz-linear-gradient(#444444, #222222) repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
position: fixed;
top: 0px;
left: auto;
margin: 0 auto 6px;
width: 1000px;
}
#tools div {
margin: 0 7.6%;
}
#tools ul {
font-size: 10px;
list-style: none outside none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#tools li {
float: left;
position: relative;
}
#tools a {
color: #EEEEEE;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#tools ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
margin: 0;
position: absolute;
top: 3.333em;
width: 188px;
z-index: 99999;
}
#tools ul ul .sep {
border-top: 1px dotted #DDDDDD;
}
#tools ul ul ul {
left: 100%;
top: 0;
}
#tools ul ul a {
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px dotted #DDDDDD;
color: #444444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px;
width: 168px;
}
#tools li:hover > a, #access ul ul *:hover > a, #access a:focus {
background: none repeat scroll 0 0 #EFEFEF;
}
#tools li:hover > a, #access a:focus {
background: -moz-linear-gradient(#F9F9F9, #E5E5E5) repeat scroll 0 0 transparent;
color: #373737;
}
#tools ul li:hover > ul {
display: block;
}
#tools img {
width: 16px;
margin-bottom: -5px;
margin-right: 5px;
}