ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile bottom action bar for video detail page

Browse Source
This commit is contained in:
ghassan 2026-03-03 19:12:45 +03:00
parent 1888f77886
commit 94a73cc74d
1 changed files with 81 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
resources/views/videos/show.blade.php
View File

@ -466,6 +466,42 @@
</div>
<!-- Mobile Bottom Action Bar -->
<div class="mobile-bottom-bar">
@auth
<form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline" style="flex:1;">
@csrf
<button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}" style="width:100%;">
<i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
<span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
</button>
</form>
@else
<a href="{{ route('login') }}" class="yt-action-btn" style="flex:1;text-align:center;">
<i class="bi bi-hand-thumbs-up"></i><span>Like</span>
</a>
@endauth
@if($video->isShareable())
<button class="yt-action-btn" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')" style="flex:1;">
<i class="bi bi-share"></i><span>Share</span>
</button>
@endif
@auth
@if(Auth::id() !== $video->user_id)
<button class="yt-action-btn" style="flex:1;background:var(--brand-red);color:white;">
<i class="bi bi-bell"></i><span>Subscribe</span>
</button>
@endif
@else
<a href="{{ route('login') }}" class="yt-action-btn" style="flex:1;background:var(--brand-red);color:white;text-align:center;">
<i class="bi bi-bell"></i><span>Subscribe</span>
</a>
@endauth
</div>
@include('layouts.partials.share-modal')
@include('layouts.partials.edit-video-modal')
@ -493,6 +529,51 @@
</script>
@endsection
/* Mobile Bottom Action Bar */
@media (max-width: 576px) {
.mobile-bottom-bar {
display: flex !important;
}
.desktop-actions {
display: none;
}
}
.mobile-bottom-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
padding: 12px 16px;
justify-content: space-around;
z-index: 1000;
gap: 8px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
.mobile-bottom-bar .yt-action-btn {
flex: 1;
justify-content: center;
padding: 12px 8px;
font-size: 12px;
min-height: 44px;
}
.mobile-bottom-bar .yt-action-btn i {
font-size: 18px;
}
@media (max-width: 576px) {
.yt-video-section {
padding-bottom: 70px;
}
}
<!-- Extra Mobile Styles -->
<style>
@media (max-width: 400px) {