RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +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

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

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

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

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