add episode list

This commit is contained in:
Constantin Plaiasu 2024-09-09 19:59:41 +03:00
parent 1f880dcf09
commit 7c76ca9cfd
5 changed files with 45 additions and 36 deletions

File diff suppressed because one or more lines are too long

View file

@ -36,7 +36,7 @@
"isEntry": true
},
"resources/scss/app.scss": {
"file": "assets/app-B11bA3k4.css",
"file": "assets/app-CKeq77Z2.css",
"src": "resources/scss/app.scss",
"isEntry": true
},

View file

@ -155,16 +155,16 @@ a:hover {
background-color: $secondary;
}
@media (min-width: 1200px) {
.movie-small::after {
.movie-small > a::after {
position: absolute;
content: attr(data-text);
top: 15px;
left: 30px;
top: 30px;
left: 15px;
background-color: $primary !important;
color: #fff;
font-size: 12px;
padding: 1px 6px;
border-radius: 0 3px 3px 0;
border-radius: 5px 0px 3px 0;
animation: pulse 1s infinite;
}
}

View file

@ -2515,21 +2515,28 @@ a:hover {
}
.movie-details-content .movie-small-list .movie-small {
padding: 15px 15px 15px 40px;
padding-top: 15px;
padding-bottom: 0;
position: relative;
cursor: pointer;
scroll-margin-top:70px;
&.open {
scroll-margin-top:70px;
}
> a {
padding: 15px;
}
}
.movie-details-content .movie-small-list .movie-small::before {
position: absolute;
counter-increment: section;
content: counter(section);
color: #ffffff;
top: 50%;
left: 14px;
margin-top: -10px;
}
// .movie-details-content .movie-small-list .movie-small::before {
// position: absolute;
// counter-increment: section;
// content: counter(section);
// color: #ffffff;
// top: 50%;
// left: 14px;
// margin-top: -10px;
// }
.movie-details-list li {
display: -ms-flexbox;
@ -3879,7 +3886,7 @@ li.open {
// }
.episode-list {
padding: 1.5rem 1rem;
padding: 1rem 0rem;
.episode {
img {
@ -3894,7 +3901,7 @@ li.open {
color: #fff;
font-size: 12px;
padding: 1px 6px;
border-radius: 0 3px 3px 0;
// border-radius: 0 0 3px 0;
animation: pulse 1s infinite;
}
.episode-title {

View file

@ -205,11 +205,11 @@
<ul class="movie-small-list movie-list-scroll" style="overflow: hidden; width: auto; height: 420px;">
@foreach ($show['seasons'] as $currentSeason)
<li id="season-{{ $currentSeason['season_number'] }}" class="movie-small movie-item__overlay video-item @if ($season && $season['season_number'] === $currentSeason['season_number']) open @endif" data-text="Season {{ $currentSeason['season_number'] }}" >
<a class="d-flex align-items-center justify-content-between w-100" href="{{ route('show.season', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $currentSeason['season_number']]) . '#season-' . $currentSeason['season_number'] }}">
<li id="season-{{ $currentSeason['season_number'] }}" class="movie-small movie-item__overlay video-item @if ($season && $season['season_number'] === $currentSeason['season_number']) open @endif" >
<a class="d-flex align-items-center justify-content-between w-100" href="{{ route('show.season', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $currentSeason['season_number']]) . '#season-' . $currentSeason['season_number'] }}" data-text="Season {{ $currentSeason['season_number'] }}">
<div class="caojtyektj d-flex align-items-center flex-wrap ">
<div class="movie-small__thumb">
<img class="lazy" width="120" height="180" src="data:image/svg+xml,%3Csvg width='120' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='120' height='180' x='0' y='0' fill='%23#1B1B3F' /%3E%3C/svg%3E" data-src="{{ $currentSeason['poster'] }}" alt="image">
<img @if($currentSeason['poster'])class="lazy"@endif width="120" height="180" src="data:image/svg+xml,%3Csvg width='120' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='120' height='180' x='0' y='0' fill='%230d0d31' /%3E%3C/svg%3E" @if($currentSeason['poster'])class="lazy" data-src="{{ $currentSeason['poster'] }}" @endif alt="image">
</div>
<div class="movie-small__content">
@ -227,21 +227,23 @@
</a>
@if ($season && $season['season_number'] === $currentSeason['season_number'])
<div style="display: inline-block; background-color:rgba(0, 0, 0, 0.1); margin-top:1rem; width:100%;">
<div class="episode-list d-flex align-items-center justify-content-center flex-wrap gap-3">
@foreach ($season['episodes'] as $episode)
<a href="{{ route('show.episode', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $episode['season_number'], 'episode' => $episode['episode_number']]) }}" class="episode " data-label="E{{ $episode['label'] }}" style="min-width: 160px;">
<img @if($episode['backdrop'])class="lazy"@endif width="200" height="113" src="data:image/svg+xml,%3Csvg width='200' height='113' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='200' height='113' x='0' y='0' fill='%230d0d31' /%3E%3C/svg%3E" @if($episode['backdrop']) data-src="{{ $episode['backdrop'] }}" @endif alt="Episode {{ $episode['episode_number'] }}">
{{-- @dump($episode) --}}
<p class="episode-title" style="width: 100%;">{{ $episode['name'] }}</p>
</a>
@endforeach
</div>
</div>
@endif
</li>
@if ($season && $season['season_number'] === $currentSeason['season_number'])
<div class="episode-list d-flex align-items-center justify-content-center flex-wrap gap-3">
@foreach ($season['episodes'] as $episode)
<a href="{{ route('show.episode', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $episode['season_number'], 'episode' => $episode['episode_number']]) }}" class="episode " data-label="E{{ $episode['label'] }}" style="min-width: 160px;">
<img @if($episode['backdrop'])class="lazy"@endif width="200" height="113" src="data:image/svg+xml,%3Csvg width='200' height='113' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='200' height='113' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" @if($episode['backdrop']) data-src="{{ $episode['backdrop'] }}" @endif alt="Episode {{ $episode['episode_number'] }}">
{{-- @dump($episode) --}}
<p class="episode-title" style="width: 100%;">{{ $episode['name'] }}</p>
</a>
@endforeach
</div>
@endif
@endforeach
</ul>