Dr. Theme-instein - It Lives!

4 files changed, 369 insertions, 165 deletions

diff --git a/view/css/default.css b/view/css/default.css
index 956d8c728..7846a09ac 100644
--- a/view/css/default.css
+++ b/view/css/default.css
@@ -6,15 +6,18 @@ nav {
 
 aside {
 	display: block;
-	min-height: 112px;
 	width: 200px;
 	position: absolute;
-	float: left;
+	top: 64px;
+	left: 0;
+	margin-left: 10px;
+/*	float: left; */
 }
 
 
 section {
-	padding-left: 250px;
+	position: absolute;
+	top: 64px;
+	left: 250px;
 	display: block;
-	min-height: 112px;	
 }
diff --git a/view/theme/duepuntozero/css/style.css b/view/theme/duepuntozero/css/style.css
index beeaccb41..5b9aee3d2 100644
--- a/view/theme/duepuntozero/css/style.css
+++ b/view/theme/duepuntozero/css/style.css
@@ -19,6 +19,35 @@ abbr {
 	border-bottom: none;
 }
 
+
+/* icons */
+.icon {
+  background-color: transparent ;
+  background-repeat: no-repeat;
+  display: block;
+  overflow: hidden;
+  text-indent: -9999px;
+/*  min-width: 22px;
+  height: 22px; */
+}
+.icon.text {
+  text-indent: 0px;
+}
+.icon.notify {
+  background-image: url("../../../../images/icons/22/notify_off.png");
+ min-width: 22px;
+  height: 22px; 
+  background-position: left center;
+  padding: 1px;
+}
+.icon.gear {
+  background-image: url("../../../../images/icons/22/gear.png");
+ min-width: 22px;
+  height: 22px; 
+  background-position: left center;
+  padding: 1px;
+}
+
 a, a:visited, a:link { color: #3465a4; text-decoration: none; }
 a:hover {text-decoration: underline; }
 
@@ -91,7 +120,7 @@ blockquote {
 /* nav */
 nav {
 	display: block;
-	margin: 0px 10%;
+/*	margin: 0px 10%; */
 	border-bottom: 1px solid #babdb6;
 }
 nav #site-location {
@@ -174,16 +203,7 @@ nav #nav-link-wrapper .nav-link {
 	border-right: 1px solid #babdb6;
 }
 
-/* aside */
-aside {
-	display: block;
-	min-height: 112px;
-	margin-left: 10%;
-	padding: 1em;
-	background-image: url(../img/border.jpg);
-	background-position: top left;
-	background-repeat: no-repeat;
-}
+
 
 #dfrn-request-link {
 	display: block;
@@ -206,17 +226,6 @@ aside {
 	background-color: #3465a4;
 }
 
-/* section */
-section {
-	margin: 0px 10%;
-	padding-top: 1em;
-	padding-right: 1em;
-	background-color: #ffffff;
-	background-image: url(../img/border.jpg);
-	background-position: top right;
-	background-repeat: no-repeat;
-}
-
 .tabs {
 	height: 27px;
 	background-image: url(../img/head.jpg);
@@ -224,6 +233,7 @@ section {
 	background-position: 0px -20px;
 	border-bottom: 1px solid #babdb6;
 	padding:0px;
+	margin-right: 15px;
 }
 .tabs li { margin: 0px; list-style: none; }
 .tab {
@@ -3189,6 +3199,255 @@ div.jGrowl div.info {
 	filter:alpha(opacity=100);
 }
 
+
+#id_term_label {
+	width:75px;
+}
+#id_term {
+	width:100px;
+}
+
+#recip {
+	
+}
+.autocomplete-w1 { background: #ffffff; no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
+.autocomplete { color:#000; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
+.autocomplete .selected { background:#F0F0F0; }
+.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
+
+#datebrowse-sidebar select {
+	margin-left: 25px;
+}
+
+
+.jslider .jslider-scale ins {
+    color: #333;
+	font-size: 12px;
+	width: 100px;
+	text-align: center;
+}
+
+.slider {
+	margin-top: 10px;
+	margin-bottom: 30px;
+}
+
+
+#main-slider {
+	position: relative; 
+	left: 5%; 
+	width: 90%;
+}
+
+
+#contact-slider {
+	position: relative; 
+	left: 5%; 
+	width: 90%;
+}
+
+/* nav */
+nav {
+  width: 100%;
+  height: 32px;
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  padding: 0px;
+  background-color: #888888;
+  color: #ffffff;
+  z-index: 100;
+  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
+}
+nav a,
+nav a:active,
+nav a:visited,
+nav a:link,
+nav a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+nav ul {
+  margin: 0px;
+  padding: 0px 20px;
+}
+nav ul li {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  float: left;
+}
+nav ul li .menu-popup {
+  left: 0px;
+  right: auto;
+}
+nav .nav-menu-icon {
+  position: relative;
+  height: 22px;
+  padding: 5px;
+  margin: 0px 10px;
+  -moz-border-radius: 5px 5px 0 0;
+  -webkit-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+nav .nav-menu-icon.selected {
+  background-color: #FF0000;
+}
+nav .nav-menu-icon img {
+  width: 22px;
+  height: 22px;
+}
+nav .nav-menu-icon .nav-notify {
+  top: 3px;
+}
+nav .nav-menu {
+  position: relative;
+  height: 16px;
+  padding: 5px;
+  margin: 3px 15px 0px;
+  font-size: 14px;
+  border-bottom: 3px solid #888888;
+}
+nav .nav-menu.selected {
+  border-bottom: 3px solid #FF8888;
+}
+nav .nav-notify {
+  display: none;
+  position: absolute;
+  background-color: #dc0000;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  font-size: 10px;
+  padding: 1px 3px;
+  top: 0px;
+  right: -10px;
+  min-width: 15px;
+  text-align: right;
+}
+nav .nav-notify.show {
+  display: block;
+}
+nav #nav-help-link,
+nav #nav-search-link,
+nav #nav-directory-link,
+nav #nav-apps-link,
+nav #nav-site-linkmenu {
+  float: right;
+}
+nav #nav-help-link .menu-popup,
+nav #nav-search-link .menu-popup,
+nav #nav-directory-link .menu-popup,
+nav #nav-apps-link .menu-popup,
+nav #nav-site-linkmenu .menu-popup {
+  right: 0px;
+  left: auto;
+}
+nav #nav-notifications-linkmenu.on .icon.s22.notify,
+nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+  background-image: url("../../../../images/icons/22/notify_on.png");
+}
+nav #nav-apps-link.selected {
+  background-color: #364e59;
+}
+ul.menu-popup {
+  position: absolute;
+  display: none;
+  width: 10em;
+  background: #ffffff;
+  color: #2d2d2d;
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+  border: 3px solid #364e59;
+  z-index: 100000;
+  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+}
+ul.menu-popup a {
+  display: block;
+  color: #2d2d2d;
+  padding: 5px 10px;
+  text-decoration: none;
+}
+ul.menu-popup a:hover {
+  background-color: #ccff42;
+}
+ul.menu-popup .menu-sep {
+  border-top: 1px solid #9eabb0;
+}
+ul.menu-popup li {
+  float: none;
+  overflow: auto;
+  height: auto;
+  display: block;
+}
+ul.menu-popup li img {
+  float: left;
+  width: 16px;
+  height: 16px;
+  padding-right: 5px;
+}
+ul.menu-popup .empty {
+  padding: 5px;
+  text-align: center;
+  color: #9eabb0;
+}
+ul.menu-popup .toolbar {
+  background-color: #9eabb0;
+  height: auto;
+  overflow: auto;
+}
+ul.menu-popup .toolbar a {
+  float: right;
+}
+ul.menu-popup .toolbar a:hover {
+  background-color: #ffffff;
+}
+/* header */
+header {
+  position: fixed;
+  left: 43%;
+  right: 43%;
+  top: 0px;
+  margin: 0px;
+  padding: 0px;
+  /*width: 100%; height: 12px; */
+
+  z-index: 110;
+  color: #ffffff;
+}
+header #site-location {
+  display: none;
+}
+header #banner {
+  overflow: hidden;
+  text-align: center;
+  width: 100%;
+}
+header #banner a,
+header #banner a:active,
+header #banner a:visited,
+header #banner a:link,
+header #banner a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+  vertical-align: bottom;
+}
+header #banner #logo-img {
+  height: 22px;
+  margin-top: 5px;
+}
+header #banner #logo-text {
+  font-size: 22px;
+}
+
+
 /* notifications popup menu */
 .nav-notify {
 	display: none;
@@ -3258,49 +3517,3 @@ ul.menu-popup {
 .notify-seen {
 	background: #DDDDDD;
 }
-
-#id_term_label {
-	width:75px;
-}
-#id_term {
-	width:100px;
-}
-
-#recip {
-	
-}
-.autocomplete-w1 { background: #ffffff; no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
-.autocomplete { color:#000; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
-.autocomplete .selected { background:#F0F0F0; }
-.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
-
-#datebrowse-sidebar select {
-	margin-left: 25px;
-}
-
-
-.jslider .jslider-scale ins {
-    color: #333;
-	font-size: 12px;
-	width: 100px;
-	text-align: center;
-}
-
-.slider {
-	margin-top: 10px;
-	margin-bottom: 30px;
-}
-
-
-#main-slider {
-	position: relative; 
-	left: 5%; 
-	width: 90%;
-}
-
-
-#contact-slider {
-	position: relative; 
-	left: 5%; 
-	width: 90%;
-}
diff --git a/view/theme/slackr/css/style.css b/view/theme/slackr/css/style.css
index 7ee6d133d..8471982e9 100644
--- a/view/theme/slackr/css/style.css
+++ b/view/theme/slackr/css/style.css
@@ -39,17 +39,6 @@ nav #banner img {
 	background: #ffffff !important;
 }
 
