makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-09 21:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1817 from cyberalien/ticket/11956

Browse source 
More responsive design adjustments
This commit is contained in:
David King 2013-10-26 11:37:51 -07:00
commit b0e0834637
6 changed files with 199 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
phpBB/assets/javascript/core.js
View file

@ -829,6 +829,132 @@ 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
*/
@ -836,6 +962,14 @@ $(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

162
phpBB/styles/prosilver/template/forum_fn.js
View file

@ -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);

4
phpBB/styles/prosilver/template/overall_header.html
View file

@ -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>

14
phpBB/styles/prosilver/theme/common.css
View file

@ -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; }

BIN
phpBB/styles/prosilver/theme/images/icon_post_menu.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

15
phpBB/styles/prosilver/theme/responsive.css
View file

@ -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
----------------------------------------*/