bug #12649 [Hackday] [Toolbar] Fix info position and icons on small screens (stefanosala)
This PR was merged into the 2.6 branch. Discussion ---------- [Hackday] [Toolbar] Fix info position and icons on small screens | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | #12582 | License | MIT | Doc PR | - I changed a bit the order of profiles, IMO the dump goes closer to request data. Then I tweaked a bit the toolbar to show more icons even on smaller screen. I tested everything with Chrome and IE9 and it seems to work smoothly. Here are some explanatory screenshots: ![](http://cl.ly/image/3E2e360Y0a15/Screen%20Shot%202014-11-29%20at%2011.56.17.png) ![](http://cl.ly/image/1d073v2v2U2J/Screen%20Shot%202014-11-29%20at%2011.56.42.png) Commits -------838857c
[Toolbar] Reset right and left .sf-toolbar-info values needed for window resize23c0ddc
[Toolbar] Handle info position via javascript Place info div to not float out of the window7a8582e
[Toolbar] Display all icons, even on two lines for small screens
This commit is contained in:
commit
eadc8c7de5
@ -30,7 +30,6 @@
|
||||
background-color: #f7f7f7;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 38px;
|
||||
margin: 0;
|
||||
padding: 0 40px 0 0;
|
||||
z-index: 6000000;
|
||||
@ -88,6 +87,7 @@
|
||||
color: #2f2f2f;
|
||||
display: block;
|
||||
min-height: 28px;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
border-right: 1px solid #e4e4e4;
|
||||
padding: 0;
|
||||
float: left;
|
||||
@ -150,10 +150,6 @@
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.sf-toolbarreset > div:last-of-type .sf-toolbar-info {
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-info:empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
@ -31,6 +31,30 @@
|
||||
}
|
||||
|
||||
Sfjs.renderAjaxRequests();
|
||||
|
||||
/* Handle toolbar-info position */
|
||||
var toolbarBlocks = document.getElementsByClassName('sf-toolbar-block');
|
||||
for (var i = 0; i < toolbarBlocks.length; i += 1) {
|
||||
toolbarBlocks[i].onmouseover = function () {
|
||||
var toolbarInfo = this.getElementsByClassName('sf-toolbar-info')[0];
|
||||
var pageWidth = document.body.clientWidth;
|
||||
var elementWidth = toolbarInfo.offsetWidth;
|
||||
var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
|
||||
var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
|
||||
|
||||
/* Reset right and left value, useful on window resize */
|
||||
toolbarInfo.style.right = '';
|
||||
toolbarInfo.style.left = '';
|
||||
|
||||
if (leftValue > 0 && rightValue > 0) {
|
||||
toolbarInfo.style.right = (rightValue * -1) + 'px';
|
||||
} else if (leftValue < 0) {
|
||||
toolbarInfo.style.left = 0;
|
||||
} else {
|
||||
toolbarInfo.style.right = '-1px';
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
function(xhr) {
|
||||
if (xhr.status !== 0) {
|
||||
|
Reference in New Issue
Block a user