Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-05-03 13:04:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix mobile explorer scrolling issue (#3645)

Browse source 
* Fix last bug in explorer scrolling behavior on mobile

* Refactor explorer CSS one last time

* Fix JS linting warnings
This commit is contained in:
Thibaud Colas 2017-06-11 23:31:52 +03:00 committed by GitHub
parent ccf3b80e88
commit 12048d923b
6 changed files with 32 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/src/api/admin.js
View file

@ -24,7 +24,6 @@ export const getPageChildren = (id, options = {}) => {
url += `&offset=${options.offset}`;
}
// TODO To remove once we are done testing this.
url += ADMIN_API.EXTRA_CHILDREN_PARAMETERS;
return get(url);

56
client/src/components/Explorer/Explorer.scss
View file

@ -7,46 +7,34 @@ $menu-footer-height: 50px;
@import 'ExplorerItem';
.explorer {
width: 100%;
position: relative;
top: 0;
left: 0;
font-size: 1em;
z-index: 500;
@include medium {
width: 485px;
position: fixed;
top: 0;
left: $menu-width;
&:before {
display: none;
}
&:after {
content: '';
width: calc(100% - 2px);
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: -1;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}
}
}
.c-explorer,
.c-explorer * {
.explorer__wrapper,
.explorer__wrapper * {
box-sizing: border-box;
}
.explorer__wrapper {
display: flex;
flex: 1;
}
.explorer {
width: 100%;
display: flex;
flex-direction: column;
@include medium {
width: 485px;
height: 100vh;
position: fixed;
z-index: 500;
left: $menu-width;
}
}
.c-explorer {
flex: 1;
position: relative;
overflow: hidden;
height: 100vh;
background: $c-explorer-bg;
@include medium {

12
client/src/components/Explorer/ExplorerPanel.test.js
View file

@ -156,25 +156,25 @@ describe('ExplorerPanel', () => {
});
it('triggers onClose when click is outside', () => {
document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu></div><div id="target"></div>';
document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu></div><div id="t"></div>';
wrapper.instance().clickOutside({
target: document.querySelector('#target'),
target: document.querySelector('#t'),
});
expect(mockProps.onClose).toHaveBeenCalled();
});
it('does not trigger onClose when click is inside', () => {
document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu><div id="target"></div></div>';
document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu><div id="t"></div></div>';
wrapper.instance().clickOutside({
target: document.querySelector('#target'),
target: document.querySelector('#t'),
});
expect(mockProps.onClose).not.toHaveBeenCalled();
});
it('pauses focus trap inside toggle', () => {
document.body.innerHTML = '<div data-explorer-menu-item><div id="target"></div></div><div data-explorer-menu></div>';
document.body.innerHTML = '<div data-explorer-menu-item><div id="t"></div></div><div data-explorer-menu></div>';
wrapper.instance().clickOutside({
target: document.querySelector('#target'),
target: document.querySelector('#t'),
});
expect(wrapper.state('paused')).toEqual(true);
});

3
wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss
View file

@ -8,8 +8,9 @@ $footer-submenu: $submenu-color;
margin-left: -$menu-width;
width: $menu-width;
float: left;
display: flex;
flex-direction: column;
height: 100%;
min-height: 800px;
background: $color-grey-1;
.inner {

1
wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss
View file

@ -81,7 +81,6 @@ body {
.wrapper {
@include clearfix();
height: 100vh;
min-height: 800px;
transition: transform 0.2s ease;
}

4
wagtail/wagtailadmin/templates/wagtailadmin/base.html
View file

@ -13,9 +13,9 @@
{% menu_search %}
{% main_nav %}
</div>
<div data-explorer-menu></div>
</div>
<div class="explorer__wrapper" data-explorer-menu></div>
</div>
<div class="content-wrapper">