github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 21:11:55 +08:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

Fix mobile PostStream top scroll adjustment & remove App:before (#2385)

Browse Source 
- remove App:before so we can use #app-navigation to access the mobile header
- fix mobile postStream scroll top margin adjustment
This commit is contained in:
Wadim Kalmykov 2020-11-15 05:21:38 +07:00 committed by GitHub
parent 10e356e1b2
commit 3d597f9fab
2 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
framework/core/js/src/forum/components/PostStream.js
View File

@ -287,7 +287,9 @@ export default class PostStream extends Component {
* @return {Integer} * @return {Integer}
*/ */
getMarginTop() { getMarginTop() {
return this.$() && $('#header').outerHeight() + parseInt(this.$().css('margin-top'), 10); const headerId = app.screen() === 'phone' ? '#app-navigation' : '#header';
return this.$() && $(headerId).outerHeight() + parseInt(this.$().css('margin-top'), 10);
} }
/** /**

26
framework/core/less/common/App.less
View File

@ -10,12 +10,11 @@
} }
} }
// Fix a solid white box to the top of the viewport. This toolbar's contents // PHONES: Somewhere on the page there will be a .App-backControl, a
// will differ depending on the device: on phones it will be content // .App-primaryControl, and a .App-titleControl. We will position these on the
// controls, whereas on desktops it will be the header. We will overlay // left, right, and center of the header respectively.
// these things on top of it later. @media @phone {
.App:before { .App-navigation {
content: " ";
.header-background(); .header-background();
border-bottom: 0; border-bottom: 0;
position: absolute; position: absolute;
@ -28,11 +27,6 @@
.box-shadow(0 2px 6px @shadow-color); .box-shadow(0 2px 6px @shadow-color);
} }
} }
// PHONES: Somewhere on the page there will be a .App-backControl, a
// .App-primaryControl, and a .App-titleControl. We will position these on the
// left, right, and center of the header respectively.
@media @phone {
.App-primaryControl, .App-titleControl, .App-backControl { .App-primaryControl, .App-titleControl, .App-backControl {
position: absolute !important; position: absolute !important;
z-index: @zindex-header + 1; z-index: @zindex-header + 1;
@ -234,18 +228,18 @@
display: none; display: none;
} }
.App-header { .App-header {
.header-background();
padding: 8px; padding: 8px;
height: @header-height;
position: absolute; position: absolute;
top: 0;
left: 0;
right: 0;
z-index: @zindex-header;
.affix & { .affix & {
position: fixed; position: fixed;
} }
.scrolled & {
.box-shadow(0 2px 6px @shadow-color);
}
& when (@config-colored-header = true) { & when (@config-colored-header = true) {
.light-contents(@header-color, @header-control-bg, @header-control-color); .light-contents(@header-color, @header-control-bg, @header-control-color);
} }