github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-27 04:00:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mobile

Browse Source
This commit is contained in:
KyrneDev 2021-02-16 18:00:59 -08:00 committed by Alexander Skvortsov
parent 039109559d
commit 127393b778
3 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/src/forum/components/DiscussionPage.js
View File

@ -58,10 +58,13 @@ export default class DiscussionPage extends Page {
const scrollListener = new ScrollListener((top) => { const scrollListener = new ScrollListener((top) => {
const $hero = $('.DiscussionHero'); const $hero = $('.DiscussionHero');
if ($hero.offset()) { if ($hero.offset()) {
$hero.toggleClass('DiscussionHero--floating', top > 92); const container = $('.DiscussionHero').children('.container');
const containerPadding = parseInt(container.css('padding-top')) + parseInt(container.css('padding-bottom'));
$hero.toggleClass('DiscussionHero--floating', top > 22 + containerPadding);
$('.DiscussionPage-discussion') $('.DiscussionPage-discussion')
.children('.container') .children('.container')
.toggleClass('scrolled', top > 92); .toggleClass('scrolled', top > 22 + containerPadding);
} }
}); });

8
less/forum/DiscussionHero.less
View File

@ -27,6 +27,14 @@
height: 50px; height: 50px;
width: 100%; width: 100%;
@media @desktop-up {
height: 50px;
}
@media (max-width: @screen-tablet-max) {
height: 40px;
}
> .container { > .container {
padding-top: 10px !important; padding-top: 10px !important;
} }

14
less/forum/DiscussionPage.less
View File

@ -153,11 +153,19 @@
} }
.DiscussionPage-discussion { .DiscussionPage-discussion {
> .container.scrolled { @media @desktop-up {
padding-top: ~"calc(90px + @{header-height})"; .container.scrolled {
padding-top: ~"calc(90px + @{header-height})";
}
}
@media (max-width: @screen-tablet-max) {
.container.scrolled {
padding-top: ~"calc(50px + @{header-height})";
}
}
.DiscussionPage-nav { .DiscussionPage-nav {
margin-top: -1px; margin-top: -1px;
} }
}
} }