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

Add album card

parent 78b29307
Branches
Tags
Loading
......@@ -23,6 +23,7 @@ export default defineConfig({
{ text: "Basic Card", link: "/components/card/basic" },
{ text: "Radio Card", link: "/components/card/radio" },
{ 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 {
&.card.artist-card {
--fw-card-width: 208px;
position: relative;
width: 208px;
width: var(--fw-card-width);
padding-bottom: 14px;
&:hover {
......@@ -26,11 +28,12 @@
transition-delay: .1s;
}
--fw-image-width: calc(var(--fw-card-width) - 16px);
> .card-image {
border-radius: 50%;
height: 192px;
width: 192px;
max-width: 192px;
height: var(--fw-image-width);
width: var(--fw-image-width);
max-width: var(--fw-image-width);
margin: -16px -16px 0;
}
......@@ -42,8 +45,6 @@
> .card-content {
padding-top: 6px !important;
text-align: left !important;
color: var(--fw-grey-700);
font-size: 0.8125rem;
> .card-tags {
font-size: 0.875rem;
......@@ -55,12 +56,14 @@
> .play-button {
position: absolute;
right: 8px;
top: 8px + 192px - 44px;
top: calc(8px + var(--fw-image-width) - 44px);
}
> .card-footer {
display: flex;
align-items: center;
color: var(--fw-grey-700);
font-size: 0.8125rem;
> .options-button {
margin-left: auto;
......
......@@ -30,6 +30,10 @@
font-size: 1.125em;
font-weight: bold;
text-overflow: ellipsis;
white-space: pre;
overflow: hidden;
+ .card-content {
padding-top: 16px;
}
......
......@@ -3,6 +3,7 @@ export { default as FwPlayButton } from './button/play/Button.vue'
export { default as FwButton } from './button/Button.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 FwCard } from './card/Card.vue'
......
vui:
radio: Radio
albums: '{n} album | {n} albums'
tracks: '{n} track | {n} tracks'
// Links
.funkwhale.link,
a {
color: var(--fw-blue-500);
text-decoration: underline;
--fw-link-color: var(--fw-blue-500);
&:not(.VPLink):not(.vp-doc .header-anchor):not(.VPDocAsideOutline .outline-link):not(.VPNavBarTitle .title) {
color: var(--fw-link-color);
&:hover,
&.is-hovered {
color: var(--fw-blue-600);
--fw-link-color: var(--fw-blue-600);
text-decoration: underline;
}
&: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