mirror/php-phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-02-24 12:03:21 +01:00
Code Issues Releases Wiki Activity

[ticket/11956] Arrow for responsive popup

Browse Source 
PHPBB3-11956
This commit is contained in:
Vjacheslav Trushkin 2013-10-22 22:03:43 +03:00
parent d11e62930a
commit 1638ff3cba
4 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
phpBB/styles/prosilver/template/forum_fn.js
View File

@ -729,7 +729,7 @@ function parse_document(container)
filterSkip = '.breadcrumbs, .skip-responsive',
filterLast = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
links = $this.children().not(filterSkip),
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><ul class="responsive-popup" style="display:none;" /></li>',
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="popup-pointer" style="display: none;"><div class="popup-pointer-inner" /></div><ul class="responsive-popup" style="display:none;" /></li>',
filterLastList = links.filter(filterLast);
if (links.is('.rightside'))
@ -744,6 +744,7 @@ function parse_document(container)
var toggle = $this.children('.responsive-menu'),
toggleLink = toggle.find('a.responsive-menu-link'),
menu = toggle.find('ul.responsive-popup'),
toggleItems = toggle.find('ul.responsive-popup, div.popup-pointer'),
lastWidth = false,
compact = false,
responsive = false,
@ -782,7 +783,7 @@ function parse_document(container)
// Nothing to resize if block's height is not bigger than tallest element's height
if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
menu.hide();
toggleItems.hide();
return;
}
@ -798,7 +799,7 @@ function parse_document(container)
if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
menu.hide();
toggleItems.hide();
return;
}
@ -809,7 +810,7 @@ function parse_document(container)
if (!copied) {
if (menu.parents().is('.rightside')) {
menu.addClass('responsive-rightside');
toggle.addClass('responsive-rightside');
}
menu.append(links.clone(true));
menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
@ -846,10 +847,10 @@ function parse_document(container)
if (!responsive) return;
if (!toggle.hasClass('visible')) {
// Hide other popups
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup, .popup-pointer').hide();
}
toggle.toggleClass('visible');
menu.toggle();
toggleItems.toggle();
});
check();
@ -952,7 +953,7 @@ function parse_document(container)
$('#phpbb').click(function(e) {
var parents = $(e.target).parents();
if (!parents.is('.responsive-menu.visible')) {
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup, .popup-pointer').hide();
}
if (!parents.is('.responsive-tab')) {
$('.responsive-tabs').hide();

2
phpBB/styles/prosilver/template/overall_header.html
View File

@ -103,7 +103,7 @@
<li class="icon-notification skip-responsive">
<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="notification_list">
<div class="pointer"><div class="pointer_inner"></div></div>
<div class="popup-pointer"><div class="popup-pointer-inner"></div></div>
<div class="header">
{L_NOTIFICATIONS}
<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span>

15
phpBB/styles/prosilver/theme/colours.css
View File

@ -1126,11 +1126,11 @@ input.disabled {
background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
}
.notification_list .pointer {
.popup-pointer {
border-bottom-color: #B9B9B9;
}
.notification_list .pointer_inner {
.popup-pointer-inner {
border-bottom-color: #F1F8FF;
}
@ -1138,7 +1138,7 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
border-color: #105289;
}
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before {
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu.visible a.responsive-menu-link:before {
border-color: #D31141;
}
@ -1147,8 +1147,13 @@ ul.responsive-popup {
border-color: #b9b9b9;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}
.navbar ul.responsive-popup {
background-color: #CADCEB;
.responsive-menu .popup-pointer {
border-bottom-color: #b9b9b9;
}
.responsive-menu .popup-pointer-inner {
border-bottom-color: #fff;
}
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {

32
phpBB/styles/prosilver/theme/common.css
View File

@ -361,12 +361,13 @@ ul.rightside {
text-align: right;
}
ul.linklist.responsive {
ul.linklist li.responsive-menu {
position: relative;
}
ul.linklist li.responsive-menu a.responsive-menu-link {
display: inline-block;
margin: 0 5px;
font-size: 16px;
position: relative;
width: 16px;
@ -420,18 +421,37 @@ ul.linklist.bulletin li.no-bulletin:before {
ul.responsive-popup {
position: absolute;
left: 0;
top: 24px;
top: 22px;
z-index: 2;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
}
ul.responsive-popup.responsive-rightside {
.responsive-rightside ul.responsive-popup {
left: auto;
right: 0;
}
.responsive-menu .popup-pointer {
top: 22px;
z-index: 3;
left: 2px;
}
.responsive-menu ul.responsive-popup {
top: 32px;
left: -5px;
}
.responsive-menu.responsive-rightside .popup-pointer {
left: auto;
right: 2px;
}
.responsive-menu.responsive-rightside ul.responsive-popup {
left: auto;
right: -5px;
}
ul.responsive-popup li {
float: none;
margin: 0;
@ -901,7 +921,7 @@ form > p.post-notice strong {
margin: 0;
}
.notification_list .pointer, .notification_list .pointer_inner {
.popup-pointer, .popup-pointer-inner {
position: absolute;
width: 0;
height: 0;
@ -913,13 +933,13 @@ form > p.post-notice strong {
display: block;
}
.notification_list .pointer {
.popup-pointer {
right: auto;
left: 10px;
top: -11px;
}
.notification_list .pointer_inner {
.popup-pointer-inner {
top: auto;
bottom: -11px;
left: -10px;