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

[ticket/11552] Compact mode for notifications and pm links

Browse source 
This will hide part of buttons for notifications and pm links
in header before switching to responsive mode

PHPBB3-11552
This commit is contained in:
Vjacheslav Trushkin 2013-10-18 22:32:46 +03:00
parent bd4dab8026
commit a23d4526fd
3 changed files with 39 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
phpBB/styles/prosilver/template/forum_fn.js
View file

@ -553,6 +553,7 @@ function insert_single_user(formId, user)
toggleLink = toggle.find('a.responsive-menu-link'),
menu = toggle.find('ul.responsive-popup'),
lastWidth = false,
compact = false,
responsive = false,
copied = false;
@ -562,6 +563,7 @@ function insert_single_user(formId, user)
return;
}
// Reset responsive and compact layout
if (responsive) {
responsive = false;
$this.removeClass('responsive');
@ -569,16 +571,42 @@ function insert_single_user(formId, user)
toggle.css('display', 'none');
}
if (compact) {
compact = false;
$this.removeClass('compact');
}
// Find tallest element
var maxHeight = 0;
links.each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
});
// Nothing to resize if block's height is not bigger than tallest element's height
if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
menu.hide();
return;
}
// Enable compact layout, find tallest element, compare to height of whole block
compact = true;
$this.addClass('compact');
var compactMaxHeight = 0;
links.each(function() {
compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
});
if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
menu.hide();
return;
}
// Compact layout did not resize block enough, switch to responsive layout
compact = false;
$this.removeClass('compact');
responsive = true;
if (!copied) {

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

@ -101,7 +101,7 @@
<ul class="linklist leftside bulletin">
<!-- IF S_NOTIFICATIONS_DISPLAY -->
<li class="icon-notification skip-responsive">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button">{L_NOTIFICATIONS} [<strong>{NOTIFICATIONS_COUNT}</strong>]</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 class="pointer"><div class="pointer_inner"></div></div>
<div class="header">
@ -140,7 +140,7 @@
<!-- ENDIF -->
<!-- IF S_DISPLAY_PM -->
<li class="icon-pm">
<a href="{U_PRIVATEMSGS}">{L_PRIVATE_MESSAGES} [<strong>{PRIVATE_MESSAGE_COUNT}</strong>]</a>
<a href="{U_PRIVATEMSGS}"><span>{L_PRIVATE_MESSAGES} [</span><strong>{PRIVATE_MESSAGE_COUNT}</strong><span>]</span></a>
</li>
<!-- ENDIF -->
<li class="icon-ucp">

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

@ -915,3 +915,12 @@ form > p.post-notice strong {
.notification_list p.notifications_time {
font-size: 11px;
}
.compact .icon-notification > a > span, .compact .icon-pm > a > span {
display: none;
}
.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
padding-left: 2px;
}