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

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

@ -103,7 +103,7 @@
<li class="icon-notification skip-responsive"> <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> <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 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"> <div class="header">
{L_NOTIFICATIONS} {L_NOTIFICATIONS}
<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span> <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%); background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
} }
.notification_list .pointer { .popup-pointer {
border-bottom-color: #B9B9B9; border-bottom-color: #B9B9B9;
} }
.notification_list .pointer_inner { .popup-pointer-inner {
border-bottom-color: #F1F8FF; border-bottom-color: #F1F8FF;
} }
@ -1138,7 +1138,7 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
border-color: #105289; 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; border-color: #D31141;
} }
@ -1147,8 +1147,13 @@ ul.responsive-popup {
border-color: #b9b9b9; border-color: #b9b9b9;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); 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 { #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; text-align: right;
} }
ul.linklist.responsive { ul.linklist li.responsive-menu {
position: relative; position: relative;
} }
ul.linklist li.responsive-menu a.responsive-menu-link { ul.linklist li.responsive-menu a.responsive-menu-link {
display: inline-block; display: inline-block;
margin: 0 5px;
font-size: 16px; font-size: 16px;
position: relative; position: relative;
width: 16px; width: 16px;
@ -420,18 +421,37 @@ ul.linklist.bulletin li.no-bulletin:before {
ul.responsive-popup { ul.responsive-popup {
position: absolute; position: absolute;
left: 0; left: 0;
top: 24px; top: 22px;
z-index: 2; z-index: 2;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
} }
ul.responsive-popup.responsive-rightside { .responsive-rightside ul.responsive-popup {
left: auto; left: auto;
right: 0; 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 { ul.responsive-popup li {
float: none; float: none;
margin: 0; margin: 0;
@ -901,7 +921,7 @@ form > p.post-notice strong {
margin: 0; margin: 0;
} }
.notification_list .pointer, .notification_list .pointer_inner { .popup-pointer, .popup-pointer-inner {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
@ -913,13 +933,13 @@ form > p.post-notice strong {
display: block; display: block;
} }
.notification_list .pointer { .popup-pointer {
right: auto; right: auto;
left: 10px; left: 10px;
top: -11px; top: -11px;
} }
.notification_list .pointer_inner { .popup-pointer-inner {
top: auto; top: auto;
bottom: -11px; bottom: -11px;
left: -10px; left: -10px;