PHP
HTML
bootstrap
laravel5.4

[問題解決記録]bladeテンプレートと画面崩れ

機能要件:

画面遷移:

「いいね」ボタんを押すと、ボタン自体は「いいねを取り消す」になる。
逆に、「いいねを取り消す」ボタンを押すと、「いいね」ボタンになる。

業務ロジックから分析すると:

ログイン中のユーザーがこの「いいね」ボタンを押した記録があれば、「いいねを取り消すボタン」が表示される。
逆に、ログイン中のユーザーがこの「いいね」ボタンを押した記録がなければ、「いいね」ボタンが表示される。

元のコードは以下です。

<div>
@if($post->zan(\Illuminate\Support\Facades\Auth::id())->exists())
<a href="/posts/{{$post->id}}/unzan" type="button" class="btn btn-default btn-lg">いいねを取り消す</a>
 </div>
@else
<div>
<a href="/posts/{{$post->id}}/zan" type="button" class="btn btn-primary btn-lg">いいね</a>
</div>
@endif

問題:「いいね」のボタンが画面に表示されるとき、画面崩れが発生します。

解決経緯:テンプレートのcssに問題があるかと辿った結果、post全体を格納するdivブロックが変化したと判明、

「いいね」のボタンが画面に表示されると、実際のドキュメント構造は:

<div>
  <div>
    <div></div>
</div>

以下のように、@ifの一文をdivブロックの前に置くと解決できます。

@if($post->zan(\Illuminate\Support\Facades\Auth::id())->exists())
<div>
<a href="/posts/{{$post->id}}/unzan" type="button" class="btn btn-default btn-lg">いいねを取り消す</a>
</div>
@else
<div>
<a href="/posts/{{$post->id}}/zan" type="button" class="btn btn-primary btn-lg">いいね</a>
</div>
@endif