Merge pull request #3842 from Roardom/fix-playlist-styles

(Fix) Various playlist styles
HDInnovations · May 21, 2024 · 702cfbe · 702cfbe
2 parents c6b5bfe + 494862c
commit 702cfbe
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 45 deletions.
diff --git a/resources/sass/components/_playlist.scss b/resources/sass/components/_playlist.scss
@@ -47,28 +47,32 @@
 
 .playlists {
     display: grid;
-    grid-template-columns: repeat(auto-fit, 240px);
-    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    grid-auto-flow: dense;
+    grid-gap: 2rem;
 }
 
 .playlists__playlist {
-    display: flex;
-    flex-direction: column;
-    background-color: #111;
-    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
-    border-radius: 8px;
+    display: grid;
+    grid-template-areas: "image" "author" "link" "titles";
+    grid-template-rows: 145px auto 1fr auto;
+    border: var(--playlist-card-border);
+    background-color: var(--playlist-card-bg);
+    box-shadow: var(--playlist-card-box-shadow);
+    border-radius: var(--playlist-card-border-radius);
     overflow: hidden;
-    padding-bottom: 20px;
 }
 
 .playlists__playlist-image {
+    grid-area: image;
     width: 100%;
+    object-fit: cover;
 }
 
 .playlists__playlist-image--none {
+    grid-area: image;
     width: 100%;
-    height: 135px;
-    background-color: #202020;
+    background-color: var(--playlist-card-missing-image-bg);
     box-shadow: none !important;
     display: inline-block;
     box-sizing: border-box;
@@ -80,7 +84,7 @@
     font-size: 100px;
     font-family: "Font Awesome 5 Pro";
     text-align: center;
-    color: #b5b5b5;
+    color: var(--playlist-card-missing-image-fg);
     content: "\f03e";
 }
 
@@ -90,28 +94,38 @@
 }
 
 .playlists__playlist-author {
+    grid-area: author;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
     text-align: center;
     font-size: 14px;
     padding: 8px;
 }
 
 .playlists__playlist-link {
+    grid-area: link;
     text-align: center;
 }
 
 .playlists__playlist-name {
     margin: 0;
     padding: 8px;
     font-size: 18px;
-    color: #bbb;
+    color: var(--playlist-card-fg);
     font-weight: bold;
 }
 
 .playlists__playlist-link-titles {
+    grid-area: titles;
     text-align: center;
 }
 
 .playlists__playlist-titles {
     font-size: 13px;
-    padding: 8px;
+    padding: 20px 8px;
+    margin: 0;
+    color: var(--playlist-card-fg);
 }
diff --git a/resources/sass/components/_torrent-card.scss b/resources/sass/components/_torrent-card.scss
@@ -8,6 +8,7 @@
     border-radius: 4px;
     contain: content;
     display: grid;
+    box-sizing: content-box;
     grid-template-rows: 40px 220px 40px;
     grid-template-areas: "header header" "poster body" "footer footer";
 }
@@ -105,3 +106,8 @@
     display: inline;
     font-style: normal;
 }
+
+.torrent-card__right-footer {
+    margin-top: -12px;
+    margin-bottom: -12px;
+}
diff --git a/resources/sass/themes/_cosmic-void.scss b/resources/sass/themes/_cosmic-void.scss
@@ -184,6 +184,14 @@
     --panel-head-bg: #19191b;
     --panel-head-fg: #fff;
 
+    --playlist-card-bg: #111;
+    --playlist-card-border: none;
+    --playlist-card-border-radius: 8px;
+    --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+    --playlist-card-fg: #bbb;
+    --playlist-card-missing-image-bg: #272727;
+    --playlist-card-missing-image-fg: #b5b5b5;
+
     --post-bg: #2b2b2b;
     --post-fg: #ccc;
     --post-shadow: none;

diff --git a/resources/sass/themes/_galactic.scss b/resources/sass/themes/_galactic.scss
@@ -212,6 +212,14 @@
     --panel-head-bg: #1c1c1c;
     --panel-head-fg: #fff;
 
+    --playlist-card-bg: #111;
+    --playlist-card-border: none;
+    --playlist-card-border-radius: 8px;
+    --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+    --playlist-card-fg: #bbb;
+    --playlist-card-missing-image-bg: #202020;
+    --playlist-card-missing-image-fg: #b5b5b5;
+
     --post-bg: #2b2b2b;
     --post-fg: #ccc;
     --post-shadow: none;

diff --git a/resources/sass/themes/_light.scss b/resources/sass/themes/_light.scss
@@ -187,6 +187,14 @@
   --panel-head-bg: #373d43;
   --panel-head-fg: #fff;
 
+  --playlist-card-bg: #f6f6f6;
+  --playlist-card-border: none;
+  --playlist-card-border-radius: 8px;
+  --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+  --playlist-card-fg: #222;
+  --playlist-card-missing-image-bg: #e6e6e6;
+  --playlist-card-missing-image-fg: #aaa;
+
   --post-bg: #e9e9e9;
   --post-fg: #212121;
   --post-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);

diff --git a/resources/sass/themes/_material-design-v3-amoled.scss b/resources/sass/themes/_material-design-v3-amoled.scss
@@ -186,6 +186,14 @@
   --panel-head-bg: #000;
   --panel-head-fg: #fff;
 
