デザインリニューアル

[yamasy1549]

• [x] UIを全体的に見直し・修正

Memo

Colors

font -> #666666 main -> #5e98a3 other -> #80991a #fffdef #a14c4c background ->

Rules

• sideareaとmainareaにわける
• headerはつくらない方向（sidebarに吸収？）
• 時間割一覧など、項目が多数ある場合は1つずつborderで囲う（hover時に文字色と背景色を反転）
• パンくずをつくる
• border-radius: 2px
• [ ] 脱・Bootstrap
• [x] Bourbon（べんりmixin集）
• [ ] Neat（グリッド）
• [ ] Bitters（タイポグラフィー）
• [ ] Refills （components）

余裕があれば

• [ ] ちょっと合ってないFontawesomeを自作フォントに置き換え

[yamasy1549]

View

スタッフ用

• [x] 変更の一覧 /staffs/home
• [x] 時間割を変更 /staffs/reschedulings/new
  • [x] クラスから選択 /staffs/reschedulings/change/classes
  • [x] 教員から選択 /staffs/reschedulings/change/lecturers
  • [x] モーダル
• [x] 時間割の一覧 /staffs/classes
  • [x] クラスの時間割 /staffs/classes/:id/timetable
  • [x] 教員の時間割 /staffs/lecturers/:id/timetable
• [x] 教員データの一覧 /staffs/lecturers
• [x] 時間割データを読み込み /staffs/timetables/new
• [x] スタッフを管理 /staffs/staffs

View A

一般用

• [x] 時間割の一覧 /classes
  • [x] クラスの時間割 /classes/:id/timetable
• [x] 教員の一覧 /lecturers
  • [x] 教員の時間割 /lecturers/:id/timetable
• [x] 変更の一覧 /reschedulings

共通

• [x] ランディングページ /

その他

• Sidebar

[yamasy1549]

@izumin5210 デザインつくってみました:yum:

[izumin5210]

[izumin5210]

各コンテンツタイトルとパンくずが全て一致しちゃってるのだけ気になるかも どっちかいらない？

[yamasy1549]

View A

コンテンツタイトル消してみたver.

[yamasy1549]

View B

変えてみた

スタッフ用

一般用

[yamasy1549]

ランディングページ案 マサカリ投げてください

[izumin5210]

ランディングページはヘッダとフッタの色が同じなら右かなあ 別の色にできるならわからん

[izumin5210]

その他のページはだいぶ引き締まっていいかんじ 個人的には好き ただ，activeなページの右の三角がちょっとうるさい気もする（左右を三角に挟まれることになる

[yamasy1549]

View B

sidebarの項目でactiveなことを表現しようと思ったけど、背景が#666だからやりにくかったので右三角つけました:frowning: sidebarの△がないと味気ないし（↓）、右三角がないのもactiveページがどこかわかりづらそう…

左三角（sidebar）なしver.

[izumin5210]

太字にするとかでもありかなーと思った もしかして三角が超尖ってるのが気になってるだけなのかもしれないｗ

[yamasy1549]

View C

あくまで△をつけたかった

[izumin5210]

凹んでるっぽいのいい:+1+ 右の三角はやっぱり鋭角すぎる気がする… ちょっとマイルドしたらどうなるん？

[yamasy1549]

View C

こうなる （あんま変わってない…？もっとやるべきか）

[izumin5210]

あ，角丸じゃなくてfa-caret-rightぐらいの角度？

[yamasy1549]

View C

こういう

[izumin5210]

そういう どっちがいいとおもう？

[yamasy1549]

左のと整合を取るならfa-caretのほうがいいのか:open_mouth:

[yamasy1549]

View C

時間割変更のモーダル

[yamasy1549]

ランディングページ

[yamasy1549]

@izumin5210

確認・マサカリおねがいします:rabbit2: https://drive.google.com/open?id=0B4W0oQHtQrwUV0xtVWdiazdfamM&authuser=0 https://drive.google.com/open?id=0B4W0oQHtQrwUMWt4QVJJeHgxaFk&authuser=0

[izumin5210]

大体OKじゃないかなー:+1: 入れ替え時のUIがないけど，そこはちゃんと話し合いながら詰めないといけない気がするからとりあえずpendingにしておこう:hand:

実装に移りますかー？

[yamasy1549]

入れ替えUIりょうかいですー:oden:

そろそろ実装はじめます:+1:

[izumin5210]

FYI

|-- application.css.scss
|-- components/               # 共通components
|   |--  _buttons.scss
|   `-- _modals.scss
|-- headers/                  # 変数，関数．mixin
|   |-- _colors.scss
|   |-- _variables.scss
|   `-- _mixins.scss
|-- lib/                      # 外部ライブラリ，プラグイン等
|-- shared/
|   |-- _global_menu.scss     # 全ページで利用するスタイル
|   `-- _helpers.scss
`-- layouts/                  # ネームスペース固有のスタイルを入れる
    `-- staff/                # ネームスペース
        |-- components/       # このネームスペースでしか使わない components を入れる
        |-- headers/
        |-- lib/
        |-- common/
        `-- views/  # ページ固有のスタイルを入れる
            |-- reschedulings.css.scss   # コントローラ全体
            `-- reschedulings/
                |-- index.css.scss  # アクション単位
                `-- show.css.scss

前に参考として送ったやつの小規模版（ネームスペース切ってたところを省略した）． そんなにスケーリングすることもないはずなのでこれで足りるはず．たぶん．