[ticket/11103] Restyling notifications list for prosilver

PHPBB3-11103
author: Nathan Guse <nathaniel.guse@gmail.com> 2012-10-16 16:47:45 -0500
committer: Nathan Guse <nathaniel.guse@gmail.com> 2012-10-16 16:47:45 -0500
commit: ee006888296c38e650a62f0c19e4fd3e241327ee (patch)
tree: ef677923f3f67d87a132d6da82690e800da74957 /phpBB
parent: 61a1467c90e865f43c359bb8678d27b5e571f21f (diff)
download: forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar
forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar.gz
forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar.bz2
forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar.xz
forums-ee006888296c38e650a62f0c19e4fd3e241327ee.zip
4 files changed, 115 insertions, 83 deletions
diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html
index 8fcd595972..3b50ca732d 100644
--- a/phpBB/styles/prosilver/template/overall_header.html
+++ b/phpBB/styles/prosilver/template/overall_header.html
@@ -134,26 +134,30 @@
 				<li>
 					[ <a href="#" id="notification_list_button" title="{NOTIFICATIONS_COUNT}">{NOTIFICATIONS_COUNT}</a> ] &bull;
 					<div id="notification_list" class="notification_list">
-						<ul class="topiclist forums">
-						<!-- BEGIN notifications -->
-							<li class="row<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
+						<div class="header">
+							{L_NOTIFICATIONS}
+						</div>
+						<ul>
+							<!-- BEGIN notifications -->
+							<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
 								<!-- IF notifications.URL --><a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->"><!-- ENDIF -->
-								<span>
-										{notifications.AVATAR}
-										<span class="notification_title">
-											{notifications.FORMATTED_TITLE}
-											<div class="notification_time">{notifications.TIME}</div>
-										</span>
-								</span>
+									{notifications.AVATAR}
+									<div>
+										<p>{notifications.FORMATTED_TITLE}</p>
+										<p>{notifications.TIME}</p>
+
+										<!-- IF not notifications.URL and notifications.U_MARK_READ -->
+											<p><a href="{notifications.U_MARK_READ}">{L_MARK_READ}</a></p>
+										<!-- ENDIF -->
+									</div>
 								<!-- IF notifications.URL --></a><!-- ENDIF -->
-								<!-- IF not notifications.URL and notifications.UNREAD -->
-									<span class="mark_notification_read">
-										<a href="{notifications.U_MARK_READ}">{L_MARK_READ}</a>
-									</span>
-								<!-- ENDIF -->
 							</li>
 				   			<!-- END notifications -->
 						</ul>
+
+						<div class="footer">
+							<a style="display: block;" href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_SEE_ALL}</span></a>
+						</div>
 					</div>
 				</li>
 				<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/template/ucp_notifications.html b/phpBB/styles/prosilver/template/ucp_notifications.html
index 08b5396827..728fe972b1 100644
--- a/phpBB/styles/prosilver/template/ucp_notifications.html
+++ b/phpBB/styles/prosilver/template/ucp_notifications.html
@@ -62,41 +62,35 @@
 				</div>
 			<!-- ENDIF -->
 
-			<ul class="topiclist">
-				<li class="header">
-					<dl>
-						<dt>{L_NOTIFICATIONS}</dt>
-						<dd class="mark">{L_MARK_READ}</dd>
-					</dl>
-				</li>
-			</ul>
-
 			<div class="notification_list">
-				<ul class="topiclist cplist">
-				<!-- BEGIN notification_list -->
-					<li class="row<!-- IF notification_list.UNREAD --> bg3<!-- ELSE --><!-- IF notification_list.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- ENDIF -->">
+				<ul class="topiclist">
+					<li class="header">
 						<dl>
-							<dt>
-								<!-- IF notification_list.URL --><a href="<!-- IF notification_list.UNREAD -->{notification_list.U_MARK_READ}<!-- ELSE -->{notification_list.URL}<!-- ENDIF -->"><!-- ENDIF -->
-								<span>
-										{notification_list.AVATAR}
-										<span class="notification_title">
-											{notification_list.FORMATTED_TITLE}
-											<div class="notification_time">{notification_list.TIME}</div>
-										</span>
-								</span>
-								<!-- IF notification_list.URL --></a><!-- ENDIF -->
-								<!-- IF not notifications.URL and notifications.UNREAD -->
-									<span class="mark_notification_read">
-										<a href="{notifications.U_MARK_READ}">{L_MARK_READ}</a>
-									</span>
-								<!-- ENDIF -->
-							</dt>
-
-							<dd class="mark">&nbsp;<!-- IF notification_list.UNREAD --><input type="checkbox" name="mark[]" value="{notification_list.NOTIFICATION_ID}" /> <dfn>{L_MARK_READ}</dfn><!-- ENDIF -->&nbsp;</dd>
+							<dt>{L_NOTIFICATIONS}</dt>
+							<dd class="mark">{L_MARK_READ}</dd>
 						</dl>
 					</li>
