参拝ローディングの文言と鳥居の位置依存を解消#148
Merged
Merged
Conversation
参拝待ちのローディング画面は【鳥居→提灯→メッセージ】を縦に並べ、 `.inner` を translateY(-50%) で画面中央にセンタリングしている。メッセージが 長くて折り返すとブロック全体の高さが増え、センタリングの都合で鳥居が上に ずれていた(`.loading-message` が min-height だったため2行で伸びる)。 - `.loading-message` を固定高(height:2.4em)+ flex中央寄せにし、文字量に 依存せず領域高さが一定になるようにした。これで上に並ぶ鳥居の位置が メッセージの行数で動かない。 - white-space:nowrap で改行を止め、中途半端な位置での折り返しをなくした。 文言は元々短いため折り返し不要。 - 画面幅が狭くても1行がはみ出さないよう font-size を clamp(1.1rem,4.8vw,2rem) の可変にした(テンプレートの fs-2 は撤去し、CSS側で制御)。 実機幅(390px)で最長文言「御神木にお伺いを立てています」が1行に収まり、 鳥居が短文時と同一位置に留まることをヘッドレスブラウザで確認済み。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DwkB6Hj2JggoKcy7FoxNcU
Contributor
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
kojira
pushed a commit
that referenced
this pull request
Jul 10, 2026
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DwkB6Hj2JggoKcy7FoxNcU
kojira
pushed a commit
that referenced
this pull request
Jul 10, 2026
#148 参拝ローディングの文言と鳥居の位置依存を解消 #149 おみくじ Phase 1(omikujiGo バックエンド + 文言105個 + 結果UI) #150 演出 v1 + 結果カード刷新 + トップに「おみくじを引く」導線 #151 演出 v2(鈴の緒スイング・狐スプライト・操作制限) #152 装置 v3(回転バー必通過 + ドミノ階段リレー) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DwkB6Hj2JggoKcy7FoxNcU
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
参拝待ちのローディング画面（
Loading.vue）は【鳥居 → 提灯 → メッセージ】を縦に並べ、.innerをtranslateY(-50%)で画面中央にセンタリングしている。巡回メッセージが長くて折り返すとブロック全体の高さが増え、センタリングの都合で鳥居（神社）が上にずれてかっこ悪かった（.loading-messageがmin-heightのため2行で伸びる）。変更内容（
web/components/Loading.vue）.loading-messageを固定高（height: 2.4em）+ flex中央寄せにし、文字量に依存せず領域高さが一定になるようにした。これで上に並ぶ鳥居の位置がメッセージの行数で動かない（＝文字領域と神社描画の依存を解消）。white-space: nowrapで改行を止め、中途半端な位置での折り返しをなくした（文言は元々短いため折り返し不要）。font-size: clamp(1.1rem, 4.8vw, 2rem)の可変にした（テンプレートのfs-2は撤去し、CSS側で制御）。検証
実機幅（390px）で最長文言「御神木にお伺いを立てています」が1行に収まり、鳥居が短文時と同一位置に留まることをヘッドレスブラウザ（Chromium）で描画確認済み。旧実装では同文言が2行に折り返し鳥居が上にずれることも再現確認した。
対象は純粋にローディング画面のスタイルのみで、参拝ロジック・APIには影響しない。
🤖 Generated with Claude Code
Generated by Claude Code