野球リーグスコア管理システムとキャップ野球情報局に関する進捗です。
旧システムについてはこちらの記事をご覧ください。
5ケ月前の実装を引き継いでいます。git様様。
行を1つのコンポーネントにまとめて、ボタンで選手人数の変更に対応できるように実装しました。
ボタンは右に寄せようと思ってます。
あと数字入力コンポーネントは3桁入力できる幅でいいかなぁ。
サービス化するにあたって、サービス名の再検討とドメインの取得が必要になりますが、.jpドメインを取得するのでなければ、メール転送サービスがあるGoogle Domainsがよいとのアドバイスをいただきました。
上記に関連して、サービスリリースするならサービス名を再検討することにしました。
同僚のデザインできる方にレビューしていただきました。
本日は指摘事項をいくつか反映してタイムアップ。
.current:before{
content: '\f101';
font-family: 'Font Awesome 5 Free';
font-weight: bold;
padding-right:5px;
}
.current{
pointer-events: none;
}
シーズンごとにリストアイテム化していた試合日ですが、
今回アコーディオンの中に格納しました。
コンポーネントごとにstateを持ってdisplay:noneを切り替える方法を考えていたのですが、CSSで作るとトランジションが使えて表現が豊かになるのでこちらに変えました。
参考:CSSだけでアコーディオンを作る方法
昨日の時点で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>
)
document.getElementById('trophy').clientHeight + 22
this.setState({
height:document.getElementById('trophy').clientHeight
})
style={
{ height: this.state.height}}