From d5f4d288e92499b64e96aeafe673ed05708cc8da Mon Sep 17 00:00:00 2001
From: PayBas <contact@paybas.com>
Date: Wed, 28 May 2014 21:33:17 +0200
Subject: [ticket/12608] Improve notifications drop-down menu styling in header

PHPBB3-12608
---
 .../prosilver/template/notification_dropdown.html  |  9 ++++---
 .../prosilver/template/ucp_notifications.html      |  6 +++--
 phpBB/styles/prosilver/theme/common.css            | 30 ++++++++++++++++++++--
 phpBB/styles/prosilver/theme/links.css             |  3 +++
 4 files changed, 41 insertions(+), 7 deletions(-)

(limited to 'phpBB/styles/prosilver')

diff --git a/phpBB/styles/prosilver/template/notification_dropdown.html b/phpBB/styles/prosilver/template/notification_dropdown.html
index db4d5bade7..fbe0e1efd4 100644
--- a/phpBB/styles/prosilver/template/notification_dropdown.html
+++ b/phpBB/styles/prosilver/template/notification_dropdown.html
@@ -20,12 +20,15 @@
 			<!-- BEGIN notifications -->
 				<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
 					<!-- IF notifications.URL -->
-						<a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
+						<a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" class="notification-block" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
 					<!-- ENDIF -->
 						<!-- IF notifications.AVATAR -->{notifications.AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
 						<div class="notification_text">
-							<p>{notifications.FORMATTED_TITLE}</p>
-							<p>&raquo; {notifications.TIME}</p>
+							<p class="title">{notifications.FORMATTED_TITLE}</p>
+							<!-- IF notifications.REFERENCE --><p class="notification-reference">{notifications.REFERENCE}</p><!-- ENDIF -->
+							<!-- IF notifications.FORUM --><p class="notification-forum">{notifications.FORUM}</p><!-- ENDIF -->
+							<!-- IF notifications.REASON --><p class="notification-reason">{notifications.REASON}</p><!-- ENDIF -->
+							<p class="notification-time">{notifications.TIME}</p>
 						</div>
 					<!-- IF notifications.URL --></a><!-- ENDIF -->
 					<!-- IF notifications.UNREAD -->
diff --git a/phpBB/styles/prosilver/template/ucp_notifications.html b/phpBB/styles/prosilver/template/ucp_notifications.html
index 8910769cce..61df0c9cf5 100644
--- a/phpBB/styles/prosilver/template/ucp_notifications.html
+++ b/phpBB/styles/prosilver/template/ucp_notifications.html
@@ -72,8 +72,10 @@
 										<!-- IF notification_list.AVATAR -->{notification_list.AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
 										<div class="notifications">
 											<!-- IF notification_list.URL --><a href="<!-- IF notification_list.UNREAD -->{notification_list.U_MARK_READ}<!-- ELSE -->{notification_list.URL}<!-- ENDIF -->"><!-- ENDIF -->
-											<p class="notifications_title">{notification_list.FORMATTED_TITLE}</p>
-											<!-- IF notification_list.URL --></a><!-- ENDIF -->
+											<p class="notifications_title">{notification_list.FORMATTED_TITLE} <!-- IF notification_list.REFERENCE -->{notification_list.REFERENCE}<!-- ENDIF --></p>
+											<!-- IF notification_list.URL --></a><!-- ENDIF -->				
+											<!-- IF notification_list.FORUM --><p class="notifications_forum">{notification_list.FORUM}</p><!-- ENDIF -->
+											<!-- IF notification_list.REASON --><p class="notifications_reason">{notification_list.REASON}</p><!-- ENDIF -->
 											<p class="notifications_time">{notification_list.TIME}</p>
 											<!-- IF not notification_list.URL and notification_list.U_MARK_READ -->
 												<p><a href="{notification_list.U_MARK_READ}">{L_MARK_READ}</a></p>
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index aa28cd6962..50e89928d0 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -1101,7 +1101,7 @@ form > p.post-notice strong {
 	display: none;
 	position: absolute;
 	left: 0;
-	width: 330px;
+	width: 340px;
 	z-index: 1;
 	top: 22px;
 }
@@ -1173,19 +1173,38 @@ form > p.post-notice strong {
 	text-decoration: none;
 }
 
+.notification_list a.notification-block {
+	padding: 8px;
+}
+
 .notification_list ul li img {
 	float: left;
 	max-height: 50px;
+	max-width: 50px;
 	width: auto !important;
 	height: auto !important;
 	margin-right: 5px;
 }
 
 .notification_list ul li p {
-	margin: 0;
+	margin-bottom: 4px;
 	font-size: 1em;
 }
 
+.notification_list p.notification-reference,
+.notification_list p.notification-location,
+.notification_list a.notification-block p.notification-reason {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.notification_list ul li p.notification-time {
+	font-size: 0.9em;
+	margin: 0;
+	text-align: right;
+}
+
 .notification_list div.notifications {
 	padding: 5px;
 }
@@ -1193,6 +1212,9 @@ form > p.post-notice strong {
 .notification_list p.notifications_title {
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 	font-size: 13px !important;
+}
+
+.notification_list p.notifications_title strong {
 	font-weight: bold;
 }
 
@@ -1200,6 +1222,10 @@ form > p.post-notice strong {
 	font-size: 11px !important;
 }
 
+.notification_text {
+	margin-left: 58px;
+}
+
 .notification_text:after {
 	content: '';
 	clear: both;
diff --git a/phpBB/styles/prosilver/theme/links.css b/phpBB/styles/prosilver/theme/links.css
index 86cdf9c10e..89639dde02 100644
--- a/phpBB/styles/prosilver/theme/links.css
+++ b/phpBB/styles/prosilver/theme/links.css
@@ -62,6 +62,9 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
 	top: 50%;
 	width: 30px;
 	height: 40px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .dropdown-extended li:hover a.mark_read {
-- 
cgit v1.2.1