Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(client): PWA時の絵文字ピッカーの位置をホームバーに重ならないように調整 #10534

Merged
merged 2 commits into from
Apr 8, 2023

Conversation

takeyaqa
Copy link
Contributor

@takeyaqa takeyaqa commented Apr 8, 2023

What

fix: #10532

PWA時の絵文字ピッカーの位置をホームバーに重ならないように調整しました。MKMenu と同じpaddingを設定しています。

Before After
スクリーンショット 2023-04-08 19 59 09 スクリーンショット 2023-04-08 20 16 55

Why

ホームバーと重なりタップがしづらいため

Additional info (optional)

スクショのシミュレーターの他、iPhone 12 Pro Max実機で表示を確認しています。

Checklist

  • Read the contribution guide
  • Test working in a local environment
  • (If needed) Update CHANGELOG.md
  • (If possible) Add tests

takeyaqa added 2 commits April 8, 2023 16:11
emoji picker bottoms are hidden by iPhone Home Bar.
To fix this, add safe-area padding
@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Apr 8, 2023
@github-actions github-actions bot requested review from acid-chicken and rinsuki April 8, 2023 16:25
@codecov
Copy link

codecov bot commented Apr 8, 2023

Codecov Report

Merging #10534 (e64780b) into develop (7bd0001) will increase coverage by 0.21%.
The diff coverage is 99.26%.

@@             Coverage Diff             @@
##           develop   #10534      +/-   ##
===========================================
+ Coverage    78.59%   78.81%   +0.21%     
===========================================
  Files          161      162       +1     
  Lines        19647    19872     +225     
  Branches       331      332       +1     
===========================================
+ Hits         15442    15662     +220     
- Misses        4205     4210       +5     
Impacted Files Coverage Δ
packages/frontend/src/os.ts 17.13% <0.00%> (-0.06%) ⬇️
packages/misskey-js/src/streaming.ts 93.18% <92.30%> (-0.74%) ⬇️
...ackages/frontend/src/components/MkAccountMoved.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkDialog.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkEmojiPicker.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkNote.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkNoteHeader.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkNotePreview.vue 100.00% <100.00%> (ø)
packages/frontend/src/components/MkPostForm.vue 100.00% <100.00%> (ø)
...ges/frontend/src/components/MkPostFormAttaches.vue 100.00% <100.00%> (ø)
... and 5 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

@tamaina tamaina merged commit e58b357 into misskey-dev:develop Apr 8, 2023
@tamaina
Copy link
Contributor

tamaina commented Apr 8, 2023

🙏 🙏🙏

@takeyaqa takeyaqa deleted the fix_emoji_picker branch April 9, 2023 10:31
@melt-adzuki
Copy link
Contributor

この実装だとタップして検索バーか上になったときにも下部にmarginができるのでまずいです

@melt-adzuki
Copy link
Contributor

あとtopにも不要なpaddingが発生している

@tamaina
Copy link
Contributor

tamaina commented Apr 10, 2023

あとtopにも不要なpaddingが発生している

なんで??

@tamaina
Copy link
Contributor

tamaina commented Apr 10, 2023

タップして検索バーか上になったときにも下部にmarginができる

focusの時はmarginなしにするか

@tamaina
Copy link
Contributor

tamaina commented Apr 10, 2023

あとtopにも不要なpaddingが発生している

なんで??

背面と重なってpaddingがあるように見えているだけな気がする

@melt-adzuki
Copy link
Contributor

なんで??

padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; ← これのせい(本来は下部だけでいい)

focusの時はmarginなしにするか

これ参考にしてほしい
afcdd6e#diff-8dbcaac9f6f583b99a6355e32ca18c765bd83f6c24d821daf7baf3d140970108

@tamaina
Copy link
Contributor

tamaina commented Apr 10, 2023

paddingじゃなくてmarginとかで整えるべきじゃの

tamaina added a commit to tamaina/misskey that referenced this pull request Apr 10, 2023
na2na-p pushed a commit to na2na-p/misskey that referenced this pull request Apr 11, 2023
hutchisr pushed a commit to hutchisr/misskey that referenced this pull request Apr 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

iPhoneでPWA時に絵文字ピッカーの検索エリアがホームバーと重なる
3 participants