-section {
-	margin: 0px 32px;
-}
-
-aside {
-	margin-left: 32px;
-}
-nav {
-	margin-left: 32px;
-	margin-right: 32px;
-}
 
 nav #site-location {
 	top: 80px;
@@ -220,31 +209,3 @@ nav #site-location {
 -o-transform: rotate(4deg);
 }
 
-
-/*
-.jslider .jslider-scale ins {
-    color: #333;
-	font-size: 12px;
-	width: 100px;
-	text-align: center;
-}
-
-.slider {
-	margin-top: 10px;
-	margin-bottom: 15px;
-	height: 32px; 
-}
-
-#main-slider {
-	position: relative; 
-	left: 10%; 
-	width: 90%;
-}
-
-#contact-slider {
-	position: relative; 
-	left: 10%; 
-	width: 90%;
-
-}
-*/
\ No newline at end of file
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 4675c3e5c..af1fc9414 100644
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -1,68 +1,95 @@
-<nav>
-	$langselector
+<header>
+	{# $langselector #}
 
 	<div id="site-location">$sitelocation</div>
-
-	{{ if $nav.logout }}<a id="nav-logout-link" class="nav-link $nav.logout.2" href="$nav.logout.0" title="$nav.logout.3" >$nav.logout.1</a> {{ endif }}
-	{{ if $nav.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> {{ endif }}
-
-	<span id="nav-link-wrapper" >
-
-	{{ if $nav.register }}<a id="nav-register-link" class="nav-commlink $nav.register.2 $sel.register" href="$nav.register.0" title="$nav.register.3" >$nav.register.1</a>{{ endif }}
+	<div id="banner">$banner</div>
+</header>
+<nav>
+	<ul>
+		{{ if $userinfo }}
+			<li id="nav-user-linkmenu" class="nav-menu-icon"><a href="#" rel="#nav-user-menu" title="$sitelocation"><img src="$userinfo.icon" alt="$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.notifications }}<li><a class="$nav.notifications.2" href="$nav.notifications.0" title="$nav.notifications.3" >$nav.notifications.1</a></li>{{ endif }}
+					{{ if $nav.messages }}<li><a class="$nav.messages.2" href="$nav.messages.0" title="$nav.messages.3" >$nav.messages.1</a></li>{{ endif }}
+					{{ if $nav.contacts }}<li><a class="$nav.contacts.2" href="$nav.contacts.0" title="$nav.contacts.3" >$nav.contacts.1</a></li>{{ endif }}	
+				</ul>
+			</li>
+		{{ endif }}
 		
-	{{ if $nav.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>{{ endif }}
+		{{ if $nav.community }}
+			<li id="nav-community-link" class="nav-menu $sel.community">
+				<a class="$nav.community.2" href="$nav.community.0" title="$nav.community.3" >$nav.community.1</a>
+			</li>
+		{{ endif }}
+		
+		{{ if $nav.network }}
+			<li id="nav-network-link" class="nav-menu $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.home }}
+			<li id="nav-home-link" class="nav-menu $sel.home">
+				<a class="$nav.home.2" href="$nav.home.0" title="$nav.home.3" >$nav.home.1</a>
+				<span id="home-update" class="nav-notify"></span>
+			</li>
+		{{ endif }}
 		
-	{{ if $nav.apps }}<a id="nav-apps-link" class="nav-link $nav.apps.2" href="$nav.apps.0" title="$nav.apps.3" >$nav.apps.1</a>{{ endif }}
-
-	<a id="nav-search-link" class="nav-link $nav.search.2" href="$nav.search.0" title="$nav.search.3" >$nav.search.1</a>
-	<a id="nav-directory-link" class="nav-link $nav.directory.2" href="$nav.directory.0" title="$nav.directory.3" >$nav.directory.1</a>
-
-	{{ if $nav.admin }}<a id="nav-admin-link" class="nav-link $nav.admin.2" href="$nav.admin.0" title="$nav.admin.3" >$nav.admin.1</a>{{ endif }}
-
-	{{ if $nav.network }}
-	<a id="nav-network-link" class="nav-commlink $nav.network.2 $sel.network" href="$nav.network.0" title="$nav.network.3" >$nav.network.1</a>
-	<span id="net-update" class="nav-ajax-left"></span>
-	{{ endif }}
-	{{ if $nav.home }}
-	<a id="nav-home-link" class="nav-commlink $nav.home.2 $sel.home" href="$nav.home.0" title="$nav.home.3" >$nav.home.1</a>
-	<span id="home-update" class="nav-ajax-left"></span>
-	{{ endif }}
-	{{ if $nav.community }}
-	<a id="nav-community-link" class="nav-commlink $nav.community.2 $sel.community" href="$nav.community.0" title="$nav.community.3" >$nav.community.1</a>
-	{{ endif }}
-	{{ if $nav.introductions }}
-	<a id="nav-notify-link" class="nav-commlink $nav.introductions.2 $sel.introductions" href="$nav.introductions.0" title="$nav.introductions.3" >$nav.introductions.1</a>
-	<span id="intro-update" class="nav-ajax-left"></span>
-	{{ endif }}
-	{{ if $nav.messages }}
-	<a id="nav-messages-link" class="nav-commlink $nav.messages.2 $sel.messages" href="$nav.messages.0" title="$nav.messages.3" >$nav.messages.1</a>
-	<span id="mail-update" class="nav-ajax-left"></span>
-	{{ endif }}
-
-
-
-	{{ if $nav.manage }}<a id="nav-manage-link" class="nav-commlink $nav.manage.2 $sel.manage" href="$nav.manage.0" title="$nav.manage.3">$nav.manage.1</a>{{ endif }}
-
-
 		{{ if $nav.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>
+			<li  id="nav-notifications-linkmenu" class="nav-menu-icon"><a href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1"><span class="icon s22 notify">$nav.notifications.1</span></a>
+				<span id="notify-update" class="nav-notify"></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>
+					<!-- TODO: better icons! -->
+					<li id="nav-notifications-mark-all" class="toolbar"><a href="#" onclick="notifyMarkAll(); return false;" title="$nav.notifications.mark.1"><span class="icon s10 edit"></span></a></a><a href="$nav.notifications.all.0" title="$nav.notifications.all.1"><span class="icon s10 plugin"></span></a></li>
 					<li class="empty">$emptynotifications</li>
 				</ul>
+			</li>		
 		{{ endif }}		
+		
+		<li id="nav-site-linkmenu" class="nav-menu-icon"><a href="#" rel="#nav-site-menu"><span class="icon s22 gear">Site</span></a>
+			<ul id="nav-site-menu" class="menu-popup">
+				{{ if $nav.manage }}<li><a class="$nav.manage.2" href="$nav.manage.0" title="$nav.manage.3">$nav.manage.1</a></li>{{ endif }}				
 
-	{{ if $nav.settings }}<a id="nav-settings-link" class="nav-link $nav.settings.2" href="$nav.settings.0" title="$nav.settings.3">$nav.settings.1</a>{{ endif }}
-	{{ if $nav.profiles }}<a id="nav-profiles-link" class="nav-link $nav.profiles.2" href="$nav.profiles.0" title="$nav.profiles.3" >$nav.profiles.1</a>{{ endif }}
+				{{ if $nav.settings }}<li><a class="$nav.settings.2" 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.contacts }}<a id="nav-contacts-link" class="nav-link $nav.contacts.2" href="$nav.contacts.0" title="$nav.contacts.3" >$nav.contacts.1</a>{{ endif }}
-	</span>
-	<span id="nav-end"></span>
-	<span id="banner">$banner</span>
-</nav>
+				{{ if $nav.logout }}<li><a class="menu-sep $nav.logout.2" href="$nav.logout.0" title="$nav.logout.3" >$nav.logout.1</a></li>{{ endif }}
+				{{ if $nav.login }}<li><a class="$nav.login.2" href="$nav.login.0" title="$nav.login.3" >$nav.login.1</a><li>{{ endif }}
+			</ul>		
+		</li>
+		
+		{{ if $nav.help }} 
+		<li id="nav-help-link" class="nav-menu $sel.help">
+			<a class="$nav.help.2" target="friendika-help" href="$nav.help.0" title="$nav.help.3" >$nav.help.1</a>
+		</li>
+		{{ endif }}
 
+		<li id="nav-search-link" class="nav-menu $sel.search">
+			<a class="$nav.search.2" href="$nav.search.0" title="$nav.search.3" >$nav.search.1</a>
+		</li>
+		<li id="nav-directory-link" class="nav-menu $sel.directory">
+			<a class="$nav.directory.2" href="$nav.directory.0" title="$nav.directory.3" >$nav.directory.1</a>
+		</li>
+		
+		{{ if $nav.apps }}
+			<li id="nav-apps-link" class="nav-menu $sel.apps">
+				<a class=" $nav.apps.2" href="#" rel="#nav-apps-menu" title="$nav.apps.3" >$nav.apps.1</a>
+				<ul id="nav-apps-menu" class="menu-popup">
+					{{ for $apps as $ap }}
+					<li>$ap</li>
+					{{ endfor }}
+				</ul>
+			</li>
+		{{ endif }}
+	</ul>
+
+</nav>
 <ul id="nav-notifications-template" style="display:none;" 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>
+	<li><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
+
+<div style="position: fixed; top: 3px; left: 5px; z-index:9999">$langselector</div>