[ticket/12271] Decouple dropdown header and footer from #notifications_list

PHPBB3-12271
This commit is contained in:
Joas Schilling 2014-03-14 17:10:20 +01:00
parent bfe872d1b7
commit d9037965c8
7 changed files with 31 additions and 25 deletions

View file

@ -101,7 +101,7 @@
<!-- IF S_NOTIFICATIONS_DISPLAY -->
<li class="small-icon icon-notification" data-skip-responsive="true">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
<div id="notification_list" class="dropdown notification_list">
<div id="notification_list" class="dropdown dropdown-extended notification_list">
<div class="pointer"><div class="pointer-inner"></div></div>
<div class="dropdown-contents">
<div class="header">

View file

@ -273,7 +273,7 @@ a:active { color: #368AD2; }
}
/* Notification mark read link */
#notification_list a.mark_read {
.dropdown-extended a.mark_read {
background-color: #FFFFFF;
}
@ -1151,21 +1151,27 @@ input.disabled {
background-image: url("./images/loading.gif");
}
#notification_list ul li {
.dropdown-extended ul li {
border-bottom-color: #B9B9B9;
}
#notification_list ul li:hover {
.dropdown-extended ul li:hover {
background-color: #CFE1F6;
color: #000000;
}
#notification_list .header, .notification_list .footer {
.dropdown-extended .header, .dropdown-extended .footer {
border-color: #B9B9B9;
color: #000000;
}
#notification_list .header {
.dropdown-extended .footer {
padding: 5px 0;
border-top-style: solid;
border-top-width: 1px;
}
.dropdown-extended .header {
background: #F1F8FF;
background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB));
@ -1183,7 +1189,7 @@ input.disabled {
border-color: #FFF transparent;
}
#notification_list .pointer-inner, #minitabs .pointer-inner {
.dropdown-extended .pointer-inner, #minitabs .pointer-inner {
border-color: #F1F8FF transparent;
}

View file

@ -578,7 +578,7 @@ ul.linklist.bulletin li.no-bulletin:before {
padding-left: 10px;
}
.wrap .dropdown li, .dropdown.wrap li, #notification_list li {
.wrap .dropdown li, .dropdown.wrap li, .dropdown-extended li {
white-space: normal;
}
@ -1014,7 +1014,7 @@ form > p.post-notice strong {
position: relative;
}
#notification_list {
.dropdown-extended {
display: none;
position: absolute;
left: 0;
@ -1023,14 +1023,14 @@ form > p.post-notice strong {
top: 22px;
}
#notification_list ul {
.dropdown-extended ul {
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
clear: both;
}
#notification_list ul li {
.dropdown-extended ul li {
padding: 10px;
margin: 0;
float: none;
@ -1041,16 +1041,16 @@ form > p.post-notice strong {
position: relative;
}
#notification_list ul li:before, #notification_list ul li:after {
.dropdown-extended ul li:before, .dropdown-extended ul li:after {
display: none;
}
#notification_list .dropdown-contents {
.dropdown-extended .dropdown-contents {
max-height: none;
padding: 0;
}
#notification_list .header {
.dropdown-extended .header {
padding: 0 10px;
font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px;
@ -1062,18 +1062,18 @@ form > p.post-notice strong {
border-radius: 5px 5px 0 0;
}
#notification_list .header .header_settings {
.dropdown-extended .header .header_settings {
float: right;
font-weight: normal;
text-transform: none;
}
#notification_list .footer {
.dropdown-extended .footer {
text-align: center;
font-size: 1.2em;
}
#notification_list ul li a, .notification_list dt > a, #notification_list .footer > a {
.dropdown-extended ul li a, .notification_list dt > a, .dropdown-extended .footer > a {
display: block;
text-decoration: none;
}

View file

@ -767,7 +767,7 @@ div.dl_links {
/* Show scrollbars for items with overflow on iOS devices
----------------------------------------*/
.postbody .content::-webkit-scrollbar, #topicreview::-webkit-scrollbar, #post_details::-webkit-scrollbar, .codebox code::-webkit-scrollbar, .attachbox dd::-webkit-scrollbar, .attach-image::-webkit-scrollbar, #notification_list ul::-webkit-scrollbar {
.postbody .content::-webkit-scrollbar, #topicreview::-webkit-scrollbar, #post_details::-webkit-scrollbar, .codebox code::-webkit-scrollbar, .attachbox dd::-webkit-scrollbar, .attach-image::-webkit-scrollbar, .dropdown-extended ul::-webkit-scrollbar {
width: 8px;
height: 8px;
-webkit-appearance: none;
@ -775,7 +775,7 @@ div.dl_links {
border-radius: 3px;
}
.postbody .content::-webkit-scrollbar-thumb, #topicreview::-webkit-scrollbar-thumb, #post_details::-webkit-scrollbar-thumb, .codebox code::-webkit-scrollbar-thumb, .attachbox dd::-webkit-scrollbar-thumb, .attach-image::-webkit-scrollbar-thumb, #notification_list ul::-webkit-scrollbar-thumb {
.postbody .content::-webkit-scrollbar-thumb, #topicreview::-webkit-scrollbar-thumb, #post_details::-webkit-scrollbar-thumb, .codebox code::-webkit-scrollbar-thumb, .attachbox dd::-webkit-scrollbar-thumb, .attach-image::-webkit-scrollbar-thumb, .dropdown-extended ul::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .3);
border-radius: 3px;
}

View file

@ -50,7 +50,7 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
}
/* Notification mark read link */
#notification_list a.mark_read {
.dropdown-extended a.mark_read {
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px 0 0 3px;
@ -64,11 +64,11 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
height: 40px;
}
#notification_list li:hover a.mark_read {
.dropdown-extended li:hover a.mark_read {
display: block;
}
#notification_list a.mark_read:hover {
.dropdown-extended a.mark_read:hover {
width: 40px;
}

View file

@ -190,7 +190,7 @@ ul.topiclist li.row dt a.subforum {
----------------------------------------*/
@media only screen and (max-width: 350px), only screen and (max-device-width: 350px)
{
#notification_list {
.dropdown-extended {
width: 250px;
}
}

View file

@ -53,11 +53,11 @@ dd.option {
}
/* Notifications list for IE7 */
#notification_list {
.dropdown-extended {
*left: 0;
}
#notification_list .header_settings {
.dropdown-extended .header_settings {
*position: absolute;
*right: 10px;
*top: 0;