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 "isEntry": true
}, },
"resources/scss/app.scss": { "resources/scss/app.scss": {
"file": "assets/app-B11bA3k4.css", "file": "assets/app-CKeq77Z2.css",
"src": "resources/scss/app.scss", "src": "resources/scss/app.scss",
"isEntry": true "isEntry": true
}, },

View file

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

View file

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

View file

@ -205,11 +205,11 @@
<ul class="movie-small-list movie-list-scroll" style="overflow: hidden; width: auto; height: 420px;"> <ul class="movie-small-list movie-list-scroll" style="overflow: hidden; width: auto; height: 420px;">
@foreach ($show['seasons'] as $currentSeason) @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'] }}" > <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'] }}"> <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="caojtyektj d-flex align-items-center flex-wrap ">
<div class="movie-small__thumb"> <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>
<div class="movie-small__content"> <div class="movie-small__content">
@ -227,13 +227,13 @@
</a> </a>
</li>
@if ($season && $season['season_number'] === $currentSeason['season_number']) @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"> <div class="episode-list d-flex align-items-center justify-content-center flex-wrap gap-3">
@foreach ($season['episodes'] as $episode) @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;"> <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'] }}"> <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) --}} {{-- @dump($episode) --}}
<p class="episode-title" style="width: 100%;">{{ $episode['name'] }}</p> <p class="episode-title" style="width: 100%;">{{ $episode['name'] }}</p>
@ -241,7 +241,9 @@
@endforeach @endforeach
</div> </div>
</div>
@endif @endif
</li>
@endforeach @endforeach
</ul> </ul>