RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve explore tab

Browse Source
This commit is contained in:
SrGooglo 2025-02-11 16:14:03 +00:00
parent 8b98a60f82
commit d21ca837dc
2 changed files with 95 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/pages/music/index.jsx
View File

@ -5,18 +5,22 @@ import { PagePanelWithNavMenu } from "@components/PagePanels"
import Tabs from "./tabs"
const NavMenuHeader = <h2>
<Icons.MdAlbum />
Music
</h2>
const NavMenuHeader = (
<h2>
<Icons.MdAlbum />
Music
</h2>
)
export default () => {
return <PagePanelWithNavMenu
tabs={Tabs}
navMenuHeader={NavMenuHeader}
defaultTab="library"
primaryPanelClassName="full"
useSetQueryType
transition
/>
}
return (
<PagePanelWithNavMenu
tabs={Tabs}
navMenuHeader={NavMenuHeader}
defaultTab="explore"
primaryPanelClassName="full"
useSetQueryType
transition
/>
)
}

151
packages/app/src/pages/music/tabs/explore/components/RecentlyPlayedList/index.less
View File

@ -1,108 +1,113 @@
.recently_played {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
gap: 10px;
gap: 10px;
.recently_played-header {
display: flex;
flex-direction: row;
.recently_played-header {
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
gap: 10px;
gap: 10px;
font-size: 1rem;
}
font-size: 1rem;
}
.recently_played-content {
display: flex;
flex-direction: column;
.recently_played-content {
display: flex;
flex-direction: column;
overflow: hidden;
overflow-x: scroll;
overflow: hidden;
overflow-x: scroll;
padding: 0 20px;
padding: 0 20px;
.recently_played-content-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
}
.recently_played-content-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
}
}
.recently_played-item {
position: relative;
position: relative;
z-index: 50;
z-index: 50;
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
width: 100%;
height: 100px;
overflow: hidden;
overflow: hidden;
background-color: var(--background-color-accent);
border-radius: 12px;
background-color: var(--background-color-accent);
border-radius: 12px;
cursor: pointer;
cursor: pointer;
&:hover {
.recently_played-item-icon {
opacity: 1;
}
&:hover {
.recently_played-item-icon {
opacity: 1;
}
.recently_played-item-cover {
opacity: 0.1;
}
}
.recently_played-item-cover {
opacity: 0.1;
}
}
.recently_played-item-icon {
z-index: 55;
position: absolute;
display: flex;
.recently_played-item-icon {
z-index: 55;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
opacity: 0;
opacity: 0;
font-size: 3rem;
font-size: 3rem;
transition: all 150ms ease-in-out;
}
transition: all 150ms ease-in-out;
}
.recently_played-item-cover {
position: absolute;
.recently_played-item-cover {
position: absolute;
z-index: 50;
z-index: 50;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
opacity: 0.5;
opacity: 0.5;
transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
img {
width: 100%;
height: 100%;
.lazy-load-image-background {
width: 100%;
height: 100%;
}
object-fit: cover;
}
}
img {
width: 100%;
height: 100%;
.recently_played-item-content {
z-index: 55;
padding: 10px;
}
}
object-fit: cover;
}
}
.recently_played-item-content {
z-index: 55;
padding: 10px;
}
}