Merge pull request #3149 from metabrainz/ansh/add-playlist-cover

LB-1214, LB-1215: Add playlist cover

frontend/css/entity-pages.less

@@ -1,83 +1,86 @@
 @white-gradient: linear-gradient(to bottom, transparent, #fff 65%);
 
-#entity-page {
+.entity-page-header {
   --bg-color: #e7e4e4; // default color
-  .entity-page-header {
-    padding: 2em;
-    gap: 2em;
-    background: linear-gradient(45deg, var(--bg-color), transparent 60%);
-    flex-wrap: wrap;
-    justify-content: center;
-    .cover-art {
-      aspect-ratio: 1;
+  padding: 2em;
+  gap: 2em;
+  background: linear-gradient(45deg, var(--bg-color), transparent 60%);
+  flex-wrap: wrap;
+  justify-content: center;
+  .cover-art {
+    aspect-ratio: 1;
+    height: 100%;
+    max-height: 400px;
+    max-width: 400px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    border-radius: 5px;
+    text-align: center;
+    > * {
+      max-width: inherit;
       height: 100%;
-      max-height: 400px;
-      max-width: 400px;
-      flex-grow: 1;
-      flex-shrink: 0;
-      border-radius: 5px;
-      text-align: center;
-      > * {
-        max-width: inherit;
-        height: 100%;
-        margin-bottom: 0.5em;
-      }
+      margin-bottom: 0.5em;
     }
-    .artist-info {
-      flex-grow: 2;
-      display: flex;
-      flex-direction: column;
-      min-width: 15em;
-      max-height: 29em;
+  }
+  .artist-info,
+  .playlist-info {
+    flex-grow: 2;
+    display: flex;
+    flex-direction: column;
+    min-width: 15em;
+    max-height: 29em;
+    overflow: hidden;
+    > *:first-child {
+      line-height: 1em;
+    }
+    .wikipedia-extract {
+      margin-top: 2em;
       overflow: hidden;
-      > *:first-child {
-        line-height: 1em;
-      }
-      .wikipedia-extract {
-        margin-top: 2em;
-        overflow: hidden;
-        .content {
-          max-height: calc(100% - 1.5em);
-          overflow-y: hidden;
-          mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
-          -webkit-mask-image: linear-gradient(
-            180deg,
-            #000 60%,
-            transparent 98%
-          );
-        }
-      }
-      .details {
-        margin-top: 0;
+      .content {
+        max-height: calc(100% - 1.5em);
+        overflow-y: hidden;
+        mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
+        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
       }
     }
-    .lb-radio-button {
-      align-self: flex-end;
-      .tags-list {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 10em;
-      }
-      .btn {
-        font-size: 1.3em;
-      }
+    .details {
+      margin-top: 0;
     }
-    .right-side {
-      flex-grow: 0.8;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      max-width: 230px;
-      margin-left: auto;
+  }
+  .lb-radio-button {
+    align-self: flex-end;
+    .tags-list {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 10em;
     }
-    .entity-rels {
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-end;
-      justify-content: flex-end;
-      min-width: 240px;
+    .btn {
+      font-size: 1.3em;
     }
   }
+  .right-side {
+    flex-grow: 0.8;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: 230px;
+    margin-left: auto;
+  }
+  .entity-rels {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-end;
+    justify-content: flex-end;
+    min-width: 240px;
+  }
+}
+
+.header-with-line .play-tracks-button {
+  order: 3;
+  margin-left: 2em;
+}
+
+#entity-page {
   .top-listeners {
     max-width: 400px;
     .listener {
@@ -107,10 +110,6 @@
   .tags {
     margin-top: 0.5em;
   }
-  .header-with-line .play-tracks-button {
-    order: 3;
-    margin-left: 2em;
-  }
   .entity-page-content {
     display: flex;
     flex-wrap: wrap;

frontend/css/playlists.less

@@ -231,3 +231,49 @@
   align-self: center;
   min-width: 3em;
 }
+
+#CreateOrEditPlaylistModal {
+  .cover-art-grid {
+    display: flex;
+    gap: 10px;
+  }
+
+  .cover-art-option {
+    position: relative;
+    cursor: pointer;
+  }
+
+  .cover-art-radio {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .cover-art-image {
+    width: 100%;
+    height: auto;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    transition: all 0.2s;
+  }
+
+  .cover-art-radio:checked + .cover-art-image {
+    border-color: #353070;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(53, 48, 112, 0.3);
+      border-radius: 2px;
+    }
+  }
+
+  .cover-art-radio:focus + .cover-art-image {
+    box-shadow: 0 0 0 2px rgba(53, 48, 112, 0.5);
+  }
+}