今日のYWT

やったこと

Travelog

• デザイン

  • ユーザー関連ページのデザイン完了

• 交流会に参加してフィードバックもらう

  • いじる前のデザインのほうがシンプルで良いと言われる
  • デザインをシンプルに
    • navbarの色を濃い緑に
    • card-headerの背景色を消去
    • cardのbox-shadowを上下左右すべてにつけて浮いてるようにする

• 追加のデザイン

  • navbarのマイページ・ログアウトがactiveになったときの背景色変更

• 画像のある記事が2つ以上ある時、古い記事のカルーセル矢印ボタンを押すと一番新しい記事の画像が切り替わってしまう不具合を発見したので対処する

わかったこと

カルーセルの扱い

原因

カルーセルのdata-targetを、固定値で設定してしまっていた
→本来は画像ごと・記事ごとに設定するべきだった

解決のためにやったこと

まず、カルーセルを定義している一番外側のdivに記事ごとのidをセット
html
<div id="carousel-{{ $article->id }}" class="carousel slide carousel-fade mt-2" data-ride="carousel" data-interval="false">


<ol>で囲まれたインディケーターの<li>要素のdata-target属性に、上でつけたidと同じものをセット

<li data-target="#carousel-{{ $article->id }}" data-slide-to="{{$loop->index}}" class="active"></li>

画像を切り替えるためのボタンのhref属性にも上でつけたのと同じものをセット

  <a class="carousel-control-prev" href="#carousel-{{ $article->id }}" role="button" data-slide="prev">
  <a class="carousel-control-next" href="#carousel-{{ $article->id }}" role="button" data-slide="next">

これで完成。

CSSの疑似要素active

クリックしている時

次やること

• デザイン完全に終わらせる
• SendGridの設定
• GoogleAPIの設定
• LP作成