blog theme: more on header/nav

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

diff --git a/view/theme/blog/style.css b/view/theme/blog/style.css
index 82694e2e26f3140b7667adeeb036ac2a8f17f522..b3b84fe7abdb77dbfd9e29acc51163e9f8995cff 100644 (file)
--- a/view/theme/blog/style.css
+++ b/view/theme/blog/style.css
@@ -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;
+}
\ No newline at end of file