From 05428959ff44349a74e149609293bf22fc259853 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Thu, 20 Feb 2025 02:41:49 +0000 Subject: [PATCH] improve playlist item style --- .../src/components/Music/Playlist/index.less | 223 +++++++++--------- .../components/ReleasesList/index.less | 13 +- 2 files changed, 120 insertions(+), 116 deletions(-) diff --git a/packages/app/src/components/Music/Playlist/index.less b/packages/app/src/components/Music/Playlist/index.less index 291a0ab7..e651cdbe 100755 --- a/packages/app/src/components/Music/Playlist/index.less +++ b/packages/app/src/components/Music/Playlist/index.less @@ -1,161 +1,154 @@ @playlist_cover_maxSize: 200px; .playlist { - position: relative; - display: flex; - flex-direction: column; + position: relative; + display: flex; + flex-direction: column; - cursor: pointer; + cursor: pointer; - width: 100%; - max-width: 230px; + width: @playlist_cover_maxSize; + max-width: @playlist_cover_maxSize; - gap: 8px; - overflow: hidden; + overflow: hidden; - transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; - &.cover-hovering { - .playlist_cover { - .playlist_cover_mask { - opacity: 1; - } - } - } + &.cover-hovering { + .playlist_cover { + .playlist_cover_mask { + opacity: 1; + } + } + } - .playlist_cover { - display: flex; - position: relative; + .playlist_cover { + display: flex; + position: relative; - width: 100%; + align-items: center; + justify-content: center; - max-width: @playlist_cover_maxSize; - max-height: @playlist_cover_maxSize; + width: 100%; + //max-height: 150px; - transition: all 0.2s ease-in-out; - z-index: 50; + transition: all 0.2s ease-in-out; + z-index: 50; - overflow: hidden; + img { + width: @playlist_cover_maxSize; + height: @playlist_cover_maxSize; - border-radius: 12px; + object-fit: cover; + border-radius: 12px; + } - .image-wrapper { - width: 100%; - } + .playlist_cover_mask { + position: absolute; - img { - width: @playlist_cover_maxSize; - height: @playlist_cover_maxSize; + top: 0; + left: 0; - object-fit: cover; - } + display: flex; - .playlist_cover_mask { - position: absolute; + align-items: center; + justify-content: center; - top: 0; - left: 0; + width: 100%; + height: 100%; - display: flex; + opacity: 0; - align-items: center; - justify-content: center; + transition: all 0.2s ease-in-out; - width: 100%; - height: 100%; + z-index: 55; - opacity: 0; + background-color: rgba(var(--layoutBackgroundColor), 0.6); + color: var(--text-color); - transition: all 0.2s ease-in-out; + font-size: 3rem; + } + } - z-index: 55; + .playlist_info { + display: flex; + flex-direction: column; - background-color: rgba(var(--layoutBackgroundColor), 0.6); - color: var(--text-color); + width: 100%; + transition: all 150ms ease-in-out; - font-size: 3rem; - } - } + &:hover { + .playlist_info_title { + text-decoration: underline; + } + } - .playlist_info { - display: flex; - flex-direction: column; + .playlist_info_title { + font-size: 0.7rem; + font-weight: 600; - width: 100%; - transition: all 150ms ease-in-out; + color: var(--background-color-contrast); - &:hover { - .playlist_info_title { - text-decoration: underline; - } - } + overflow: hidden; - .playlist_info_title { - font-size: 0.7rem; - font-weight: 600; + h1, + h4 { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; - color: var(--background-color-contrast); + margin: 0; + } + } - overflow: hidden; + .playlist_info_subtitle { + color: var(--text-color); + font-size: 0.7rem; - h1, - h4 { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + p { + overflow: hidden; - margin: 0; - } - } + text-overflow: ellipsis; + white-space: nowrap; - .playlist_info_subtitle { - color: var(--text-color); - font-size: 0.7rem; + margin: 0; + } + } + } - p { - overflow: hidden; + .playlist_actions { + display: flex; + flex-direction: column; - text-overflow: ellipsis; - white-space: nowrap; + align-self: flex-end; + justify-self: flex-end; - margin: 0; - } - } - } + justify-content: center; + align-items: center; - .playlist_actions { - display: flex; - flex-direction: column; + height: 100%; - align-self: flex-end; - justify-self: flex-end; + padding: 10px; - justify-content: center; - align-items: center; + .ant-btn { + svg { + margin: 0 !important; + } + } + } - height: 100%; + .playlist_bottom { + display: flex; + flex-direction: row; - padding: 10px; + gap: 8px; + font-size: 0.7rem; - .ant-btn { - svg { - margin: 0 !important; - } - } - } + text-transform: uppercase; - .playlist_bottom { - display: flex; - flex-direction: row; - - gap: 8px; - font-size: 0.7rem; - - text-transform: uppercase; - - svg, - p { - margin: 0; - } - } -} \ No newline at end of file + svg, + p { + margin: 0; + } + } +} diff --git a/packages/app/src/pages/music/tabs/explore/components/ReleasesList/index.less b/packages/app/src/pages/music/tabs/explore/components/ReleasesList/index.less index a0a11241..b195bda8 100644 --- a/packages/app/src/pages/music/tabs/explore/components/ReleasesList/index.less +++ b/packages/app/src/pages/music/tabs/explore/components/ReleasesList/index.less @@ -1,3 +1,5 @@ +@min-item-size: 200px; + .music-releases-list { display: flex; flex-direction: column; @@ -31,6 +33,9 @@ .music-releases-list-items { display: grid; + grid-template-columns: repeat(auto-fit, minmax(@min-item-size, 1fr)); + gap: 10px; + /* display: grid; grid-gap: 20px; grid-template-columns: repeat(2, 1fr); @@ -53,11 +58,17 @@ @media (min-width: 1920px) { grid-template-columns: repeat(9, 1fr); - } + } */ .playlist { justify-self: center; //min-width: 372px !important; + + width: unset; + height: unset; + + min-width: @min-item-size; + min-height: @min-item-size; } } }