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.

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

Add section of sponsers logo #86

Merged
merged 16 commits into from
Jan 13, 2017
Merged

Add section of sponsers logo #86

merged 16 commits into from
Jan 13, 2017

Conversation

tomoko523
Copy link
Contributor

@tomoko523 tomoko523 commented Jan 12, 2017 •
edited

やること

  • 画像をaseetに配置
  • 画像にホバー時の処理を追加
  • レイアウト調整
  • テスト

#37

@tomoko523 tomoko523 changed the title Add section of sponsers logo [WIP]Add section of sponsers logo Jan 12, 2017
@tomoko523
Copy link
Contributor Author

grayscale(100%)したもの
2017-01-12 13 49 20

opacityy(0.3)で透過したもの
2017-01-12 13 50 27

🤔 (どっちもしっくりこない…)

@tomoko523
Copy link
Contributor Author

@yasulab
並び順は↑で大丈夫でしょうか？(Issue表記順）
ABC順なら caseshinjuku>OpenSourceCafe>Scrivito>Yaslab にしますか？

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

並び順はとりあえず ABC 順で行きましょう 👍

デザインについてですがコントラストを調整するのが難しいと思うので、sectionタグで区切って背景を白色にしてしまっても大丈夫です👌

@tomoko523
Copy link
Contributor Author

@yasulab
ありがとうございます！ABC順に変更しました。

現在以下のようになっています
（フォーカスなし）
2017-01-12 16 22 12
（フォーカスあり）
2017-01-12 16 22 34

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

おぉ、ラップトップ以上のサイズについてはこたらで問題なさそうですね😄

あとはモバイル対応ですかね。実際にモバイル端末からアクセスするとどうなるかが気になるもころです🤔

@tomoko523
Copy link
Contributor Author

画面上ではきれいに並んでる感じですが実機だとどうなりますかね…2017-01-12 16 32 04

@tomoko523 tomoko523 changed the title [WIP]Add section of sponsers logo Add section of sponsers logo Jan 12, 2017
@yasulab
Copy link
Member

yasulab commented Jan 12, 2017 •
edited

う、僕の書き方がまずかったのが原因ですが、footer だと背景色との conflict があってあまり良くなさそうですね ><　

2017-01-12 17 29 39

「お問い合わせ」の直前に背景色を白にした <section> タグを作って、そこに移動した方がスポンサーさんのロゴを contrast を気にせずに表示をできるので、(スポンサーに怒られてもまずいので) 念のため安全側に倒しましょう。

@tomoko523
Copy link
Contributor Author

承知しましたー！

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

🙇

@tomoko523
Copy link
Contributor Author

tomoko523 commented Jan 12, 2017 •
edited

yasulabにカーソルが当たってます
2017-01-12 17 54 08

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017 •
edited

@tomoko523 あ、ページのパターンを見るとわかるかなと思いますが、Section毎に背景がgreyとwhiteで切り替わっているんですよね。なので「お問い合わせ」の前に section を入れて、そこの背景をwhiteにすると、これまでのパターンともマッチしますし、ロゴを表示する背景としてもベストかなと考えています 👍

@tomoko523
Copy link
Contributor Author

@yasulab あ、なるほど！devのgrayscale-bgで調整してたんですね！確認します！

@tomoko523
Copy link
Contributor Author

@yasulab
対応完了しました！
2017-01-12 18 21 47

ちなみに共通フッターから移動させたので、例えば/kataのページ等にはスポンサーが表示されませんがそれは問題ないですか？

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

みます! 👀

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

@tomoko523 背景が白色にできたので、greyscaleは取り外しちゃっても良さそうですね 👌

それが終わったらマージしましょう! 👍

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

(あと時間があればgit rebaseなどを使ってコミットログを綺麗に整えておくと完璧です💯)

@tomoko523
Copy link
Contributor Author

@yasulab

greyscaleは取り外しちゃっても良さそうですね

ホバー時の動きは不要ということですか？
参考URL先みたいに動きをつけた方がいいのかと思っていました:persevere:

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

ホバー時の動きは不要ということですか？

う、すみませんがそうしてもらえると助かります💦
理由としては、次のような点を懸念しています🤔

  1. 背景が白なのでロゴがカラフルでもconflictしない
  2. スポンサーさんから苦情が来る (色がないと... 😓 みたいな) 可能性が減る
  3. モバイル版ではホバーがそもそも機能しない

(参考イメージがあまり良くなかったですね... 🙇 🙇 💦 )

@tomoko523
Copy link
Contributor Author

わかりましたー＾＾！

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

ん、、、これ Table でやったほうが良さそうですね 🤔

screen shot 2017-01-12 at 18 53 39

@himajin315 さんのこの実装とかが参考になるかもしれない (言うのが遅かった...orz 💦 )
yasslab/railsguides.jp#155

@tomoko523
Copy link
Contributor Author

👀

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017

@tomoko523 キリのいいところまでやってもらえたらあとは引き継ぐので、その際はご連絡くださ〜い 🔔

@tomoko523
Copy link
Contributor Author

@yasulab
レスポンシブ対応は横幅880px以上で4列に表示、
720px以下560px未満の時は２列、560px以下は１列で表示しています。
ブレークポイントは元々のcssに記載があったものを参考にしました。

@yasulab
Copy link
Member

yasulab commented Jan 12, 2017 •
edited

@tomoko523 お疲れ様です! だんだん良くなってきていますね 😸

次の２点もやっておくと良さそうですが、時間も時間ですので、こちらは僕の方でやっておきますね ;)

  1. ロゴ画像の余白をいじって画像内のフォントサイズをできるだけ調整する
  2. ロゴとロゴの間 (縦と横) に空白を入れる

4列 (横に余白)

screen shot 2017-01-12 at 20 29 27

2列 (縦と横に余白)

screen shot 2017-01-12 at 20 29 58

1列 (縦の余白)

2017-01-12 20 34 14

@tomoko523
Copy link
Contributor Author

ありがとうございます！画像の文字の大きさは確かにきになります＞＜

@yasulab
Copy link
Member

yasulab commented Jan 13, 2017 •
edited

ロゴの余白などを調整し、かつ、使ってないCSSクラスなども削除しておきした〜 ✂️ また、４列だとどうしても縦幅が短くなってしっくりこなかったので、最終的には２列と１列だけで表示するようにしてみました ;)

問題なさそうなので、テストが通ったらマージしますね〜 cc/ @tomoko523

２列

2017-01-13 14 27 21

１列

2017-01-13 14 27 11

@yasulab yasulab merged commit 842ea94 into master Jan 13, 2017
@yasulab yasulab deleted the add-footer-logo branch January 13, 2017 05:32
@tomoko523
Copy link
Contributor Author

tomoko523 commented Jan 13, 2017 •
edited

@yasulab 対応ありがとうございますー！表示が綺麗になってますね＾＾

ちなみにcssのcursorが削除されていると思いますが、
それがないとPC上で画像をホバーしたときに
カーソルがリンクを表す矢印ではなく虫眼鏡になってしまいます＞＜

@yasulab yasulab mentioned this pull request Jan 18, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@tomoko523 @yasulab