Changed artist list to flexbox

AlbumShuffler · Jun 16, 2024 · d90f0ce · d90f0ce
1 parent f79e498
commit d90f0ce
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 30 deletions.
diff --git a/dist/css/main.css b/dist/css/main.css
@@ -290,14 +290,21 @@ body {
 }
 
 .artist-list {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(90px, 1fr));
-    gap: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 80vw;
+    justify-content: center;
+    gap: 15px
 }
 
-.artist-list img {
-    width: 100%;
-    height: auto;
+.artist-list-item {
+    display: table;
+}
+
+.artist-list-item img {
+    aspect-ratio: 1;
+    max-width: 20vw;
+    max-height: 20vh;
     border-radius: 20px;
 }
 
@@ -307,33 +314,13 @@ body {
     text-transform: uppercase;
     font-size: 12px;
     color: white;
+    display: table-caption;caption-side:bottom;
 }
 
 .artist-list-selected-element {
     box-shadow: 0 0 10px 1px white;
 }
 
-/*
-@media (max-width: 1024px) {
-    .artist-list {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    }
-}
-
-@media only screen and (max-height: 1024px) and (orientation: portrait) {
-    .artist-list {
-        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
-        font-size: 10px;
-    }
-}
-
-@media (max-width: 480px) {
-    .bildliste {
-        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    }
-}
-*/
-
 .z-1 {
     z-index: 1;
 }

diff --git a/src/Main.elm b/src/Main.elm
@@ -639,9 +639,9 @@ artistOverlay isOverlayOpen artist =
                     attribute "sizes" "(max-width: 560px) 90px, (min-width: 561px) 200px"
             in
             Html.a
-                [ onClick (CloseArtistOverlay a) ]
-                [ img [ class ("mb-025 artist-list" ++ isSelectedClass), sourceSet, sizes ] []
-                , div [ class "mb-10 artist-list-caption" ] [ text a.name ]
+                [ class "artist-list-item", onClick (CloseArtistOverlay a) ]
+                [ img [ class ("mb-025 " ++ isSelectedClass), sourceSet, sizes ] []
+                , div [ class "artist-list-caption" ] [ text a.name ]
                 ]
 
         overlayGrid : List ArtistInfo -> Html Msg