+  --playlist-card-bg: #000;
+  --playlist-card-border: 1px solid #222;
+  --playlist-card-border-radius: 20px;
+  --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+  --playlist-card-fg: #d8d7dc;
+  --playlist-card-missing-image-bg: #000;
+  --playlist-card-missing-image-fg: #111;
+
   --post-bg: #000;
   --post-fg: #212121;
   --post-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
@@ -535,12 +543,3 @@ li.pagination__previous {
   margin: 2px;
   line-height: 36px;
 }
-
-.playlists__playlist {
-  border: 1px solid #222;
-  background-color: #000;
-}
-
-.playlists__playlist-image--none {
-  background-color: #000;
-}
diff --git a/resources/sass/themes/_material-design-v3-dark.scss b/resources/sass/themes/_material-design-v3-dark.scss
@@ -186,6 +186,14 @@
   --panel-head-bg: #2A292E;
   --panel-head-fg: #d8d7dc;
 
+  --playlist-card-bg: #343338;
+  --playlist-card-border: none;
+  --playlist-card-border-radius: 20px;
+  --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+  --playlist-card-fg: #d8d7dc;
+  --playlist-card-missing-image-bg: #262626;
+  --playlist-card-missing-image-fg: #1d1d1d;
+
   --post-bg: #343338;
   --post-fg: #212121;
   --post-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);

diff --git a/resources/sass/themes/_material-design-v3-light.scss b/resources/sass/themes/_material-design-v3-light.scss
@@ -185,6 +185,14 @@
   --panel-head-bg: #fff;
   --panel-head-fg: #111;
 
+  --playlist-card-bg: #fff;
+  --playlist-card-border: none;
+  --playlist-card-border-radius: 20px;
+  --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+  --playlist-card-fg: #222;
+  --playlist-card-missing-image-bg: #f3f3f3;
+  --playlist-card-missing-image-fg: #ddd;
+
   --post-bg: #fff;
   --post-fg: #212121;
   --post-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);

diff --git a/resources/sass/themes/_nord.scss b/resources/sass/themes/_nord.scss
@@ -206,6 +206,14 @@
   --panel-head-bg: transparent;
   --panel-head-fg: #fff;
 
+  --playlist-card-bg: #434c5e;
+  --playlist-card-border: none;
+  --playlist-card-border-radius: 10px;
+  --playlist-card-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+  --playlist-card-fg: #d8dee9;
+  --playlist-card-missing-image-bg: #4c566a;
+  --playlist-card-missing-image-fg: #3B4252;
+
   --post-bg: #4c566a;
   --post-fg: #d8dee9;
   --post-shadow: none;
@@ -515,18 +523,6 @@ svg > circle:last-child {
 
 /* Playlists
 ---------------------------------------------------------------------------- */
-.playlists__playlist {
-  background-color: #434c5e;
-}
-
-.playlists__playlist-image--none {
-  background-color: #4c566a;
-}
-
-.playlists__playlist-name {
-  color: #d8dee9;
-}
-
 .playlist__description.playlist__description.playlist__description {
   background-color: transparent;
 }

diff --git a/resources/sass/themes/_revel.scss b/resources/sass/themes/_revel.scss
@@ -212,6 +212,14 @@
   --panel-head-bg: #232323;
   --panel-head-fg: #fff;
 
+  --playlist-card-bg: #2c2c2c;
+  --playlist-card-border: none;
+  --playlist-card-border-radius: 0;
+  --playlist-card-box-shadow: none;
+  --playlist-card-fg: #aaa;
+  --playlist-card-missing-image-bg: #333;
+  --playlist-card-missing-image-fg: #4c4c4c;
+
   --post-bg: #2b2b2b;
   --post-fg: #ccc;
   --post-shadow: none;
@@ -1233,14 +1241,6 @@ a:hover {
   gap: 2px;
 }
 
-/* Playlists
----------------------------------------------------------------------------- */
-
-.playlists__playlist {
-  border-radius: 0;
-  box-shadow: none;
-}
-
 /* Articles
 ---------------------------------------------------------------------------- */
 

diff --git a/resources/views/playlist/index.blade.php b/resources/views/playlist/index.blade.php
@@ -22,7 +22,7 @@ class="panel__action form__button form__button--text"
         <div class="panel__body playlists">
             @forelse ($playlists as $playlist)
                 <article class="playlists__playlist">
-                    @if (isset($playlist->cover_image))
+                    @if (isset($playlist->cover_image) && file_exists(public_path() . '/files/img/' . $playlist->cover_image))
                         <a
                             class="playlists__playlist-image-link"
                             href="{{ route('playlists.show', ['playlist' => $playlist]) }}"
@@ -67,7 +67,7 @@ class="playlists__playlist-link-titles"
                         href="{{ route('playlists.show', ['playlist' => $playlist]) }}"
                     >
                         <p class="playlists__playlist-titles">
-                            {{ $playlist->torrents_count }} {{ __('playlist.titles') }}
+                            {{ $playlist->torrents_count }} {{ __('torrent.torrents') }}
                         </p>
                     </a>
                 </article>

diff --git a/resources/views/torrent/partials/playlists.blade.php b/resources/views/torrent/partials/playlists.blade.php
@@ -1,7 +1,7 @@
 <div class="panel__body playlists torrent__playlists">
     @forelse ($torrent->playlists as $playlist)
         <article class="playlists__playlist">
-            @if (isset($playlist->cover_image))
+            @if (isset($playlist->cover_image) && file_exists(public_path() . '/files/img/' . $playlist->cover_image))
                 <a
                     class="playlists__playlist-image-link"
                     href="{{ route('playlists.show', ['playlist' => $playlist]) }}"