【Laravel】スタンプカードのモーダル表示|Gridでのマス目の作り方

学習の備忘録です。タスク管理アプリを作っています。

今回は、スタンプカードのモーダル表示を実装していきます。

主に以前作成したモーダル表示のjsを活用し、スタンプカードの枠などの見た目の部分のHTML&CSSを新たに作っていくだけなのでとてもシンプルです。

モーダルの開く/閉じる処理については以下の記事にまとめていますので、そちらも参考にしていただければ幸いです。

本記事は個人の学習記録です。内容の正確性を保証するものではありませんので、あらかじめご了承ください。

imgタグのところにdata-openを追加

改修前のスタンプカードの部分は以下です。

<div class="stamp-area">
  <img class="stamp-icon" src="{{ asset('images/stamp_' . $stampCount . '.png') }}" alt="スタンプカード">
</div>

このimgタグのところにdata-openを追加します。

<div class="stamp-area">
  <img class="stamp-icon" src="{{ asset('images/stamp_' . $stampCount . '.png') }}" alt="スタンプカード"  data-open="stamp-card-modal">
</div>

headerタグ内に@includeを追加

今までのモーダル表示に倣い、モーダルを別ファイルにパート分けしてます。

そうやってパート分けされたファイル（_stamp_card_modal.blade.php）を@includeで追加表示できるようにします。

<div id="stamp-card-modal" class="modal-overlay"  data-close="stamp-card-modal">
  @include('tasks._stamp_card_modal', ['stampCount' => $stampCount])
</div>

この時の「_stamp_card_modal.blade.php」の中身は以下のようになっています。

<div class="modal-content">
  
</div>

何にも入っていませんが、class=”modal-content”のcssが効いて、この時点で以下のようにモーダル表示されるようになります。

ここまでが前準備です。

_stamp_card_modal.blade.phpの中身を書いていく

スタンプカードとして表示できるように、HTMLとCSSを調整していきます。

調整結果が以下です。

<div class="stamp-modal-content">
  <div class="stamp-text-area">
    <p class="stamp-text">STAMP</p>
  </div>
  <div class="stamp-grid">
    @for ($i=0; $i < 10; $i++)
      <div class="stamp-item">
        @if ($i < $stampCount)
          <p class="stamp-mark">●</p>
        @endif
      </div>
    @endfor
  </div>
</div>

/*スタンプカードのモーダル*/

.stamp-modal-content {
  background: white;
  padding: 36px;
  width: 800px;
  display: flex;
  flex-direction: column;

  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.stamp-text-area {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  background-color: #4CA0C4;
  border-radius: 10px 10px 0 0;
}

.stamp-text {
  font-size: 56px;
  letter-spacing: 24px;
}

.stamp-grid {
  display: grid;
  margin-top: 10px;
  grid-template-columns: repeat(5, 1fr);
  border-left: 5px solid #4CA0C4;  /* 左端の線 */
  border-bottom: 5px solid #4CA0C4;  /* 下端の線 */
}

.stamp-item {
  aspect-ratio: 1 / 1;  /* 正方形を保つ */
  border-top: 5px solid #4CA0C4;  /* 上の線 */
  border-right: 5px solid #4CA0C4;  /* 右の線 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.stamp-mark {
  color: #4CA0C4;
  font-size: 76px;
  margin: 0;
}

見た目はこんな感じになります。

今はシンプルに<p class=”stamp-mark”>●</p>でスタンプを表現していますが、imgなどで様々なスタンプを表示させることも可能です。

HTML概要

@for ($i=0; $i < 10; $i++)…@endfor
……スタンプカードのマスは全部で10マスなので、for文で1マスずつマスを作っていきます。

@if ($i < $stampCount)
……ここでも、「そのマスはスタンプ獲得済のマスか？」を確認して、スタンプを獲得しているなら「●」を表示させます。

CSS概要

.stamp-text-area（スタンプカードのタイトルを表示させる場所）と.stamp-grid（スタンプマスとスタンプを表示させる場所）で分けています。

ポイントとしては、.stamp-itemの中にborder: 5px solid #4CA0C4みたいに境界線を入れようとすると線が重複するので、.stamp-gridと.stamp-itemでそれぞれ線を設定します。

.stamp-gridに左端と下端の線を割り振り、.stamp-itemに上部と右の線を割り振ることで格子状のマス目になります。

その他、aspect-ratio: 1 / 1;でマス目を正方形にしたり線幅を調整したりしてスタンプカードモーダルは完成です！

静的にスタンプカードを表示させる設定については以上、そして、スタンプを獲得するアニメーション演出については以下で解説しています。

未読スタンプを判定してスタンプを獲得するために、今回記述した@if ($i < $stampCount)などは改修していきます。