aboutsummaryrefslogtreecommitdiffstats
path: root/phpBB/styles
diff options
context:
space:
mode:
authorDavid King <imkingdavid@gmail.com>2013-10-26 11:37:51 -0700
committerDavid King <imkingdavid@gmail.com>2013-10-26 11:37:51 -0700
commitb0e0834637172c86f3a152034d77d558e95b2e61 (patch)
treeb077bbf745396f4c55dd4a4f86574287667a5eb7 /phpBB/styles
parent5c5ff6cb7c895a0c23d3687f509d1cc26ed4e5a8 (diff)
parente8b4a50a3d17e812995828e1b274a2b6930389f6 (diff)
downloadforums-b0e0834637172c86f3a152034d77d558e95b2e61.tar
forums-b0e0834637172c86f3a152034d77d558e95b2e61.tar.gz
forums-b0e0834637172c86f3a152034d77d558e95b2e61.tar.bz2
forums-b0e0834637172c86f3a152034d77d558e95b2e61.tar.xz
forums-b0e0834637172c86f3a152034d77d558e95b2e61.zip
Merge pull request #1817 from cyberalien/ticket/11956
More responsive design adjustments
Diffstat (limited to 'phpBB/styles')
-rw-r--r--phpBB/styles/prosilver/template/forum_fn.js162
-rw-r--r--phpBB/styles/prosilver/template/overall_header.html4
-rw-r--r--phpBB/styles/prosilver/theme/common.css14
-rw-r--r--phpBB/styles/prosilver/theme/images/icon_post_menu.pngbin1946 -> 1931 bytes
-rw-r--r--phpBB/styles/prosilver/theme/responsive.css15
5 files changed, 65 insertions, 130 deletions
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
index 23e24d7c03..2b48289fdb 100644
--- a/phpBB/styles/prosilver/theme/images/icon_post_menu.png
+++ b/phpBB/styles/prosilver/theme/images/icon_post_menu.png
Binary files differ
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
----------------------------------------*/
generated by cgit v1.2.1 (git 2.21.0) at 2025-06-07 03:20:54 +0000