mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-04 09:48:11 +09:00
Code

fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正 (#110)

Browse Source 
* fix: insert bottom spacing appropriately

* Revert CHANGELOG.md

---------

Co-authored-by: ibuki2003 <main@fuwa.dev>
This commit is contained in:
まっちゃとーにゅ 2023-07-25 03:30:50 +09:00 committed by GitHub
parent 4a2bb601bb
commit 2b7575e710
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/style.scss
View File

@ -6,11 +6,13 @@
--marginHalf: 10px;
--margin: var(--marginFull);
--minBottomSpacing: 0px;
// switch dynamically
--minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
--minBottomSpacing: var(--minBottomSpacingMobile);
@media (max-width: 500px) {
--margin: var(--marginHalf);
--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
}
//--ad: rgb(255 169 0 / 10%);

2
packages/frontend/src/ui/universal.vue
View File

@ -207,9 +207,11 @@ watch($$(navFooter), () => {
if (navFooter) {
navFooterHeight = navFooter.offsetHeight;
document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`);
document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
} else {
navFooterHeight = 0;
document.body.style.setProperty('--stickyBottom', '0px');
document.body.style.setProperty('--minBottomSpacing', '0px');
}
}, {
immediate: true,