野球リーグスコア管理システムの開発

2019-01-13に作成

image
野球リーグスコア管理システムキャップ野球情報局に関する進捗です。

使っている技術など

  • NodeJS
  • ReactJS
  • netlify
  • MySQL
  • materializecss
  • react-bootstrap
  • react-bootstrap-table-next

旧システムについてはこちらの記事をご覧ください。

残りタスクリスト

trello

所有者限定モードのためこのボードには投稿できません ボードとは?

6/9進捗

UI

スコア入力実装

5ケ月前の実装を引き継いでいます。git様様。
行を1つのコンポーネントにまとめて、ボタンで選手人数の変更に対応できるように実装しました。

image
ボタンは右に寄せようと思ってます。
あと数字入力コンポーネントは3桁入力できる幅でいいかなぁ。

Google Domainsの検討

サービス化するにあたって、サービス名の再検討とドメインの取得が必要になりますが、.jpドメインを取得するのでなければ、メール転送サービスがあるGoogle Domainsがよいとのアドバイスをいただきました。

サービス名の検討

上記に関連して、サービスリリースするならサービス名を再検討することにしました。

2/12進捗

UI

デザイン修正概要

image
同僚のデザインできる方にレビューしていただきました。
本日は指摘事項をいくつか反映してタイムアップ。

ヘッダ

  • ヘッダタイトルの左側にpaddingつけた

メニュー

  • バーガーボタンのhover時の色修正
  • メニューのhoverの色を変えた
  • メニューhover時の範囲を変えた
  • メニューで現在のページ位置表示
.current:before{
  content: '\f101';
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  padding-right:5px; 
}
  • 現在いるページのメニューを選択できなくする
.current{
  pointer-events: none;
}
  • 外部リンクに遷移することを示すアイコンをつけた

試合結果一覧

  • アコーディオン内のリストをシンプルにした

2/10進捗

概要

  • 試合結果一覧をアコーディオン化
  • 個人タイトルのカード化

試合結果一覧をアコーディオン化

image

シーズンごとにリストアイテム化していた試合日ですが、
今回アコーディオンの中に格納しました。

コンポーネントごとにstateを持ってdisplay:noneを切り替える方法を考えていたのですが、CSSで作るとトランジションが使えて表現が豊かになるのでこちらに変えました。
参考:CSSだけでアコーディオンを作る方法

個人タイトルのカード化

image
昨日の時点でheightが0になってしまってどうしようもなかった問題ですが、
1. BootstrapTableにidを設定する
BootstrapTableにはidというプロパティがないので外側のdivに設定しました。

return (
                <div className='col s12'
                    id={this.props.id}>
                    <BootstrapTable 
                        keyField={this.props.keyField}
                        data={this.props.data}
                        columns={this.props.columns}  />
                </div>
            )

  1. idを元にclientHeightを計算する
    trophyというidを要素につけてclientHeightを計算します。
    22はカードのタイトル分の高さです。
document.getElementById('trophy').clientHeight + 22
  1. stateにセットしてstyleに記述する
this.setState({
   height:document.getElementById('trophy').clientHeight
  })
style={
{ height: this.state.height}}