add episode list
This commit is contained in:
parent
1f880dcf09
commit
7c76ca9cfd
5 changed files with 45 additions and 36 deletions
File diff suppressed because one or more lines are too long
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue