Skip to content
Snippets Groups Projects
Commit d80cb43a authored by Kasper Seweryn's avatar Kasper Seweryn :pancakes:
Browse files

Add album card

parent 78b29307
No related branches found
No related tags found
1 merge request!1Implement all components
...@@ -23,6 +23,7 @@ export default defineConfig({ ...@@ -23,6 +23,7 @@ export default defineConfig({
{ text: "Basic Card", link: "/components/card/basic" }, { text: "Basic Card", link: "/components/card/basic" },
{ text: "Radio Card", link: "/components/card/radio" }, { text: "Radio Card", link: "/components/card/radio" },
{ text: "Artist Card", link: "/components/card/artist" }, { text: "Artist Card", link: "/components/card/artist" },
{ text: "Album Card", link: "/components/card/album" },
] }, ] },
] ]
} }
......
<script setup lang="ts">
const album = {
name: 'Relatively Long Album Name',
artist: {
name: 'Artist Name'
},
tracks: [{}, {}, {}, {}],
cover: {
urls: {
original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
}
}
}
</script>
# Album card
## Normal card
```html
<fw-album-card :album="album" />
```
<fw-album-card :album="album" />
<script setup lang="ts">
import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
interface Album {
id: number
name: string
artist: {
id: number
name: string
}
tracks: object[]
cover: {
urls: {
original: string
}
}
}
interface Events {
(e: 'play', album: Album): void
}
interface Props {
album: Album
}
const emit = defineEmits<Events>()
const props = defineProps<Props>()
let navigate = (to: 'artist' | 'album') => {}
if (import.meta.env.PROD) {
const router = useRouter()
navigate = (to: 'artist' | 'album') => to === 'album'
? router.push({ name: 'library.albums.detail', params: { id: props.album.id } })
: router.push({ name: 'library.artists.detail', params: { id: props.album.artist.id } })
}
</script>
<template>
<fw-card
:title="album.name"
:image="album.cover.urls.original"
@click="navigate('album')"
class="album-card"
>
<fw-play-button @play="emit('play', album)" />
<a
@click.stop="navigate('artist')"
class="funkwhale link artist-link"
>
{{ album.artist.name }}
</a>
<div class="card-footer">
{{ t('vui.tracks', album.tracks.length) }}
<fw-options-button />
</div>
</fw-card>
</template>
<style lang="scss">
@import './style.scss'
</style>
.funkwhale {
&.card.album-card {
--fw-card-width: 208px;
position: relative;
width: var(--fw-card-width);
padding-bottom: 14px;
&:hover {
.play-button {
opacity: 1 !important;
transform: translateX(6px) !important;
}
.options-button {
opacity: 1 !important;
transform: translate(12px) !important;
}
}
.play-button,
.options-button {
opacity: 0;
}
.options-button {
transform: translateX(6px) !important;
transition-delay: .1s;
}
--fw-image-width: var(--fw-card-width);
> .card-image {
border-radius: 0 !important;
height: var(--fw-image-width);
width: var(--fw-image-width);
max-width: var(--fw-image-width);
margin: -24px -24px 0;
}
> .card-title {
font-size: 1rem;
text-align: left !important;
padding-top: 16px !important;
}
> .card-content {
padding-top: 0 !important;
text-align: left !important;
> .artist-link {
font-size: 0.875rem;
--fw-link-color: var(--fw-text-color);
}
> .play-button {
position: absolute;
right: 8px;
top: calc(var(--fw-image-width) - 8px - 44px);
}
> .card-footer {
display: flex;
align-items: center;
color: var(--fw-grey-700);
font-size: 0.8125rem;
padding-top: 6px;
> .options-button {
margin-left: auto;
}
}
}
}
}
.funkwhale { .funkwhale {
&.card.artist-card { &.card.artist-card {
--fw-card-width: 208px;
position: relative; position: relative;
width: 208px; width: var(--fw-card-width);
padding-bottom: 14px; padding-bottom: 14px;
&:hover { &:hover {
...@@ -26,11 +28,12 @@ ...@@ -26,11 +28,12 @@
transition-delay: .1s; transition-delay: .1s;
} }
--fw-image-width: calc(var(--fw-card-width) - 16px);
> .card-image { > .card-image {
border-radius: 50%; border-radius: 50%;
height: 192px; height: var(--fw-image-width);
width: 192px; width: var(--fw-image-width);
max-width: 192px; max-width: var(--fw-image-width);
margin: -16px -16px 0; margin: -16px -16px 0;
} }
...@@ -42,8 +45,6 @@ ...@@ -42,8 +45,6 @@
> .card-content { > .card-content {
padding-top: 6px !important; padding-top: 6px !important;
text-align: left !important; text-align: left !important;
color: var(--fw-grey-700);
font-size: 0.8125rem;
> .card-tags { > .card-tags {
font-size: 0.875rem; font-size: 0.875rem;
...@@ -55,12 +56,14 @@ ...@@ -55,12 +56,14 @@
> .play-button { > .play-button {
position: absolute; position: absolute;
right: 8px; right: 8px;
top: 8px + 192px - 44px; top: calc(8px + var(--fw-image-width) - 44px);
} }
> .card-footer { > .card-footer {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--fw-grey-700);
font-size: 0.8125rem;
> .options-button { > .options-button {
margin-left: auto; margin-left: auto;
......
...@@ -30,6 +30,10 @@ ...@@ -30,6 +30,10 @@
font-size: 1.125em; font-size: 1.125em;
font-weight: bold; font-weight: bold;
text-overflow: ellipsis;
white-space: pre;
overflow: hidden;
+ .card-content { + .card-content {
padding-top: 16px; padding-top: 16px;
} }
......
...@@ -3,6 +3,7 @@ export { default as FwPlayButton } from './button/play/Button.vue' ...@@ -3,6 +3,7 @@ export { default as FwPlayButton } from './button/play/Button.vue'
export { default as FwButton } from './button/Button.vue' export { default as FwButton } from './button/Button.vue'
export { default as FwArtistCard } from './card/artist/Card.vue' export { default as FwArtistCard } from './card/artist/Card.vue'
export { default as FwAlbumCard } from './card/album/Card.vue'
export { default as FwRadioCard } from './card/radio/Card.vue' export { default as FwRadioCard } from './card/radio/Card.vue'
export { default as FwCard } from './card/Card.vue' export { default as FwCard } from './card/Card.vue'
......
vui: vui:
radio: Radio radio: Radio
albums: '{n} album | {n} albums' albums: '{n} album | {n} albums'
tracks: '{n} track | {n} tracks'
// Links // Links
.funkwhale.link,
a { a {
color: var(--fw-blue-500); --fw-link-color: var(--fw-blue-500);
text-decoration: underline;
&:hover, &:not(.VPLink):not(.vp-doc .header-anchor):not(.VPDocAsideOutline .outline-link):not(.VPNavBarTitle .title) {
&.is-hovered { color: var(--fw-link-color);
color: var(--fw-blue-600);
} &:hover,
&.is-hovered {
--fw-link-color: var(--fw-blue-600);
text-decoration: underline;
}
&:visited { &:visited {
color: var(--fw-blue-700); --fw-link-color: var(--fw-blue-700);
}
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment