makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 14:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/11103] Restyling notifications list for prosilver

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

34
phpBB/styles/prosilver/template/overall_header.html
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">
<!-- 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 -->

56
phpBB/styles/prosilver/template/ucp_notifications.html
View file

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

31
phpBB/styles/prosilver/theme/colours.css
View file

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

81
phpBB/styles/prosilver/theme/common.css
View file

@ -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 {
#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%;
}