チェックインに対する操作ボタンの位置を変更

resources/assets/sass/app.scss

@@ -14,10 +14,16 @@ $primary: #e53fb1;
 // Components
 @import "components/link-card";
 
+.ejaculation-actions {
+  & > button:not(:last-child) {
+    margin-right: 24px;
+  }
+}
+
 .like-button {
   text-decoration: none !important;
 }
 
 .like-count:not(:empty) {
-  padding-left: 0.25rem;
+  padding-left: 0.5rem;
 }

resources/views/components/ejaculation.blade.php

@@ -1,13 +1,9 @@
 <!-- span -->
-<div class="d-flex justify-content-between flex-column flex-lg-row">
+<div>
     <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 class="d-flex justify-content-between mb-2 mb-lg-0">
-        <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())
@@ -29,7 +25,16 @@
 @endif
 <!-- note -->
 @if (!empty($ejaculation->note))
-    <p class="mb-0 text-break">
+    <p class="mb-2 text-break">
         {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
     </p>
 @endif
+<!-- actions -->
+<div class="ejaculation-actions">
+    <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>
+    <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>
+</div>

resources/views/ejaculation/show.blade.php

@@ -30,16 +30,8 @@
                 <div class="card">
                     <div class="card-body">
                         <!-- span -->
-                        <div class="d-flex justify-content-between flex-column flex-lg-row">
+                        <div>
                             <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 class="d-flex justify-content-between mb-2 mb-lg-0">
-                                <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())
-                                    <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>
                         <!-- tags -->
                         @if ($ejaculation->is_private || $ejaculation->tags->isNotEmpty())
@@ -64,10 +56,19 @@
                         @endif
                         <!-- note -->
                         @if (!empty($ejaculation->note))
-                            <p class="mb-0 text-break">
+                            <p class="mb-2 text-break">
                                 {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
                             </p>
                         @endif
+                        <!-- actions -->
+                        <div class="ejaculation-actions">
+                            <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>
+                            <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>
+                            @if ($user->isMe())
+                                <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>
                 </div>
             @endif

resources/views/user/profile.blade.php

@@ -36,16 +36,8 @@
         @forelse ($ejaculations as $ejaculation)
             <li class="list-group-item border-bottom-only pt-3 pb-3 text-break">
                 <!-- span -->
-                <div class="d-flex justify-content-between flex-column flex-lg-row">
+                <div>
                     <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 class="d-flex justify-content-between mb-2 mb-lg-0">
-                        <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())
-                            <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>
                 <!-- tags -->
                 @if ($ejaculation->is_private || $ejaculation->tags->isNotEmpty())
@@ -70,10 +62,19 @@
                 @endif
                 <!-- note -->
                 @if (!empty($ejaculation->note))
-                    <p class="mb-0 text-break">
+                    <p class="mb-2 text-break">
                         {!! Formatter::linkify(nl2br(e($ejaculation->note))) !!}
                     </p>
                 @endif
+                <!-- actions -->
+                <div class="ejaculation-actions">
+                    <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>
+                    <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>
+                    @if ($user->isMe())
+                        <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>
             </li>
         @empty
             <li class="list-group-item border-bottom-only">