From 093a3e6742e8cb008d75c40ce713d6d42082e6ec Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Mon, 28 Dec 2015 20:40:04 +0100
Subject: [PATCH] some work on vier nav-notification-menu

---
 js/main.js                        | 17 +++++++----
 view/theme/vier/style.css         | 50 ++++++++++++++++++++++++++++---
 view/theme/vier/templates/nav.tpl | 10 ++++++-
 3 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/js/main.js b/js/main.js
index f106b3daf..b28b1079b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -247,13 +247,18 @@
 				eNotif.children("note").each(function(){
 					e = $(this);
 					var text = e.text().format("<span class='contactname'>"+e.attr('name')+"</span>");
+					var contact = ("<a href="+e.attr('url')+"><span class='contactname'>"+e.attr('name')+"</span></a>");
 					var seenclass = (e.attr('seen')==1)?"notify-seen":"notify-unseen";
-					var html = notifications_tpl.format(e.attr('href'),
-						e.attr('photo'),                    // {0}
-						text,                               // {1}
-						e.attr('date'),                     // {2}
-						seenclass,                          // {3}
-						new Date(e.attr('timestamp')*1000)  // {4}
+					var html = notifications_tpl.format(
+						e.attr('href'),                     // {0}  // link to the source
+						e.attr('photo'),                    // {1}  // photo of the contact
+						text,                               // {2}  // preformatet text (autor + text)
+						e.attr('date'),                     // {3}  // date of notification (time ago)
+						seenclass,                          // {4}  // vistiting status of the notification
+						new Date(e.attr('timestamp')*1000), // {5}  //date of notification
+						e.attr('url'),                      // {6}  // profile url of the contact
+						e.text().format(""),                // {7}  // clean status text
+						contact                             // {8}  //preformatat author (name + profile url)
 					);
 					nnm.append(html);
 				});
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 7d0c36be1..3304d141f 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -917,7 +917,8 @@ ul.menu-popup .empty {
 #nav-notifications-menu {
   width: 400px;
   max-height: 550px;
-  overflow: auto;
+  overflow: hidden;
+  posistion: absolute;
 }
 /* #nav-notifications-menu a {
 	display: inline;
@@ -928,10 +929,31 @@ ul.menu-popup .empty {
   background-color: #bdcdd4;
 }*/
 
-#nav-notifications-menu img {
-  float: left;
-  margin-right: 5px;
+
+/* überleugung das zu löschen: begin*/
+#nav-notifications-menu > li {
+  display: block;
+  color: #737373;
+  cursor: pointer;
 }
+
+#nav-notifications-menu > li:hover {
+  background-color: #e5e5e5;
+  color: #000;
+}
+
+#nav-notifications-menu img {
+  width: 35px;
+  height: 35px;
+  border-radius: 5px;
+}
+
+#nav-notifications-menu .notif-desc-wrapper a {
+  display: inline;
+/*  color: #2d2d2d;*/
+  padding: 0px;
+}
+
 #nav-notifications-menu .contactname {
   font-weight: bold;
 }
@@ -947,6 +969,26 @@ ul.menu-popup .empty {
         padding: 7px 7px 0px 0px;
 }
 
+/* überlegung das zu löschen Ende*/
+.notif-entry-wrapper {
+  padding: 5px;
+  min-height: 35px;
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.notif-photo-wrapper {
+  float: left;
+  margin-right: 5px;
+}
+
+.notif-photo-wrapper a {
+  padding: 0 !important;
+}
+
+.notif-desc-wrapper {
+  overflow: hidden;
+}
+
 right_aside {
   display: none;
   vertical-align: top;
diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 77bad9370..320343bef 100644
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -109,7 +109,15 @@
 
 </nav>
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}" onclick="location.href='{0}';">
+		<div class="notif-entry-wrapper">
+			<div class="notif-photo-wrapper"><a href="{6}"><img data-src="{1}"></a></div>
+			<div class="notif-desc-wrapper">
+				{8}{7}
+				<div><time class="notif-when" title="{5}">{3}</time></div>
+			</div>
+		</div>
+	</li>
 </ul>
 <!--
 <div class="icon-flag" style="position: fixed; bottom: 10px; left: 20px; z-index:9;">{{$langselector}}</div>