チームページのレイアウトを新しくしました

各チームのトップページに新たに大きな写真を採用し、チーム名の縦置きレイアウトを廃止しました。テーマカラーの表示は維持しつつ、横置きに変更しました。
レスポンシブで最大横幅を1000pxにし、基本2カラム、スマホは1カラムにしています。
チーム紹介とメンバー紹介はだいぶteamsの影響を受けました。

チーム紹介

メンバー紹介

自分で入力した自己紹介の一部を表示するようにしました。

戦績

試合結果一覧のデザインを取り込みました。
若干デザイン崩れなので再考の余地ありというところです。

選手成績

元々打撃・投手成績タブに分けていたものを統合しました。

割と思い付きで機能を作ってしまう方なのですが、
(旧バージョンの情報局でムダとなった機能をリニューアル時に捨てた)
今回はブラウザで作れる野球選手カードについて。

CSSで画像を装飾する

フレームを作る

画像を見てやり方に気づいた方はご名答。
角のフレームは四角形を傾けて重ねてるだけなのです。
transform 15degで15度傾けて表示しています。
親要素をrelativeにし、この要素自体をabsoluteにすると
位置調整ができます。

<div
            style={{
              position: "absolute",
              transform: "rotate(15deg)",
              bottom: -40,
              right: 5,
              width: 350,
              height: 100,
              backgroundColor: "色を指定",
            }}
          />

はみ出した部分をカットする

親要素の大きさを指定して、overflow:hidden
とすると、はみ出した要素を非表示にできます。

<div
        style={{
          width: 340,
          height:450,
          backgroundColor:'#e6e6e6',
          overflow: "hidden",
          position: "relative",
        }}
      />

写真に丸アイコンを載せる

div要素のbackgroundImageに画像を指定して、
border-radius 50%で丸にします。
div要素の高さはwidth,heightで指定し、
画像の大きさはbackground-sizeで調整します。

親要素をrelativeにし、この要素自体をabsoluteにすると
位置調整ができます。

<div
            style={{
              width: 80,
              height: 80,
              border:'2px solid white',
              backgroundSize: "80px 80px",
              backgroundImage: `url('画像のURL')`,
              backgroundRepeat: "no-repeat",
              backgroundPosition: "center center",
              position: "absolute",
              display: "inline-block",
              borderRadius: "50%",
              top: 3,
              left: 3,
            }}
          />

CSSで遊ぶって楽しい!

これまでも色々CSSで遊んできたので比較的サクッと実装できました。(ただし不評)

• WEB技術で複雑なUIの再現に挑戦しました
• CSSアニメーションでトランザム！

ランディングページの実装

カルーセルのtouch対応

先日の記事でreact-slideshowを推しましたが、スワイプに対応していないという問題があったのでいくつかtouchイベントに対応しているカルーセルコンポーネントを調査しました。

• react-slideshow
  • touchイベント未対応。imgタグなくても使える。
• react-responsive-carousel
  • 機能は豊富。imgタグ必須。ない場合はエラーで落ちる
• react-slick
  • 機能は最小限だがスワイプ対応

react-slick、君に決めた！

LINE風CSSの適用

会社の同僚にアイデアをもらったので自力で実装してみました。

 <div style={{
        padding:5
       }}
     >
            <div className="question">掲載料金はかかりますか？</div>             
            <div className="answer">いいえ。料金はかかりません.</div>
            <div className="question">データはどうやって登録するのですか？</div>
            <div className="answer">現在、運営がデータを入力する形となっていますのでデータをお送りください。</div>
        </div>

.question{
  width: 70%;
  position: relative;
  padding: 10px;
  background-color: #f2f3f7;
  font-size: 16px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 5px;
}
.answer{
  width: 70%;
  position: relative;
  left:50px;
  padding: 10px;
  background-color: #fde5e5;
  padding: 10px;
  font-size: 16px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 5px;
}

• 参考: LINE風の吹き出しの会話をCSSで作ってみる

webフォントの軽量化

https://gist.github.com/manabuyasuda/b5c867a7cbd17d1eb905b3a8cfd621a6

flexboxを実装する

今回はグリッドレイアウトを使わずにflex-boxを使いました。
幅500pxを境界に、flex-directionを切り替えるメディアクエリを書きます。flex-directionを切り替えるのと同時に画像をウインドウの50%か100%に切り替えます。
サイズの異なる画像を並べるのにobject-fit : coverが便利でした。

JSX

const imageLink = (toLink,image_url,text) => {
    return(
          <div 
            style={{
              position:'relative'
            }}
          >
            <div
              style={{
                fontSize: 20,
                cursor:'pointer',
                position:'relative'
              }}
              onClick={()=>{
                window.location.href= toLink
              }}
            >
              <img 
                style={{
                  height:'20vh',
                  objectFit:'cover'
                }}
                src={image_url}/>
              <span
                  style={{
                    fontSize: 20,
                    color:'aliceblue',
                    textShadow:'2px 2px 2px black',
                    position:'absolute',
                    top:0,
                    left:0
                  }}
                >{text}
              </span>
            </div>
          </div>
    )
  }

CSS

@media(max-width:500px){
  .flex-parent{
    display: flex;
    flex-direction: column;
  }
  .flex-parent img{
    width: 100vw;
  }
}
@media(min-width:501px){
  .flex-parent{
    display: flex;
    flex-direction: row;
  }
  .flex-parent img{
    width: 50vw;
  }
}

参考
- Flexbox【第1回】並べる方向 〜flex-direction編〜
- 縦横比の違う画像を均等に横並びにする方法
- 画像の上におしゃれに文字やボタンをのせる方法

概要

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

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

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

コンポーネントごとに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>
            )

2. idを元にclientHeightを計算する
   trophyというidを要素につけてclientHeightを計算します。
   22はカードのタイトル分の高さです。

document.getElementById('trophy').clientHeight + 22

3. stateにセットしてstyleに記述する

this.setState({
   height:document.getElementById('trophy').clientHeight
  })

style={
{ height: this.state.height}}