mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-28 22:28:51 +00:00
[ticket/12769] Fix responsive features
This commit is contained in:
parent
ea591562ae
commit
32868a6f87
6 changed files with 45 additions and 96 deletions
|
@ -362,13 +362,13 @@ function parseDocument($container) {
|
||||||
/**
|
/**
|
||||||
* Adjust HTML code for IE8 and older versions
|
* Adjust HTML code for IE8 and older versions
|
||||||
*/
|
*/
|
||||||
if (oldBrowser) {
|
// if (oldBrowser) {
|
||||||
// Fix .linklist.bulletin lists
|
// // Fix .linklist.bulletin lists
|
||||||
$container
|
// $container
|
||||||
.find('ul.linklist.bulletin > li')
|
// .find('ul.linklist.bulletin > li')
|
||||||
.filter(':first-child, .rightside:last-child')
|
// .filter(':first-child, .rightside:last-child')
|
||||||
.addClass('no-bulletin');
|
// .addClass('no-bulletin');
|
||||||
}
|
// }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Resize navigation (breadcrumbs) block to keep all links on same line
|
* Resize navigation (breadcrumbs) block to keep all links on same line
|
||||||
|
@ -489,7 +489,7 @@ function parseDocument($container) {
|
||||||
$linksFirst = $linksNotSkip.not(filterLast), // The items that will be hidden first
|
$linksFirst = $linksNotSkip.not(filterLast), // The items that will be hidden first
|
||||||
$linksLast = $linksNotSkip.filter(filterLast), // The items that will be hidden last
|
$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)?
|
persistent = $this.attr('id') === 'nav-main', // Does this list already have a menu (such as quick-links)?
|
||||||
html = '<li class="responsive-menu hidden"><a href="javascript:void(0);" class="responsive-menu-link"> </a><div class="dropdown hidden"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
|
html = '<li class="responsive-menu hidden"><a href="javascript:void(0);" class="js-responsive-menu-link responsive-menu-link"><i class="icon fa-bars fa-fw"></i></a><div class="dropdown"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
|
||||||
slack = 3; // Vertical slack space (in pixels). Determines how sensitive the script is in determining whether a line-break has occured.
|
slack = 3; // Vertical slack space (in pixels). Determines how sensitive the script is in determining whether a line-break has occured.
|
||||||
|
|
||||||
// Add a hidden drop-down menu to each links list (except those that already have one)
|
// Add a hidden drop-down menu to each links list (except those that already have one)
|
||||||
|
@ -578,8 +578,9 @@ function parseDocument($container) {
|
||||||
$menuContents.prepend($clones1.addClass('clone clone-first').removeClass('leftside rightside'));
|
$menuContents.prepend($clones1.addClass('clone clone-first').removeClass('leftside rightside'));
|
||||||
|
|
||||||
if ($this.hasClass('post-buttons')) {
|
if ($this.hasClass('post-buttons')) {
|
||||||
$('.button', $menuContents).removeClass('button icon-button');
|
$('.button', $menuContents).removeClass('button');
|
||||||
$('.responsive-menu-link', $menu).addClass('button icon-button').prepend('<span></span>');
|
$('.js-responsive-menu-link').addClass('button');
|
||||||
|
$('.js-responsive-menu-link .icon').removeClass('fa-bars').addClass('fa-ellipsis-h');
|
||||||
}
|
}
|
||||||
copied1 = true;
|
copied1 = true;
|
||||||
}
|
}
|
||||||
|
@ -633,7 +634,7 @@ function parseDocument($container) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!persistent) {
|
if (!persistent) {
|
||||||
phpbb.registerDropdown($menu.find('a.responsive-menu-link'), $menu.find('.dropdown'), false);
|
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
|
// If there are any images in the links list, run the check again after they have loaded
|
||||||
|
|
|
@ -81,11 +81,6 @@
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rtl ul.linklist li.responsive-menu a.responsive-menu-link:before {
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dropdown menu
|
/* Dropdown menu
|
||||||
---------------------------------------- */
|
---------------------------------------- */
|
||||||
.rtl .dropdown-container.topic-tools, .rtl .dropdown-container-left {
|
.rtl .dropdown-container.topic-tools, .rtl .dropdown-container-left {
|
||||||
|
@ -261,10 +256,23 @@
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination li.previous a { background-position: -50px 2px; }
|
|
||||||
.pagination li.next a { background-position: -30px 2px; }
|
/* Action Bar styles
|
||||||
.pagination li.previous a:hover { background-position: -50px -18px; }
|
---------------------------------------- */
|
||||||
.pagination li.next a:hover { background-position: -30px -18px; }
|
.rtl .action-bar .button {
|
||||||
|
margin-right: 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl .action-bar > .button {
|
||||||
|
margin-left: 5px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl .action-bar .dropdown-button-control .button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Miscellaneous styles
|
/* Miscellaneous styles
|
||||||
---------------------------------------- */
|
---------------------------------------- */
|
||||||
|
|
|
@ -281,27 +281,6 @@ ul.linklist li.responsive-menu {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.linklist .responsive-menu-link {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 5px;
|
|
||||||
font-size: 1.455em;
|
|
||||||
position: relative;
|
|
||||||
width: 16px;
|
|
||||||
line-height: 1.2em;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.linklist .responsive-menu-link:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 7px;
|
|
||||||
height: 2px;
|
|
||||||
width: 14px;
|
|
||||||
border-bottom: 0.125em solid transparent;
|
|
||||||
border-top: 0.375em double transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside {
|
.hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside {
|
||||||
max-width: 48%;
|
max-width: 48%;
|
||||||
}
|
}
|
||||||
|
@ -1240,30 +1219,11 @@ ul.linklist:after,
|
||||||
margin: 0 7px 0 0;
|
margin: 0 7px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linklist .quick-links .responsive-menu-link {
|
.linklist.compact .rightside > a > span span {
|
||||||
display: block;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
margin: 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.linklist .quick-links .responsive-menu-link:before {
|
|
||||||
font-size: 1.455em;
|
|
||||||
line-height: 16.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact .quick-links .responsive-menu-link {
|
|
||||||
width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact .icon-notification > a > span, .compact .icon-pm > a > span {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
|
.linklist.compact .rightside > a strong {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -381,24 +381,20 @@ input.button1:focus, input.button2:focus, input.button3:focus {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box button {
|
.search-box .button {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
|
||||||
|
|
||||||
.search-box button.search-icon {
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-size: 0;
|
|
||||||
height: 24px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 3px 5px;
|
padding: 2px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box a.button {
|
.search-box a.button {
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box .button span {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
margin: 0;
|
|
||||||
padding: 2px 5px 2px 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search box (header)
|
/* Search box (header)
|
||||||
|
@ -413,16 +409,13 @@ input.button1:focus, input.button2:focus, input.button3:focus {
|
||||||
|
|
||||||
.search-header .inputbox { border: 0; }
|
.search-header .inputbox { border: 0; }
|
||||||
|
|
||||||
.search-header button {
|
.search-header .button {
|
||||||
border-top: 0;
|
border-top-width: 0;
|
||||||
border-bottom: 0;
|
border-bottom-width: 0;
|
||||||
|
padding: 3px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-header a.button {
|
.navbar .linklist > li.responsive-search { display: none; }
|
||||||
border: 0;
|
|
||||||
border-left: 1px;
|
|
||||||
padding: 3px 5px 3px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.search {
|
input.search {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
|
@ -6,9 +6,11 @@ a {
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
unicode-bidi: embed;
|
unicode-bidi: embed;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
/* we use links inline more often then not so to address several bugs with
|
||||||
|
IE and some other browsers we render all links as inlineblock by default */
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
a:hover { text-decoration: underline; }
|
}
|
||||||
|
|
||||||
/* Coloured usernames */
|
/* Coloured usernames */
|
||||||
.username-coloured {
|
.username-coloured {
|
||||||
|
|
|
@ -73,16 +73,6 @@ body {
|
||||||
/* Search
|
/* Search
|
||||||
----------------------------------------*/
|
----------------------------------------*/
|
||||||
.responsive-search { display: block !important; }
|
.responsive-search { display: block !important; }
|
||||||
.responsive-search a {
|
|
||||||
display: block;
|
|
||||||
width: 16px;
|
|
||||||
height: 22px;
|
|
||||||
text-indent: 99px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-position: 50% 50%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .topiclist lists
|
/* .topiclist lists
|
||||||
----------------------------------------*/
|
----------------------------------------*/
|
||||||
|
@ -181,7 +171,6 @@ li.row .responsive-show strong {
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.topiclist li.row dt a.subforum {
|
ul.topiclist li.row dt a.subforum {
|
||||||
display: inline-block;
|
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -315,10 +304,6 @@ dl.pmlist dd:first-of-type {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colour-palette a {
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset.quick-login label {
|
fieldset.quick-login label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
Loading…
Add table
Reference in a new issue