いいねボタンの追加

resources/views/components/ejaculation.blade.php

@@ -0,0 +1,35 @@
+<!-- span -->
+<div class="d-flex justify-content-between">
+    <h5>
+        <a href="{{ route('user.profile', ['id' => $ejaculation->user->name]) }}" class="text-dark"><img src="{{ $ejaculation->user->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-bottom"> <bdi>{{ $ejaculation->user->display_name }}</bdi></a>
+        <a href="{{ route('checkin.show', ['id' => $ejaculation->id]) }}" class="text-muted"><small>{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></a>
+    </h5>
+    <div>
+        <button type="button" class="btn btn-link text-secondary like-button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="いいね" data-id="{{ $ejaculation->id }}" data-liked="{{ (bool)$ejaculation->is_liked }}"><span class="oi oi-heart {{ $ejaculation->is_liked ? 'text-danger' : '' }}"></span><span class="like-count">{{ $ejaculation->likes_count ? $ejaculation->likes_count : '' }}</span></button>
+        <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload"></span></button>
+    </div>
+</div>
+<!-- tags -->
+@if ($ejaculation->tags->isNotEmpty())
+    <p class="mb-2">
+        @foreach ($ejaculation->tags as $tag)
+            <a class="badge badge-secondary" href="{{ route('search', ['q' => $tag->name]) }}"><span class="oi oi-tag"></span> {{ $tag->name }}</a>
+        @endforeach
+    </p>
+@endif
+<!-- okazu link -->
+@if (!empty($ejaculation->link))
+    <div class="row mx-0">
+        @component('components.link-card', ['link' => $ejaculation->link])
+        @endcomponent
+        <p class="d-flex align-items-baseline mb-2 col-12 px-0">
+            <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
+        </p>
+    </div>
+@endif
+<!-- note -->
+@if (!empty($ejaculation->note))
+    <p class="mb-0 text-break">
+        {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
+    </p>
+@endif

resources/views/ejaculation/show.blade.php

@@ -33,10 +33,11 @@
                         <div class="d-flex justify-content-between">
                             <h5>{{ $ejaculatedSpan ?? '精通' }} <small class="text-muted">{{ $ejaculation->before_date }}{{ !empty($ejaculation->before_date) ? ' ～ ' : '' }}{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></h5>
                             <div>
-                                <a class="text-secondary timeline-action-item" href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン"></span></a>
+                                <button type="button" class="btn btn-link text-secondary like-button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="いいね" data-id="{{ $ejaculation->id }}" data-liked="{{ (bool)$ejaculation->is_liked }}"><span class="oi oi-heart {{ $ejaculation->is_liked ? 'text-danger' : '' }}"></span><span class="like-count">{{ $ejaculation->likes_count ? $ejaculation->likes_count : '' }}</span></button>
+                                <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload"></span></button>
                                 @if ($user->isMe())
-                                    <a class="text-secondary timeline-action-item" href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil" data-toggle="tooltip" data-placement="bottom" title="修正"></span></a>
-                                    <a class="text-secondary timeline-action-item" href="#" data-target="#deleteCheckinModal" data-id="{{ $ejaculation->id }}" data-date="{{ $ejaculation->ejaculated_date }}"><span class="oi oi-trash" data-toggle="tooltip" data-placement="bottom" title="削除"></span></a>
+                                    <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="修正" data-href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil"></span></button>
+                                    <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="削除" data-target="#deleteCheckinModal" data-id="{{ $ejaculation->id }}" data-date="{{ $ejaculation->ejaculated_date }}"><span class="oi oi-trash"></span></button>
                                 @endif
                             </div>
                         </div>

resources/views/home.blade.php

@@ -55,40 +55,8 @@
                 <ul class="list-group">
                     @foreach ($publicLinkedEjaculations as $ejaculation)
                         <li class="list-group-item no-side-border pt-3 pb-3 text-break">
-                            <!-- span -->
-                            <div class="d-flex justify-content-between">
-                                <h5>
-                                    <a href="{{ route('user.profile', ['id' => $ejaculation->user->name]) }}" class="text-dark"><img src="{{ $ejaculation->user->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-bottom"> <bdi>{{ $ejaculation->user->display_name }}</bdi></a>
-                                    <a href="{{ route('checkin.show', ['id' => $ejaculation->id]) }}" class="text-muted"><small>{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></a>
-                                </h5>
-                                <div>
-                                    <a class="text-secondary timeline-action-item" href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン"></span></a>
-                                </div>
-                            </div>
-                            <!-- tags -->
-                            @if ($ejaculation->tags->isNotEmpty())
-                                <p class="mb-2">
-                                    @foreach ($ejaculation->tags as $tag)
-                                        <a class="badge badge-secondary" href="{{ route('search', ['q' => $tag->name]) }}"><span class="oi oi-tag"></span> {{ $tag->name }}</a>
-                                    @endforeach
-                                </p>
-                            @endif
-                            <!-- okazu link -->
-                            @if (!empty($ejaculation->link))
-                                <div class="row mx-0">
-                                    @component('components.link-card', ['link' => $ejaculation->link])
-                                    @endcomponent
-                                    <p class="d-flex align-items-baseline mb-2 col-12 px-0">
-                                        <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
-                                    </p>
-                                </div>
-                            @endif
-                            <!-- note -->
-                            @if (!empty($ejaculation->note))
-                                <p class="mb-0 text-break">
-                                    {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
-                                </p>
-                            @endif
+                            @component('components.ejaculation', compact('ejaculation'))
+                            @endcomponent
                         </li>
                     @endforeach
                     <li class="list-group-item no-side-border text-right">

resources/views/search/index.blade.php

@@ -7,43 +7,8 @@
         <ul class="list-group">
         @foreach($results as $ejaculation)
             <li class="list-group-item border-bottom-only pt-3 pb-3 text-break">
-                <!-- span -->
-                <div class="d-flex justify-content-between">
-                    <h5>
-                        <a href="{{ route('user.profile', ['id' => $ejaculation->user->name]) }}" class="text-dark"><img src="{{ $ejaculation->user->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-bottom"> <bdi>{{ $ejaculation->user->display_name }}</bdi></a>
-                        <a href="{{ route('checkin.show', ['id' => $ejaculation->id]) }}" class="text-muted"><small>{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></a>
-                    </h5>
-                    <div>
-                        <a class="text-secondary timeline-action-item" href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン"></span></a>
-                    </div>
-                </div>
-                <!-- tags -->
-                @if ($ejaculation->is_private || $ejaculation->tags->isNotEmpty())
-                    <p class="mb-2">
-                        @if ($ejaculation->is_private)
-                            <span class="badge badge-warning"><span class="oi oi-lock-locked"></span> 非公開</span>
-                        @endif
-                        @foreach ($ejaculation->tags as $tag)
-                            <a class="badge badge-secondary" href="{{ route('search', ['q' => $tag->name]) }}"><span class="oi oi-tag"></span> {{ $tag->name }}</a>
-                        @endforeach
-                    </p>
-                @endif
-                <!-- okazu link -->
-                @if (!empty($ejaculation->link))
-                    <div class="row mx-0">
-                        @component('components.link-card', ['link' => $ejaculation->link])
-                        @endcomponent
-                        <p class="d-flex align-items-baseline mb-2 col-12 px-0">
-                            <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
-                        </p>
-                    </div>
-                @endif
-                <!-- note -->
-                @if (!empty($ejaculation->note))
-                    <p class="mb-0 text-break">
-                        {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
-                    </p>
-                @endif
+                @component('components.ejaculation', compact('ejaculation'))
+                @endcomponent
             </li>
         @endforeach
         </ul>

resources/views/timeline/public.blade.php

@@ -11,43 +11,8 @@
         <div class="row mx-1">
             @foreach($ejaculations as $ejaculation)
                 <div class="col-12 col-lg-6 col-xl-4 py-3 text-break border-top">
-                    <!-- span -->
-                    <div class="d-flex justify-content-between">
-                        <h5>
-                            <a href="{{ route('user.profile', ['id' => $ejaculation->user->name]) }}" class="text-dark"><img src="{{ $ejaculation->user->getProfileImageUrl(30) }}" width="30" height="30" class="rounded d-inline-block align-bottom"> <bdi>{{ $ejaculation->user->display_name }}</bdi></a>
-                            <a href="{{ route('checkin.show', ['id' => $ejaculation->id]) }}" class="text-muted"><small>{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></a>
-                        </h5>
-                        <div>
-                            <a class="text-secondary timeline-action-item" href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン"></span></a>
-                        </div>
-                    </div>
-                    <!-- tags -->
-                    @if ($ejaculation->is_private || $ejaculation->tags->isNotEmpty())
-                        <p class="mb-2">
-                            @if ($ejaculation->is_private)
-                                <span class="badge badge-warning"><span class="oi oi-lock-locked"></span> 非公開</span>
-                            @endif
-                            @foreach ($ejaculation->tags as $tag)
-                                <a class="badge badge-secondary" href="{{ route('search', ['q' => $tag->name]) }}"><span class="oi oi-tag"></span> {{ $tag->name }}</a>
-                            @endforeach
-                        </p>
-                    @endif
-                    <!-- okazu link -->
-                    @if (!empty($ejaculation->link))
-                        <div class="row mx-0">
-                            @component('components.link-card', ['link' => $ejaculation->link])
-                            @endcomponent
-                            <p class="d-flex align-items-baseline mb-2 col-12 px-0">
-                                <span class="oi oi-link-intact mr-1"></span><a class="overflow-hidden" href="{{ $ejaculation->link }}" target="_blank" rel="noopener">{{ $ejaculation->link }}</a>
-                            </p>
-                        </div>
-                    @endif
-                    <!-- note -->
-                    @if (!empty($ejaculation->note))
-                        <p class="mb-0 text-break">
-                            {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
-                        </p>
-                    @endif
+                    @component('components.ejaculation', compact('ejaculation'))
+                    @endcomponent
                 </div>
             @endforeach
         </div>

resources/views/user/profile.blade.php

@@ -39,10 +39,11 @@
                 <div class="d-flex justify-content-between">
                     <h5>{{ $ejaculation->ejaculated_span ?? '精通' }} <a href="{{ route('checkin.show', ['id' => $ejaculation->id]) }}" class="text-muted"><small>{{ $ejaculation->before_date }}{{ !empty($ejaculation->before_date) ? ' ～ ' : '' }}{{ $ejaculation->ejaculated_date->format('Y/m/d H:i') }}</small></a></h5>
                     <div>
-                        <a class="text-secondary timeline-action-item" href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン"></span></a>
+                        <button type="button" class="btn btn-link text-secondary like-button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="いいね" data-id="{{ $ejaculation->id }}" data-liked="{{ (bool)$ejaculation->is_liked }}"><span class="oi oi-heart {{ $ejaculation->is_liked ? 'text-danger' : '' }}"></span><span class="like-count">{{ $ejaculation->likes_count ? $ejaculation->likes_count : '' }}</span></button>
+                        <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="同じオカズでチェックイン" data-href="{{ route('checkin', ['link' => $ejaculation->link, 'tags' => $ejaculation->textTags()]) }}"><span class="oi oi-reload"></span></button>
                         @if ($user->isMe())
-                            <a class="text-secondary timeline-action-item" href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil" data-toggle="tooltip" data-placement="bottom" title="修正"></span></a>
-                            <a class="text-secondary timeline-action-item" href="#" data-target="#deleteCheckinModal" data-id="{{ $ejaculation->id }}" data-date="{{ $ejaculation->ejaculated_date }}"><span class="oi oi-trash" data-toggle="tooltip" data-placement="bottom" title="削除"></span></a>
+                            <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="修正" data-href="{{ route('checkin.edit', ['id' => $ejaculation->id]) }}"><span class="oi oi-pencil"></span></button>
+                            <button type="button" class="btn btn-link text-secondary" data-toggle="tooltip" data-placement="bottom" title="削除" data-target="#deleteCheckinModal" data-id="{{ $ejaculation->id }}" data-date="{{ $ejaculation->ejaculated_date }}"><span class="oi oi-trash"></span></button>
                         @endif
                     </div>
                 </div>