From 98e6006c4fecba5b7c7eb8c4f6224d79f0b6f19a Mon Sep 17 00:00:00 2001 From: hanakin Date: Thu, 7 May 2020 20:17:06 -1000 Subject: [PATCH] [ticket/16237] fix responsive footer/header navs PHPBB3-16237 --- phpBB/styles/prosilver/template/forum_fn.js | 167 -------- .../prosilver/template/navbar_footer.html | 4 +- .../prosilver/template/navbar_header.html | 391 +++++++++--------- phpBB/styles/prosilver/theme/responsive.css | 18 +- 4 files changed, 218 insertions(+), 362 deletions(-) diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index 0b3585e3e1..5a9eabc239 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -329,17 +329,6 @@ function parseDocument($container) { }, 100); }); - /** - * Adjust HTML code for IE8 and older versions - */ - // if (oldBrowser) { - // // Fix .linklist.bulletin lists - // $container - // .find('ul.linklist.bulletin > li') - // .filter(':first-child, .rightside:last-child') - // .addClass('no-bulletin'); - // } - /** * Resize navigation (breadcrumbs) block to keep all links on same line */ @@ -445,162 +434,6 @@ function parseDocument($container) { $(window).resize(check); }); - /** - * Responsive link lists - */ - var selector = '.linklist:not(.navlinks, [data-skip-responsive])'; - $container.find(selector).each(function() { - var $this = $(this), - filterSkip = '.breadcrumbs, [data-skip-responsive]', - filterLast = '[data-last-responsive]', - $linksAll = $this.children(), - $linksNotSkip = $linksAll.not(filterSkip), // All items that can potentially be hidden - $linksFirst = $linksNotSkip.not(filterLast), // The items that will be hidden first - $linksLast = $linksNotSkip.filter(filterLast), // The items that will be hidden last - persistent = $this.attr('id') === 'nav-main', // Does this list already have a menu (such as quick-links)? - slack = 3; // Vertical slack space (in pixels). Determines how sensitive the script is in determining whether a line-break has occurred. - - // Set some object references and initial states - var $menu = $this.children('.responsive-menu'), - $menuContents = $menu.find('.dropdown-contents'), - persistentContent = $menuContents.find('li:not(.separator)').length, - lastWidth = false, - compact = false, - responsive1 = false, - responsive2 = false, - copied1 = false, - copied2 = false, - maxHeight = 0; - - // Find the tallest element in the list (we assume that all elements are roughly the same height) - $linksAll.each(function() { - if (!$(this).height()) { - return; - } - maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); - }); - if (maxHeight < 1) { - return; // Shouldn't be possible, but just in case, abort - } else { - maxHeight = maxHeight + slack; - } - - function check() { - var width = $body.width(); - // We can't make it any smaller than this, so just skip - if (responsive2 && compact && (width <= lastWidth)) { - return; - } - lastWidth = width; - - // Reset responsive and compact layout - if (responsive1 || responsive2) { - $linksNotSkip.removeClass('hidden'); - $menuContents.children('.clone').addClass('hidden'); - responsive1 = responsive2 = false; - } - if (compact) { - $this.removeClass('compact'); - compact = false; - } - - // Unhide the quick-links menu if it has "persistent" content - if (persistent && persistentContent) { - $menu.removeClass('hidden'); - } else { - $menu.addClass('hidden'); - } - - // Nothing to resize if block's height is not bigger than tallest element's height - if ($this.height() <= maxHeight) { - return; - } - - // STEP 1: Compact - if (!compact) { - $this.addClass('compact'); - compact = true; - } - if ($this.height() <= maxHeight) { - return; - } - - // STEP 2: First responsive set - compact - if (compact) { - $this.removeClass('compact'); - compact = false; - } - // Copy the list items to the dropdown - if (!copied1) { - var $clones1 = $linksFirst.clone(); - $menuContents.prepend($clones1.addClass('clone clone-first').removeClass('leftside rightside')); - - copied1 = true; - } - if (!responsive1) { - $linksFirst.addClass('hidden'); - responsive1 = true; - $menuContents.children('.clone-first').removeClass('hidden'); - $menu.removeClass('hidden'); - } - if ($this.height() <= maxHeight) { - return; - } - - // STEP 3: First responsive set + compact - if (!compact) { - $this.addClass('compact'); - compact = true; - } - if ($this.height() <= maxHeight) { - return; - } - - // STEP 4: Last responsive set - compact - if (!$linksLast.length) { - return; // No other links to hide, can't do more - } - if (compact) { - $this.removeClass('compact'); - compact = false; - } - // Copy the list items to the dropdown - if (!copied2) { - var $clones2 = $linksLast.clone(); - $menuContents.prepend($clones2.addClass('clone clone-last').removeClass('leftside rightside')); - copied2 = true; - } - if (!responsive2) { - $linksLast.addClass('hidden'); - responsive2 = true; - $menuContents.children('.clone-last').removeClass('hidden'); - } - if ($this.height() <= maxHeight) { - return; - } - - // STEP 5: Last responsive set + compact - if (!compact) { - $this.addClass('compact'); - compact = true; - } - } - - if (!persistent) { - phpbb.registerDropdown($menu.find('a.js-responsive-menu-link'), $menu.find('.dropdown'), false); - } - - // If there are any images in the links list, run the check again after they have loaded - $linksAll.find('img').each(function() { - $(this).on('load', function() { - check(); - }); - }); - - check(); - $(window).resize(check); - }); - /** * Do not run functions below for old browsers */ diff --git a/phpBB/styles/prosilver/template/navbar_footer.html b/phpBB/styles/prosilver/template/navbar_footer.html index be795e7bf2..0c9f451c4d 100644 --- a/phpBB/styles/prosilver/template/navbar_footer.html +++ b/phpBB/styles/prosilver/template/navbar_footer.html @@ -95,8 +95,8 @@ {# right side responsive menu #} -
  • - +
  • + {{ Icon('iconify', 'fa:bars', '', true) }}
    diff --git a/phpBB/styles/prosilver/template/navbar_header.html b/phpBB/styles/prosilver/template/navbar_header.html index 674d3c5db3..2e2765db6a 100644 --- a/phpBB/styles/prosilver/template/navbar_header.html +++ b/phpBB/styles/prosilver/template/navbar_header.html @@ -1,200 +1,209 @@ diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index 65e096c10c..ce17011236 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -114,6 +114,10 @@ display: none; } + .nav-main .rightside a span { + display: none; + } + .rtl dl.details dt, .rtl dl.details dd { text-align: right; @@ -581,7 +585,8 @@ margin-left: 0 !important; } - .nav-footer.linklist .in-menu { + .nav-footer.linklist .in-menu, + .nav-main.linklist .in-menu { display: none !important; } @@ -595,7 +600,8 @@ display: none; } - .nav-footer.linklist .post-buttons-responsive-menu .in-menu, + .nav-footer.linklist .responsive-menu .in-menu, + .nav-main.linklist .responsive-menu .in-menu, .post-buttons-responsive-menu, .post-button-responsive, .post-buttons-responsive-menu .post-buttons-label { @@ -774,6 +780,14 @@ .postprofile { width: 200px; } + + .nav-main.linklist .in-menu { + display: block !important; + } + + .nav-main.linklist .responsive-menu .in-menu { + display: none !important; + } } @media (min-width: 701px) and (max-width: 950px) {