[ticket/11103] Restyling notifications list for prosilver

PHPBB3-11103
This commit is contained in:
Nathan Guse 2012-10-16 16:47:45 -05:00
parent 61a1467c90
commit ee00688829
4 changed files with 117 additions and 85 deletions

View file

@ -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">
<div class="header">
{L_NOTIFICATIONS}
</div>
<ul>
<!-- BEGIN notifications -->
<li class="row<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
<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>
<!-- 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>
<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 -->
</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 -->

View file

@ -62,6 +62,7 @@
</div>
<!-- ENDIF -->
<div class="notification_list">
<ul class="topiclist">
<li class="header">
<dl>
@ -69,28 +70,21 @@
<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 -->">
<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>
<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>

View file

@ -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;
}

View file

@ -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 {
#notification_list > .header {
padding: 0 5px;
font-weight: bold;
border-bottom: 1px solid;
}
#notification_list > .footer {
text-align: center;
font-size: 1.2em;
border-top: 1px solid;
}
#notification_list ul li a, .notification_list dt > a {
display: block;
}
.notification_list ul li img {
float: left;
max-width: 50px;
max-height: 50px;
margin-right: 5px;
}
.notification_list ul li span .notification_title {
float: left;
#notification_list ul li div {
width: 240px;
margin: 0 0 0 5px;
word-wrap: break-word;
position: relative;
top: -0.2em;
}
.notification_list ul li dl dt span .notification_title {
width: auto;
padding: 10px 0 0 0;
}
.notification_time {
margin-top: 0.5em;
}
.mark_notification_read {
clear: both;
float: left;
margin-top: 0.5em;
}
.notification_list ul li p {
margin: 0;
word-wrap: break-word;
}
.notification_list ul.topiclist dt {
width: 88%;
}