diff options
Diffstat (limited to 'phpBB')
-rw-r--r-- | phpBB/assets/javascript/core.js | 134 | ||||
-rw-r--r-- | phpBB/styles/prosilver/template/forum_fn.js | 162 | ||||
-rw-r--r-- | phpBB/styles/prosilver/template/overall_header.html | 4 | ||||
-rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 14 | ||||
-rw-r--r-- | phpBB/styles/prosilver/theme/images/icon_post_menu.png | bin | 1946 -> 1931 bytes | |||
-rw-r--r-- | phpBB/styles/prosilver/theme/responsive.css | 15 |
6 files changed, 199 insertions, 130 deletions
diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 7bd3b85d7d..efb945a117 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -830,12 +830,146 @@ phpbb.applyCodeEditor = function(textarea) { }; /** +* List of classes that toggle dropdown menu, +* list of classes that contain visible dropdown menu +* +* Add your own classes to strings with comma (probably you +* will never need to do that) +*/ +phpbb.dropdownHandles = '.dropdown-container.dropdown-visible .dropdown-toggle'; +phpbb.dropdownVisibleContainers = '.dropdown-container.dropdown-visible'; + +/** +* Dropdown toggle event handler +* This handler is used by phpBB.registerDropdown() and other functions +*/ +phpbb.toggleDropdown = function() { + var $this = $(this), + options = $this.data('dropdown-options'), + parent = options.parent, + visible = parent.hasClass('dropdown-visible'); + + if (!visible) { + // Hide other dropdown menus + $(phpbb.dropdownHandles).each(phpbb.toggleDropdown); + + // Figure out direction of dropdown + var direction = options.direction, + verticalDirection = options.verticalDirection, + offset = $this.offset(); + + if (direction == 'auto') { + if (($(window).width() - $this.outerWidth(true)) / 2 > offset.left) { + direction = 'right'; + } + else { + direction = 'left'; + } + } + parent.toggleClass(options.leftClass, direction == 'left').toggleClass(options.rightClass, direction == 'right'); + + if (verticalDirection == 'auto') { + var height = $(window).height(), + top = offset.top - $(window).scrollTop(); + + if (top < height * 0.7) { + verticalDirection = 'down'; + } + else { + verticalDirection = 'up'; + } + } + parent.toggleClass(options.upClass, verticalDirection == 'up').toggleClass(options.downClass, verticalDirection == 'down'); + } + + options.dropdown.toggle(); + parent.toggleClass(options.visibleClass, !visible).toggleClass('dropdown-visible', !visible); + + // Check dimensions when showing dropdown + // !visible because variable shows state of dropdown before it was toggled + if (!visible) { + options.dropdown.find('.dropdown-contents').each(function() { + var $this = $(this), + windowWidth = $(window).width(); + + $this.css({ + marginLeft: 0, + left: 0, + maxWidth: (windowWidth - 4) + 'px' + }); + + var offset = $this.offset().left, + width = $this.outerWidth(true); + + if (offset < 2) { + $this.css('left', (2 - offset) + 'px'); + } + else if ((offset + width + 2) > windowWidth) { + $this.css('margin-left', (windowWidth - offset - width - 2) + 'px'); + } + }); + } + + // Prevent event propagation + if (arguments.length > 0) { + try { + var e = arguments[0]; + e.preventDefault(); + e.stopPropagation(); + } + catch (error) { } + } + return false; +}; + +/** +* Register dropdown menu +* Shows/hides dropdown, decides which side to open to +* +* @param {jQuery} toggle Link that toggles dropdown. +* @param {jQuery} dropdown Dropdown menu. +* @param {Object} options List of options. Optional. +*/ +phpbb.registerDropdown = function(toggle, dropdown, options) +{ + var ops = { + parent: toggle.parent(), // Parent item to add classes to + direction: 'auto', // Direction of dropdown menu. Possible values: auto, left, right + verticalDirection: 'auto', // Vertical direction. Possible values: auto, up, down + visibleClass: 'visible', // Class to add to parent item when dropdown is visible + leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side + rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side + upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item + downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item + }; + if (options) { + ops = $.extend(ops, options); + } + ops.dropdown = dropdown; + + ops.parent.addClass('dropdown-container'); + toggle.addClass('dropdown-toggle'); + + toggle.data('dropdown-options', ops); + + toggle.click(phpbb.toggleDropdown); +}; + +/** * Apply code editor to all textarea elements with data-bbcode attribute */ $(document).ready(function() { $('textarea[data-bbcode]').each(function() { phpbb.applyCodeEditor(this); }); + + // Hide active dropdowns when click event happens outside + $('body').click(function(e) { + var parents = $(e.target).parents(); + if (!parents.is(phpbb.dropdownVisibleContainers)) { + $(phpbb.dropdownHandles).each(phpbb.toggleDropdown); + } + }); }); })(jQuery); // Avoid conflicts with other libraries diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index 23dfae9fab..1b2b1954ef 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -409,108 +409,6 @@ function insert_single_user(formId, user) self.close(); } -function toggle_dropdown() -{ - var $this = $(this), - options = $this.data('dropdown-options'), - parent = options.parent, - visible = parent.hasClass('dropdown-visible'); - - if (!visible) { - // Hide other dropdown menus - $('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown); - - // Figure out direction of dropdown - var direction = options.direction, - verticalDirection = options.verticalDirection, - offset = $this.offset(); - - if (direction == 'auto') { - if (($(window).width() - $this.outerWidth(true)) / 2 > offset.left) { - direction = 'right'; - } - else { - direction = 'left'; - } - } - parent.toggleClass(options.leftClass, direction == 'left').toggleClass(options.rightClass, direction == 'right'); - - if (verticalDirection == 'auto') { - var height = $(window).height(), - top = offset.top - $(window).scrollTop(); - - if (top < height * 0.7) { - verticalDirection = 'down'; - } - else { - verticalDirection = 'up'; - } - } - parent.toggleClass(options.upClass, verticalDirection == 'up').toggleClass(options.downClass, verticalDirection == 'down'); - } - - options.dropdown.toggle(); - parent.toggleClass(options.visibleClass, !visible).toggleClass('dropdown-visible', !visible); - - // Check dimensions when showing dropdown - // !visible because variable shows state of dropdown before it was toggled - if (!visible) { - options.dropdown.find('.dropdown-contents').each(function() { - var $this = $(this), - windowWidth = $(window).width(); - - $this.css({ - marginLeft: 0, - left: 0, - maxWidth: (windowWidth - 4) + 'px' - }); - - var offset = $this.offset().left, - width = $this.outerWidth(true); - - if (offset < 2) { - $this.css('left', (2 - offset) + 'px'); - } - else if ((offset + width + 2) > windowWidth) { - $this.css('margin-left', (windowWidth - offset - width - 2) + 'px'); - } - }); - } -} - -/** -* Dropdown handler -* Shows/hides dropdown, decides which side to open to -* -* @param [jQuery] toggle Link that toggles dropdown -* @param [jQuery] dropdown Dropdown menu -* @param [Object] [options] List of options -*/ -function register_dropdown(toggle, dropdown, options) -{ - var ops = { - parent: toggle.parent(), // Parent item to add classes to - direction: 'auto', // Direction of dropdown menu. Possible values: auto, left, right - verticalDirection: 'auto', // Vertical direction. Possible values: auto, up, down - visibleClass: 'visible', // Class to add to parent item when dropdown is visible - leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side - rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side - upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item - downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item - }; - if (options) { - ops = $.extend(ops, options); - } - ops.dropdown = dropdown; - - ops.parent.addClass('dropdown-container'); - toggle.addClass('dropdown-toggle'); - - toggle.data('dropdown-options', ops); - - toggle.click(toggle_dropdown); -} - /** * Parse document block */ @@ -584,11 +482,6 @@ function parse_document(container) lastWidth = false, wrapped = false; - // Test height by setting nowrap - $this.css('white-space', 'nowrap'); - maxHeight = $this.height() + 1; - $this.css('white-space', ''); - // Set tooltips $this.find('a').each(function() { var $link = $(this); @@ -601,6 +494,13 @@ function parse_document(container) width = $body.width(), link, i, j; + maxHeight = parseInt($this.css('line-height')) | 0; + links.each(function() { + if ($(this).height() > 0) { + maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); + } + }); + if (height <= maxHeight) { if (!wrapped || lastWidth === false || lastWidth >= width) { lastWidth = width; @@ -798,7 +698,7 @@ function parse_document(container) return; } - if (text.length && text !== '-') { + if ((text.length && text !== '-') || cell.children().length) { cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>'); } else { @@ -906,7 +806,11 @@ function parse_document(container) responsive = true; if (!copied) { - menu.append(links.clone(true)); + var clone = links.clone(true); + clone.filter('.rightside').each(function() { + menu.prepend(this); + }); + menu.prepend(clone.not('.rightside')); menu.find('li.leftside, li.rightside').removeClass('leftside rightside'); menu.find('.inputbox').parents('li:first').css('white-space', 'normal'); copied = true; @@ -937,7 +841,7 @@ function parse_document(container) links.css('display', 'none'); } - register_dropdown(item.find('a.responsive-menu-link'), item.find('.dropdown')); + phpbb.registerDropdown(item.find('a.responsive-menu-link'), item.find('.dropdown')); check(); $(window).resize(check); @@ -979,7 +883,7 @@ function parse_document(container) if (height <= maxHeight) { responsive = false; if (item.hasClass('dropdown-visible')) { - toggle_dropdown.call(item.find('a.responsive-tab-link').get(0)); + phpbb.toggleDropdown.call(item.find('a.responsive-tab-link').get(0)); } return; } @@ -1004,7 +908,7 @@ function parse_document(container) menu.find('a').click(function() { check(true); }); } - register_dropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab'}); + phpbb.registerDropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab'}); check(true); $(window).resize(check); @@ -1020,6 +924,31 @@ function parse_document(container) $(this).addClass('responsive-hide'); } }); + + /** + * Replace responsive text + */ + container.find('[data-responsive-text]').each(function() { + var $this = $(this), + fullText = $this.text(), + responsiveText = $this.attr('data-responsive-text'), + responsive = false; + + function check() { + if ($(window).width() > 700) { + if (!responsive) return; + $this.text(fullText); + responsive = false; + return; + } + if (responsive) return; + $this.text(responsiveText); + responsive = true; + } + + check(); + $(window).resize(check); + }); } /** @@ -1035,15 +964,6 @@ function parse_document(container) $('#' + this.getAttribute('data-focus')).focus(); }); - // Hide active dropdowns when click event happens outside - $('#phpbb').click(function(e) { - - var parents = $(e.target).parents(); - if (!parents.is('.dropdown-container.dropdown-visible')) { - $('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown); - } - }); - parse_document($('body')); }); })(jQuery); diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html index 854f92e9ce..6186fe051e 100644 --- a/phpBB/styles/prosilver/template/overall_header.html +++ b/phpBB/styles/prosilver/template/overall_header.html @@ -156,14 +156,14 @@ <!-- ENDIF --> <!-- ENDIF --> - <!-- EVENT overall_header_navigation_prepend --> + <!-- EVENT overall_header_navigation_append --> <!-- IF not S_IS_BOT --> <li class="icon-logout rightside no-bulletin"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li> <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register rightside no-bulletin"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF --> <!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members rightside no-bulletin"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF --> <!-- ENDIF --> <li class="icon-faq rightside no-bulletin"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li> - <!-- EVENT overall_header_navigation_append --> + <!-- EVENT overall_header_navigation_prepend --> </ul> </div> diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 3605b9e1a4..84aea8212c 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -372,7 +372,7 @@ ul.linklist li.responsive-menu a.responsive-menu-link { font-size: 16px; position: relative; width: 16px; - line-height: 16px; + line-height: 16.5px; text-decoration: none; } @@ -533,20 +533,22 @@ ul.linklist.bulletin li.no-bulletin:before { /* Responsive breadcrumbs ----------------------------------------*/ +.breadcrumbs .crumb { + word-wrap: normal; +} + .breadcrumbs .crumb a { display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; vertical-align: bottom; + overflow: hidden; } .breadcrumbs.wrapped .crumb a { letter-spacing: -.3px; } .breadcrumbs.wrapped .crumb.wrapped-medium a { letter-spacing: -.4px; } .breadcrumbs.wrapped .crumb.wrapped-tiny a { letter-spacing: -.5px; } -.breadcrumbs .crumb.wrapped a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} .breadcrumbs .crumb.wrapped-max a { max-width: 120px; } .breadcrumbs .crumb.wrapped-wide a { max-width: 100px; } .breadcrumbs .crumb.wrapped-medium a { max-width: 80px; } diff --git a/phpBB/styles/prosilver/theme/images/icon_post_menu.png b/phpBB/styles/prosilver/theme/images/icon_post_menu.png Binary files differindex 23e24d7c03..2b48289fdb 100644 --- a/phpBB/styles/prosilver/theme/images/icon_post_menu.png +++ b/phpBB/styles/prosilver/theme/images/icon_post_menu.png diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index cfe76149d8..d7af7519b7 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -17,7 +17,7 @@ body { } #wrap { - min-width: 320px; + min-width: 300px; padding: 0; } @@ -343,6 +343,19 @@ fieldset.quick-login label[for="autologin"] { min-width: 50%; } +@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) +{ + select, .inputbox { + max-width: 260px; + } +} + +@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) +{ + select, .inputbox { + max-width: 240px; + } +} /* User profile ----------------------------------------*/ |