Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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; --marginHalf: 10px;
--margin: var(--marginFull); --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) { @media (max-width: 500px) {
--margin: var(--marginHalf); --margin: var(--marginHalf);
--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
} }
//--ad: rgb(255 169 0 / 10%); //--ad: rgb(255 169 0 / 10%);

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

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