mirror of
https://github.com/phpbb/phpbb.git
synced 2025-02-24 20:13:22 +01:00
[ticket/12662] Enable responsive linkslist for IE8
Also fixed arrow color PHPBB3-12662
This commit is contained in:
PayBas
parent
a540cdc3b2
commit
cf1b56af8d
@ -383,9 +383,6 @@ function parse_document(container)
|
||||
if (oldBrowser) {
|
||||
// Fix .linklist.bulletin lists
|
||||
container.find('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
|
||||
|
||||
// Do not run functions below for old browsers
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -482,6 +479,158 @@ function parse_document(container)
|
||||
$(window).resize(check);
|
||||
});
|
||||
|
||||
/**
|
||||
* Responsive link lists
|
||||
*/
|
||||
container.find('.linklist:not(.navlinks, [data-skip-responsive]), .postbody .post-buttons:not([data-skip-responsive])').each(function() {
|
||||
var $this = $(this),
|
||||
$body = $('body'),
|
||||
filterSkip = '.breadcrumbs, [data-skip-responsive]',
|
||||
filterLast = '.pagination, .icon-faq, .mark-read, .edit-icon, .quote-icon',
|
||||
persist = $this.attr('id') == 'nav-main',
|
||||
allLinks = $this.children(),
|
||||
links = allLinks.not(filterSkip),
|
||||
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link"> </a><div class="dropdown" style="display:none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
|
||||
filterLastList = links.filter(filterLast);
|
||||
|
||||
if (!persist) {
|
||||
if (links.is('.rightside'))
|
||||
{
|
||||
links.filter('.rightside:first').before(html);
|
||||
$this.children('.responsive-menu').addClass('rightside');
|
||||
}
|
||||
else
|
||||
{
|
||||
$this.append(html);
|
||||
}
|
||||
}
|
||||
|
||||
var item = $this.children('.responsive-menu'),
|
||||
menu = item.find('.dropdown-contents'),
|
||||
lastWidth = false,
|
||||
compact = false,
|
||||
responsive = false,
|
||||
copied = false;
|
||||
|
||||
function check() {
|
||||
var width = $body.width();
|
||||
if (responsive && width <= lastWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset responsive and compact layout
|
||||
if (responsive) {
|
||||
responsive = false;
|
||||
$this.removeClass('responsive');
|
||||
links.css('display', '');
|
||||
if (!persist) item.css('display', 'none');
|
||||
}
|
||||
|
||||
if (compact) {
|
||||
compact = false;
|
||||
$this.removeClass('compact');
|
||||
}
|
||||
|
||||
// Find tallest element
|
||||
var maxHeight = 0;
|
||||
allLinks.each(function() {
|
||||
if (!$(this).height()) return;
|
||||
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
|
||||
});
|
||||
|
||||
if (maxHeight < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Nothing to resize if block's height is not bigger than tallest element's height
|
||||
if ($this.height() <= maxHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable compact layout, find tallest element, compare to height of whole block
|
||||
compact = true;
|
||||
$this.addClass('compact');
|
||||
|
||||
var compactMaxHeight = 0;
|
||||
allLinks.each(function() {
|
||||
if (!$(this).height()) return;
|
||||
compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
|
||||
});
|
||||
|
||||
if ($this.height() <= maxHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Compact layout did not resize block enough, switch to responsive layout
|
||||
compact = false;
|
||||
$this.removeClass('compact');
|
||||
responsive = true;
|
||||
|
||||
if (!copied) {
|
||||
var clone = links.clone(true);
|
||||
clone.filter('.rightside').each(function() {
|
||||
if (persist) $(this).addClass('clone');
|
||||
menu.prepend(this);
|
||||
});
|
||||
|
||||
if (persist) {
|
||||
menu.prepend(clone.not('.rightside').addClass('clone'));
|
||||
} else {
|
||||
menu.prepend(clone.not('.rightside'));
|
||||
}
|
||||
|
||||
menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
|
||||
menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
|
||||
|
||||
if ($this.hasClass('post-buttons')) {
|
||||
$('.button', menu).removeClass('button icon-button');
|
||||
$('.responsive-menu-link', item).addClass('button icon-button').prepend('<span></span>');
|
||||
}
|
||||
copied = true;
|
||||
}
|
||||
else {
|
||||
menu.children().css('display', '');
|
||||
}
|
||||
|
||||
item.css('display', '');
|
||||
$this.addClass('responsive');
|
||||
|
||||
// Try to not hide filtered items #TODO: this does not work in FF and IE of some reason
|
||||
if (filterLastList.length) {
|
||||
links.not(filterLast).css('display', 'none');
|
||||
|
||||
maxHeight = 0;
|
||||
filterLastList.each(function() {
|
||||
if (!$(this).height()) return;
|
||||
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
|
||||
});
|
||||
|
||||
if ($this.height() <= maxHeight) {
|
||||
menu.children().filter(filterLast).css('display', 'none');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// If even responsive isn't enough, use both responsive and compact at same time
|
||||
compact = true;
|
||||
$this.addClass('compact');
|
||||
|
||||
links.css('display', 'none');
|
||||
}
|
||||
|
||||
if (!persist) phpbb.registerDropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
|
||||
|
||||
check();
|
||||
$(window).resize(check);
|
||||
});
|
||||
|
||||
/**
|
||||
* Do not run functions below for old browsers
|
||||
*/
|
||||
if (oldBrowser) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust topiclist lists with check boxes
|
||||
*/
|
||||
@ -666,151 +815,6 @@ function parse_document(container)
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Responsive link lists
|
||||
*/
|
||||
container.find('.linklist:not(.navlinks, [data-skip-responsive]), .postbody .post-buttons:not([data-skip-responsive])').each(function() {
|
||||
var $this = $(this),
|
||||
$body = $('body'),
|
||||
filterSkip = '.breadcrumbs, [data-skip-responsive]',
|
||||
filterLast = '.pagination, .icon-acp, .icon-mcp, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
|
||||
persist = $this.attr('id') == 'nav-main',
|
||||
allLinks = $this.children(),
|
||||
links = allLinks.not(filterSkip),
|
||||
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link"> </a><div class="dropdown" style="display:none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
|
||||
filterLastList = links.filter(filterLast);
|
||||
|
||||
if (!persist) {
|
||||
if (links.is('.rightside'))
|
||||
{
|
||||
links.filter('.rightside:first').before(html);
|
||||
$this.children('.responsive-menu').addClass('rightside');
|
||||
}
|
||||
else
|
||||
{
|
||||
$this.append(html);
|
||||
}
|
||||
}
|
||||
|
||||
var item = $this.children('.responsive-menu'),
|
||||
menu = item.find('.dropdown-contents'),
|
||||
lastWidth = false,
|
||||
compact = false,
|
||||
responsive = false,
|
||||
copied = false;
|
||||
|
||||
function check() {
|
||||
var width = $body.width();
|
||||
if (responsive && width <= lastWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset responsive and compact layout
|
||||
if (responsive) {
|
||||
responsive = false;
|
||||
$this.removeClass('responsive');
|
||||
links.css('display', '');
|
||||
if (!persist) item.css('display', 'none');
|
||||
}
|
||||
|
||||
if (compact) {
|
||||
compact = false;
|
||||
$this.removeClass('compact');
|
||||
}
|
||||
|
||||
// Find tallest element
|
||||
var maxHeight = 0;
|
||||
allLinks.each(function() {
|
||||
if (!$(this).height()) return;
|
||||
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
|
||||
});
|
||||
|
||||
if (maxHeight < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Nothing to resize if block's height is not bigger than tallest element's height
|
||||
if ($this.height() <= maxHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable compact layout, find tallest element, compare to height of whole block
|
||||
compact = true;
|
||||
$this.addClass('compact');
|
||||
|
||||
var compactMaxHeight = 0;
|
||||
allLinks.each(function() {
|
||||
if (!$(this).height()) return;
|
||||
compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
|
||||
});
|
||||
|
||||
if ($this.height() <= maxHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Compact layout did not resize block enough, switch to responsive layout
|
||||
compact = false;
|
||||
$this.removeClass('compact');
|
||||
responsive = true;
|
||||
|
||||
if (!copied) {
|
||||
var clone = links.clone(true);
|
||||
clone.filter('.rightside').each(function() {
|
||||
if (persist) this.addClass('clone');
|
||||
menu.prepend(this);
|
||||
});
|
||||
|
||||
if (persist) {
|
||||
menu.prepend(clone.not('.rightside').addClass('clone'));
|
||||
} else {
|
||||
menu.prepend(clone.not('.rightside'));
|
||||
}
|
||||
|
||||
menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
|
||||
menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
|
||||
|
||||
if ($this.hasClass('post-buttons')) {
|
||||
$('.button', menu).removeClass('button icon-button');
|
||||
$('.responsive-menu-link', item).addClass('button icon-button').prepend('<span></span>');
|
||||
}
|
||||
copied = true;
|
||||
}
|
||||
else {
|
||||
menu.children().css('display', '');
|
||||
}
|
||||
|
||||
item.css('display', '');
|
||||
$this.addClass('responsive');
|
||||
|
||||
// Try to not hide filtered items #TODO: this does not work!
|
||||
if (filterLastList.length) {
|
||||
links.not(filterLast).css('display', 'none');
|
||||
|
||||
maxHeight = 0;
|
||||
filterLastList.each(function() {
|
||||
if (!$(this).height()) return;
|
||||
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
|
||||
});
|
||||
|
||||
if ($this.height() <= maxHeight) {
|
||||
menu.children().filter(filterLast).css('display', 'none');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// If even responsive isn't enough, use both responsive and compact at same time
|
||||
compact = true;
|
||||
$this.addClass('compact');
|
||||
|
||||
links.css('display', 'none');
|
||||
}
|
||||
|
||||
if (!persist) phpbb.registerDropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
|
||||
|
||||
check();
|
||||
$(window).resize(check);
|
||||
});
|
||||
|
||||
/**
|
||||
* Responsive tabs
|
||||
*/
|
||||
|
||||
@ -9,12 +9,6 @@
|
||||
<div class="pointer"><div class="pointer-inner"></div></div>
|
||||
<ul class="dropdown-contents">
|
||||
<!-- EVENT overall_header_quick_links_before -->
|
||||
|
||||
<!-- <!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
|
||||
<!-- IF S_DISPLAY_MEMBERLIST --><li class="small-icon icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
|
||||
<!-- IF U_TEAM --><li class="small-icon icon-team"><a href="{U_TEAM}">{L_THE_TEAM}</a></li><!-- ENDIF -->
|
||||
<!-- ENDIF --> -->
|
||||
|
||||
<li class="separator"></li>
|
||||
|
||||
<!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
|
||||
@ -47,7 +41,7 @@
|
||||
|
||||
<!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
|
||||
<li id="username_logged_in" class="rightside dropdown-container<!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
|
||||
<a href="{U_PROFILE}" class="header-avatar dropdown-trigger icon-dropdown"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF -->{CURRENT_USERNAME_CLEAN}</a>
|
||||
<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF -->{CURRENT_USERNAME_CLEAN}</a>
|
||||
<div class="dropdown hidden">
|
||||
<div class="pointer"><div class="pointer-inner"></div></div>
|
||||
<ul class="dropdown-contents">
|
||||
|
||||
@ -369,11 +369,6 @@ a.arrow-right:hover {
|
||||
color: #368AD2;
|
||||
}
|
||||
|
||||
a.icon-dropdown:after {
|
||||
background-image: url("./images/icon_dropdown.png");
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
--------------------------------------------------------------
|
||||
Colours and backgrounds for content.css
|
||||
|
||||
@ -452,6 +452,14 @@ ul.linklist.bulletin li.no-bulletin:before {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-avatar span:after {
|
||||
content: '\25BC';
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-left: 2px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Dropdown menu
|
||||
----------------------------------------*/
|
||||
.dropdown-container {
|
||||
@ -606,7 +614,7 @@ ul.linklist.bulletin li.no-bulletin:before {
|
||||
}
|
||||
|
||||
.dropdown li.separator, ul.linklist .dropdown li.separator {
|
||||
margin: 3px 0;
|
||||
margin: 4px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 197 B |
@ -75,22 +75,6 @@ ul.linklist li.small-icon > a, ul.linklist li.breadcrumbs span:first-child > a {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
/* Dropdown links (inline) */
|
||||
a.icon-dropdown:after {
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
float: right;
|
||||
height: 8px;
|
||||
width: 11px;
|
||||
margin: 9px 0 0 2px;
|
||||
}
|
||||
|
||||
a.icon-dropdown:hover:after, .dropdown-visible a.icon-dropdown:after {
|
||||
background-position: 0 -22px;
|
||||
}
|
||||
|
||||
/* Links for forum/topic lists */
|
||||
a.forumtitle {
|
||||
font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
|
||||
|
||||
@ -69,5 +69,5 @@ dd.option {
|
||||
|
||||
/* Fixes header-avatar aspect-ratio in IE8 */
|
||||
.header-avatar img {
|
||||
height: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user