-				<!-- END notification_list -->
+					<!-- BEGIN notification_list -->
+						<li class="row<!-- IF notification_list.UNREAD --> bg3<!-- ELSE --><!-- IF notification_list.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- ENDIF -->">
+							<dl>
+								<dt>
+									<!-- IF notification_list.URL --><a href="<!-- IF notification_list.UNREAD -->{notification_list.U_MARK_READ}<!-- ELSE -->{notification_list.URL}<!-- ENDIF -->"><!-- ENDIF -->
+										{notification_list.AVATAR}
+										<div>
+											<p>{notification_list.FORMATTED_TITLE}</p>
+											<p>{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>
+											<!-- ENDIF -->
+										</div>
+									<!-- IF notification_list.URL --></a><!-- ENDIF -->
+								</dt>
+
+								<dd class="mark">&nbsp;<!-- IF notification_list.UNREAD --><input type="checkbox" name="mark[]" value="{notification_list.NOTIFICATION_ID}" /> <dfn>{L_MARK_READ}</dfn><!-- ENDIF -->&nbsp;</dd>
+							</dl>
+						</li>
+					<!-- END notification_list -->
 				</ul>
 			</div>
 
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 29968cbb14..49e404a903 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1,4 +1,4 @@
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for common.css
 -------------------------------------------------------------- */
@@ -65,7 +65,7 @@ hr {
 
 .panel {
 	background-color: #ECF1F3;
-	color: #28313F;	
+	color: #28313F;
 }
 
 .post:target .content {
@@ -219,7 +219,7 @@ p.rules {
 	background-image: none;
 }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for links.css
 -------------------------------------------------------------- */
@@ -312,7 +312,7 @@ a.topictitle:active {
 	color: #105289;
 }
 
-/* Profile searchresults */	
+/* Profile searchresults */
 .search .postprofile a {
 	color: #105289;
 }
@@ -349,7 +349,7 @@ a.right:hover {
 }
 
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for content.css
 -------------------------------------------------------------- */
@@ -644,7 +644,7 @@ fieldset.polls dd div {
 	background-image: url("./en/icon_user_online.gif");
 }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for buttons.css
 -------------------------------------------------------------- */
@@ -752,7 +752,7 @@ a.sendemail {
 .pm_read														{ background-image: url("./images/topic_read.gif"); }
 .pm_unread														{ background-image: url("./images/topic_unread.gif"); }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for cp.css
 -------------------------------------------------------------- */
@@ -921,7 +921,7 @@ dl.mini dt {
 	background-color: #EEE;
 }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for forms.css
 -------------------------------------------------------------- */
@@ -976,7 +976,7 @@ fieldset.quick-login input.inputbox {
 /* Input field styles
 ---------------------------------------- */
 .inputbox {
-	background-color: #FFFFFF; 
+	background-color: #FFFFFF;
 	border-color: #B4BAC0;
 	color: #333333;
 }
@@ -1044,3 +1044,16 @@ input.disabled {
 	background-color: #000000;
 }
 
+#notification_list {
+	background-color: #FFFFFF;
+	border-color: #00608F;
+}
+
+#notification_list ul li:hover {
+	background-color: #CFE1F6;
+	color: #000000;
+}
+
+#notification_list > .header, .notification_list > .footer {
+	border-color: #00608F;
+}
+\ No newline at end of file
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 9b2475384e..cbbc829a27 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -9,8 +9,8 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -21,7 +21,7 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
@@ -164,7 +164,7 @@ ul ul, ol ul {
 
 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
 	list-style-type: square;
-} 
+}
 
 
 /* Main blocks
@@ -670,49 +670,70 @@ p.rules a {
 	display: none;
 	position: absolute;
 	width: 330px;
-	max-height: 350px;
 	z-index: 1;
+	border: 1px solid;
+	border-radius: 4px;
+	box-shadow: 4px 4px 5px;
+}
+
+#notification_list ul {
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
-	background-color: #FFFFFF;
 }
 
 #notification_list ul li {
+	width: ;
 	padding: 10px;
+	margin: 0;
+	float: left;
+	border-bottom: 1px solid;
+	list-style-type: none;
+	font-size: 0.95em;
+	clear: both;
+}
+
+#notification_list ul li {
 	width: 310px;
-	line-height: 1.5em;
 }
 
-.notification_list ul.topiclist dt {
-	width: 70%;
+#notification_list ul li:last-child {
+	border-bottom: 0px;
 }
 
-.notification_list ul li span img {
-	float: left;
-	max-width: 50px;
-	max-height: 50px;
+#notification_list > .header {
+	padding: 0 5px;
+	font-weight: bold;
+	border-bottom: 1px solid;
 }
 
-.notification_list ul li span .notification_title {
-	float: left;
-	width: 240px;
-	margin: 0 0 0 5px;
-	word-wrap: break-word;
-	position: relative;
-	top: -0.2em;
+#notification_list > .footer {
+	text-align: center;
+	font-size: 1.2em;
+	border-top: 1px solid;
 }
 
-.notification_list ul li dl dt span .notification_title {
-	width: auto;
-	padding: 10px 0 0 0;
+#notification_list ul li a, .notification_list dt > a {
+	display: block;
 }
 
-.notification_time {
-	margin-top: 0.5em;
+.notification_list ul li img {
+	float: left;
+	max-width: 50px;
+	max-height: 50px;
+	margin-right: 5px;
 }
 
-.mark_notification_read {
-	clear: both;
+#notification_list ul li div {
+	width: 240px;
 	float: left;
-	margin-top: 0.5em;
 }
+
+.notification_list ul li p {
+	margin: 0;
+	word-wrap: break-word;
+}
+
+.notification_list ul.topiclist dt {
+	width: 88%;
+}
+\ No newline at end of file
author	Nathan Guse <nathaniel.guse@gmail.com>	2012-10-16 16:47:45 -0500
committer	Nathan Guse <nathaniel.guse@gmail.com>	2012-10-16 16:47:45 -0500
commit	ee006888296c38e650a62f0c19e4fd3e241327ee (patch)
tree	ef677923f3f67d87a132d6da82690e800da74957 /phpBB
parent	61a1467c90e865f43c359bb8678d27b5e571f21f (diff)
download	forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar.gz forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar.bz2 forums-ee006888296c38e650a62f0c19e4fd3e241327ee.tar.xz forums-ee006888296c38e650a62f0c19e4fd3e241327ee.zip