Skip to content

Kata ページのヘッダーを共通化 #907

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
Jul 30, 2020
Merged

Kata ページのヘッダーを共通化 #907

merged 5 commits into from
Jul 30, 2020
+84 −52

Conversation

yuki384
Copy link
Member

@yuki384 yuki384 commented Jul 29, 2020 •
edited
Loading

close #867
ビジュアルのデザインの統一性をあげるため、Kataページのヘッダーを共通のものに変更します。

image
モバイル

やること

  • Kataと他のページで共通のヘッダーを使用
  • "Kata" ドロップダウンメニューを実装
  • ホバーアニメーションを修正
    - [ ] テストの修正(？)
  • モバイル表示整える

やらないこと

  • 検索フィールドの設置

Kata のヘッダーにある検索フィールドについては何か別の方法を考えたい 🤔💭 とはいえ今のところあまり使われていない (デザイン上の配置が悪いだけ?) ので、一旦は後回しにしても良さそう 😌

気になること

ホバー時のスタイルが、ドロップダウンメニューの中と外で統一感がありません。
ドロップダウンメニュー以外も、背景色がかわるホバーアニメーションにしてもよいのかなと考えています。
image

@yasulab
Copy link
Member

yasulab commented Jul 29, 2020

👀💨✨

@yuki384 yuki384 changed the title [WIP] Kata ページのヘッダーを共通化 Kata ページのヘッダーを共通化 Jul 29, 2020
@yuki384 yuki384 requested a review from Yuppymam July 29, 2020 08:00
@Yuppymam
Copy link
Contributor

🔽 のアイコンの表示がされていませんでした😭

Chrome 🔽
スクリーンショット 2020-07-29 17 10 20

FireFox 🔽
スクリーンショット 2020-07-29 17 13 45

@Yuppymam
Copy link
Contributor

ドロップダウンのホバーアクション背景色以外で考えてみましたが、文字前に白い点がつくようにするとかはどうでしょう？😊
シンプルなのでメインメニューのホバーアクションとの兼ね合いもさほど気にならなそう？？

スクリーンショット 2020-07-29 17 22 35

@yasulab
Copy link
Member

yasulab commented Jul 29, 2020 •
edited
Loading

🔽 のアイコンの表示がされていませんでした😭

こちら僕のローカル環境でも同様の現象を確認できました 👀 ✅

上記とは別件ですが、ローカル環境の構成が違うかもなので、こういう時は Heroku Review Apps で確認できると良さそうなんですが、以前僕が Upgrade した関係で動かなくなっちゃってますね 💦

Heroku Review Apps 直してみます...!! 🛠💨✨

@yasulab yasulab temporarily deployed to coderdojo-pi-shared-hea-zudrl9 July 29, 2020 12:15 Inactive
@yasulab yasulab mentioned this pull request Jul 29, 2020
Merged
@yasulab
Copy link
Member

yasulab commented Jul 29, 2020 •
edited
Loading

Heroku Review Apps を修正しました！こちらから確認できるようになります 🚀 ✨
https://coderdojo-pi-shared-hea-zudrl9.herokuapp.com/

image

また、Review Apps 上でもまだアイコンがうまく表示されていないのを確認できました 👀 ✅

@yuki384 yuki384 temporarily deployed to coderdojo-pi-shared-hea-zudrl9 July 30, 2020 01:30 Inactive
@yuki384
Copy link
Member Author

yuki384 commented Jul 30, 2020

読み込んでいないフォント(私のローカルには存在しました)を指定していたので、他の環境だとアイコンが表示されていませんでした…！
CSSで実装し直したのですが、どうでしょうか？
image
image

@yuki384 yuki384 temporarily deployed to coderdojo-pi-shared-hea-zudrl9 July 30, 2020 01:52 Inactive
@yuki384
Copy link
Member Author

yuki384 commented Jul 30, 2020 •
edited
Loading

クリックではなく、ホバーで表示できるように変更しました！

ドロップダウンのホバーアクション背景色以外で考えてみましたが、文字前に白い点がつくようにするとかはどうでしょう？😊
シンプルなのでメインメニューのホバーアクションとの兼ね合いもさほど気にならなそう？？

提案ありがとうございます！
ホバーアニメーションで文字と同じ色の図形を増やすと、情報量が増えたような錯覚で見づらくなってしまわないかという懸念があります💦 一旦マージしてから別で考えても良いかも知れません💭

@yasulab yasulab mentioned this pull request Jul 30, 2020
Closed
@yasulab
Copy link
Member

yasulab commented Jul 30, 2020

@yuki384 メッチャ便利になった...!! 😻🆒✨ 対応ありがとうございます！(＞人＜ )💖 こちらマージしますね! 🛠💨✨

合わせて、後回しにした検索フィールドについても別途 Issue にしておきました！(๑•̀ㅂ•́)و✨
cf. グローバルヘッダーに検索機能を再追加する #912

@yasulab yasulab merged commit 5c28039 into master Jul 30, 2020
@yasulab yasulab deleted the shared-header-navbar branch July 30, 2020 01:58
yasulab added a commit that referenced this pull request Jul 30, 2020
@yasulab
Tweak position when clicked internal links with new global header menu …
835803a 
…#907
@yasulab yasulab self-requested a review July 30, 2020 12:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Yuppymam Yuppymam Awaiting requested review from Yuppymam

@yasulab yasulab Awaiting requested review from yasulab

Assignees

@yuki384 yuki384

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

ヘッダーの「Kata」を Dropdown メニューにして、Kata ページのヘッダーと共通化させたい
3 participants
@yuki384 @yasulab @Yuppymam