diff options
| author | Ibuki Sugiyama <main@fuwa.dev> | 2023-07-25 19:49:52 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-07-25 19:49:52 +0900 |
| commit | 545b5cab9618753667b0d53320ced0928a941d5e (patch) | |
| tree | a4f1478e3e849b6370f75ae92bc4fef99df6defb | |
| parent | refactor: Array.from(iterable).map(mapfn)をArray.from(iterable | { length: n... (diff) | |
| download | sharkey-545b5cab9618753667b0d53320ced0928a941d5e.tar.gz sharkey-545b5cab9618753667b0d53320ced0928a941d5e.tar.bz2 sharkey-545b5cab9618753667b0d53320ced0928a941d5e.zip | |
fix: insert bottom spacing appropriately (#11370)
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | packages/frontend/src/style.scss | 6 | ||||
| -rw-r--r-- | packages/frontend/src/ui/universal.vue | 2 |
3 files changed, 7 insertions, 2 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 744846d999..1b654699d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ ### Client - リストTLで、ユーザーが追加・削除されてもTLを初期化しないように +- Fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正 ### Server - Fix: APIのオフセットが壊れていたせいで「もっと見る」でもっと見れない問題を修正 diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index bd74db7c85..85ad442ba4 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -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%); diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 9ae43c39d3..50866b23ed 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -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, |