diff options
| author | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-18 22:32:46 +0300 |
|---|---|---|
| committer | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-18 22:32:46 +0300 |
| commit | a23d4526fde963c8a079a85997c7d2f018e13ec4 (patch) | |
| tree | 15502b68797f40bd54b9a2e94da780eebc3b0167 /phpBB/styles/prosilver | |
| parent | bd4dab8026606561ca24bb688c313c9c7f49ef41 (diff) | |
| download | forums-a23d4526fde963c8a079a85997c7d2f018e13ec4.tar forums-a23d4526fde963c8a079a85997c7d2f018e13ec4.tar.gz forums-a23d4526fde963c8a079a85997c7d2f018e13ec4.tar.bz2 forums-a23d4526fde963c8a079a85997c7d2f018e13ec4.tar.xz forums-a23d4526fde963c8a079a85997c7d2f018e13ec4.zip | |
[ticket/11552] Compact mode for notifications and pm links
This will hide part of buttons for notifications and pm links
in header before switching to responsive mode
PHPBB3-11552
Diffstat (limited to 'phpBB/styles/prosilver')
| -rw-r--r-- | phpBB/styles/prosilver/template/forum_fn.js | 28 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/overall_header.html | 4 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 9 |
3 files changed, 39 insertions, 2 deletions
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index b10cbff031..f96cc39c17 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -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) { diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html index c481dbe18b..5426b36294 100644 --- a/phpBB/styles/prosilver/template/overall_header.html +++ b/phpBB/styles/prosilver/template/overall_header.html @@ -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"> diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index ee613f0d0c..67e052b70c 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -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; +} + |