Skip to content

Commit ef0beb5

Browse files
RoardomRoardom
committed
update: use an extra tag row for meta
The extra information column is getting too long for content that should be visible at first glance without scrolling.
1 parent bd5309c commit ef0beb5

File tree

3 files changed

+131
-87
lines changed

3 files changed

+131
-87
lines changed

‎resources/sass/components/_meta.scss

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.meta {
22
display: grid;
3-
grid-template-areas: 'poster title actions' 'poster ids ids' 'poster description description' 'poster chips chips';
3+
grid-template-areas: 'poster title actions' 'poster tags tags' 'poster ids ids' 'poster description description' 'poster chips chips';
44
grid-template-columns: auto 1fr auto;
5-
grid-template-rows: auto auto auto minmax(0, 1fr);
6-
gap: 16px 32px;
5+
grid-template-rows: auto auto auto auto minmax(0, 1fr);
6+
gap: 8px 32px;
77
padding: 16px;
8-
max-height: 510px;
8+
max-height: 540px;
99
}
1010

1111
.meta__poster-link {
@@ -58,7 +58,7 @@
5858

5959
@media only screen and (max-width: 1200px) {
6060
.meta {
61-
grid-template-areas: 'poster title actions' 'poster ids ids' 'poster description description' 'chips chips chips';
61+
grid-template-areas: 'poster title actions' 'poster tags tags' 'poster ids ids' 'poster description description' 'chips chips chips';
6262
grid-template-columns: 140px minmax(0, 1fr) auto;
6363
}
6464

@@ -70,7 +70,7 @@
7070
@media screen and (max-width: 767px) {
7171
.meta {
7272
max-height: unset;
73-
grid-template-areas: 'poster title actions' 'poster ids ids' 'poster description description' 'chips chips chips';
73+
grid-template-areas: 'poster title actions' 'poster tags tags' 'poster ids ids' 'description description description' 'chips chips chips';
7474
grid-template-columns: 96px minmax(0, 1fr) auto;
7575
}
7676

@@ -85,7 +85,7 @@
8585

8686
@media screen and (max-width: 480px) {
8787
.meta {
88-
grid-template-areas: 'poster title actions' 'ids ids ids' 'description description description' 'chips chips chips';
88+
grid-template-areas: 'poster title actions' 'tags tags tags' 'ids ids ids' 'description description description' 'chips chips chips';
8989
grid-template-columns: 64px minmax(0, 1fr) auto;
9090
column-gap: 12px;
9191
align-items: center;
@@ -217,7 +217,7 @@
217217
display: flex;
218218
column-gap: 0;
219219
list-style-type: none;
220-
margin: -10px;
220+
margin: 0 0 0 -10px;
221221
padding: 0;
222222
align-items: center;
223223

@@ -449,3 +449,50 @@
449449
-webkit-box-orient: vertical;
450450
}
451451
}
452+
453+
/* Tags
454+
---------------------------------------------------------------------------- */
455+
456+
.work__tags {
457+
grid-area: tags;
458+
display: flex;
459+
flex-wrap: wrap;
460+
margin: 0 0 0 -12px;
461+
padding: 0;
462+
list-style-type: none;
463+
align-items: baseline;
464+
font-size: 14px;
465+
}
466+
467+
.work__tags li:not(:last-child)::after {
468+
content: '\2022';
469+
display: inline-block;
470+
margin-left: -0.5ch;
471+
}
472+
473+
.work__tags li {
474+
white-space: nowrap;
475+
}
476+
477+
.work__tags > li > a,
478+
.work__tags > li > span {
479+
color: var(--torrent-tag-fg);
480+
padding: 6px 12px;
481+
display: inline-block;
482+
}
483+
484+
.work__tags > li > a:hover {
485+
background-color: var(--torrent-tag-hover-bg);
486+
border-radius: 9999px;
487+
color: var(--torrent-tag-hover-fg);
488+
}
489+
490+
@media screen and (max-width: 767px) {
491+
.work__tags {
492+
gap: 6px;
493+
}
494+
495+
.work__tags.work__tags > li::after {
496+
display: none;
497+
}
498+
}

‎resources/views/torrent/partials/movie_meta.blade.php

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,44 @@ class="meta__poster"
9999
@endif
100100
</ul>
101101
</div>
102+
<ul class="work__tags">
103+
<li class="work__media-type">
104+
<a
105+
class="work__media-type-link"
106+
href="{{ route('torrents.index', ['categoryIds' => [$category->id]]) }}"
107+
>
108+
{{ __('mediahub.movie') }}
109+
</a>
110+
</li>
111+
<li class="work__language">
112+
<a
113+
class="work__language-link"
114+
href="{{ $meta?->original_language === null ? '#' : route('torrents.index', ['primaryLanguageNames' => [$meta->original_language]]) }}"
115+
>
116+
{{ $meta->original_language ?? __('common.unknown') }}
117+
</a>
118+
</li>
119+
<li class="work__runtime">
120+
<span class="work__runtime-text">
121+
{{ \Carbon\CarbonInterval::minutes($meta->runtime ?? 0)->cascade()->forHumans(null, true) }}
122+
</span>
123+
</li>
124+
<li class="work__rating">
125+
<span
126+
class="work__rating-text"
127+
title="{{ $meta->vote_count ?? 0 }} {{ __('torrent.votes') }}"
128+
>
129+
{{ round(($meta->vote_average ?? 0) * 10) }}%
130+
</span>
131+
</li>
132+
@if ($meta?->trailer)
133+
<li class="work__trailer show-trailer">
134+
<a class="work__trailer-link" href="#">
135+
{{ __('torrent.view-trailer') }}
136+
</a>
137+
</li>
138+
@endif
139+
</ul>
102140
<ul class="meta__ids">
103141
@foreach (array_unique(array_filter([$meta->id ?? 0, $torrent->tmdb_movie_id ?? 0])) as $tmdbId)
104142
<li class="meta__tmdb">
@@ -243,33 +281,6 @@ class="{{ config('other.font-awesome') }} fa-user meta-chip__icon"
243281
</section>
244282
<section class="meta__chip-container">
245283
<h2 class="meta__heading">Extra Information</h2>
246-
<article class="meta-chip-wrapper meta-chip">
247-
<i class="{{ config('other.font-awesome') }} fa-star meta-chip__icon"></i>
248-
<h2 class="meta-chip__name">{{ __('torrent.rating') }}</h2>
249-
<h3 class="meta-chip__value">
250-
{{ ($meta->vote_average ?? 0) * 10 }}% / {{ $meta->vote_count ?? 0 }}
251-
{{ __('torrent.votes') }}
252-
</h3>
253-
</article>
254-
@if ($meta?->trailer)
255-
<article class="meta__trailer show-trailer">
256-
<a class="meta-chip" href="#">
257-
<i
258-
class="{{ config('other.font-awesome') }} fa-external-link meta-chip__icon"
259-
></i>
260-
<h2 class="meta-chip__name">Trailer</h2>
261-
<h3 class="meta-chip__value">View</h3>
262-
</a>
263-
</article>
264-
@endif
265-
266-
<article class="meta__runtime">
267-
<a class="meta-chip" href="#">
268-
<i class="{{ config('other.font-awesome') }} fa-clock meta-chip__icon"></i>
269-
<h2 class="meta-chip__name">Runtime</h2>
270-
<h3 class="meta-chip__value">{{ $meta->runtime ?? 0 }} Minutes</h3>
271-
</a>
272-
</article>
273284
@if ($meta?->genres?->isNotEmpty())
274285
<article class="meta__genres">
275286
<a
@@ -287,19 +298,6 @@ class="{{ config('other.font-awesome') }} fa-theater-masks meta-chip__icon"
287298
</article>
288299
@endif
289300

290-
<article class="meta__language">
291-
<a
292-
class="meta-chip"
293-
href="{{ $meta?->original_language === null ? '#' : route('torrents.index', ['primaryLanguageNames' => [$meta->original_language]]) }}"
294-
>
295-
<i class="{{ config('other.font-awesome') }} fa-language meta-chip__icon"></i>
296-
<h2 class="meta-chip__name">Primary Language</h2>
297-
<h3 class="meta-chip__value">
298-
{{ $meta->original_language ?? __('common.unknown') }}
299-
</h3>
300-
</a>
301-
</article>
302-
303301
@if ($meta?->collections?->isNotEmpty())
304302
<article class="meta__collection">
305303
<details>

‎resources/views/torrent/partials/tv_meta.blade.php

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,44 @@ class="meta__poster"
9898
@endif
9999
</ul>
100100
</div>
101+
<ul class="work__tags">
102+
<li class="work__media-type">
103+
<a
104+
class="work__media-type-link"
105+
href="{{ route('torrents.index', ['categoryIds' => [$category->id]]) }}"
106+
>
107+
{{ __('mediahub.show') }}
108+
</a>
109+
</li>
110+
<li class="work__language">
111+
<a
112+
class="work__language-link"
113+
href="{{ $meta?->original_language === null ? '#' : route('torrents.index', ['primaryLanguageNames' => [$meta->original_language]]) }}"
114+
>
115+
{{ $meta->original_language ?? __('common.unknown') }}
116+
</a>
117+
</li>
118+
<li class="work__runtime">
119+
<span class="work__runtime-text">
120+
{{ \Carbon\CarbonInterval::minutes($meta->episode_run_time ?? 0)->cascade()->forHumans(null, true) }}
121+
</span>
122+
</li>
123+
<li class="work__rating">
124+
<span
125+
class="work__rating-text"
126+
title="{{ $meta->vote_count ?? 0 }} {{ __('torrent.votes') }}"
127+
>
128+
{{ round(($meta->vote_average ?? 0) * 10) }}%
129+
</span>
130+
</li>
131+
@if ($meta?->trailer)
132+
<li class="work__trailer show-trailer">
133+
<a class="work__trailer-link" href="#">
134+
{{ __('torrent.view-trailer') }}
135+
</a>
136+
</li>
137+
@endif
138+
</ul>
101139
<ul class="meta__ids">
102140
@foreach (array_unique(array_filter([$meta->id ?? 0, $torrent->tmdb_tv_id ?? 0])) as $tmdbId)
103141
<li class="meta__tmdb">
@@ -242,33 +280,6 @@ class="{{ config('other.font-awesome') }} fa-user meta-chip__icon"
242280
</section>
243281
<section class="meta__chip-container">
244282
<h2 class="meta__heading">Extra Information</h2>
245-
<article class="meta-chip-wrapper meta-chip">
246-
<i class="{{ config('other.font-awesome') }} fa-star meta-chip__icon"></i>
247-
<h2 class="meta-chip__name">{{ __('torrent.rating') }}</h2>
248-
<h3 class="meta-chip__value">
249-
{{ ($meta->vote_average ?? 0) * 10 }}% / {{ $meta->vote_count ?? 0 }}
250-
{{ __('torrent.votes') }}
251-
</h3>
252-
</article>
253-
@if ($meta?->trailer)
254-
<article class="meta__trailer show-trailer">
255-
<a class="meta-chip" href="#">
256-
<i
257-
class="{{ config('other.font-awesome') }} fa-external-link meta-chip__icon"
258-
></i>
259-
<h2 class="meta-chip__name">Trailer</h2>
260-
<h3 class="meta-chip__value">View</h3>
261-
</a>
262-
</article>
263-
@endif
264-
265-
<article class="meta__runtime">
266-
<a class="meta-chip" href="#">
267-
<i class="{{ config('other.font-awesome') }} fa-clock meta-chip__icon"></i>
268-
<h2 class="meta-chip__name">Runtime</h2>
269-
<h3 class="meta-chip__value">{{ $meta->episode_run_time ?? 0 }} Minutes</h3>
270-
</a>
271-
</article>
272283
@if ($meta?->genres?->isNotEmpty())
273284
<article class="meta__genres">
274285
<a
@@ -286,18 +297,6 @@ class="{{ config('other.font-awesome') }} fa-theater-masks meta-chip__icon"
286297
</article>
287298
@endif
288299

289-
<article class="meta__language">
290-
<a
291-
class="meta-chip"
292-
href="{{ $meta?->original_language === null ? '#' : route('torrents.index', ['primaryLanguageNames' => [$meta->original_language]]) }}"
293-
>
294-
<i class="{{ config('other.font-awesome') }} fa-language meta-chip__icon"></i>
295-
<h2 class="meta-chip__name">Primary Language</h2>
296-
<h3 class="meta-chip__value">
297-
{{ $meta->original_language ?? __('common.unknown') }}
298-
</h3>
299-
</a>
300-
</article>
301300
@foreach ($meta?->networks ?? [] as $network)
302301
<article class="meta__company">
303302
<a

0 commit comments

Comments
 (0)