MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): card can be small (fitting the contents)

This commit is contained in:
upsiflu 2024-12-18 16:54:05 +01:00
parent c4d4289c6a
commit 84eb16bb01
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
front/src/components/ui/Card.vue
View File

@ -2,7 +2,7 @@
import { computed } from 'vue' import { computed } from 'vue'
import { type RouterLinkProps, RouterLink } from 'vue-router'; import { type RouterLinkProps, RouterLink } from 'vue-router';
import { type ColorProps, type PastelProps, type RaisedProps, type VariantProps, propsToColor } from '~/composables/colors' import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, propsToColor } from '~/composables/colors'
import Pill from './Pill.vue' import Pill from './Pill.vue'
import Alert from './Alert.vue' import Alert from './Alert.vue'
@ -14,22 +14,25 @@ interface Props extends Partial<RouterLinkProps> {
category?: true | "h1" | "h2" | "h3" | "h4" | "h5" category?: true | "h1" | "h2" | "h3" | "h4" | "h5"
image?: string | { src: string, style?: "withPadding" } image?: string | { src: string, style?: "withPadding" }
tags?: string[] tags?: string[]
small?: true
} }
const props = defineProps<Props & (PastelProps | ColorProps) & RaisedProps & VariantProps>() const props = defineProps<Props & (PastelProps | ColorProps | DefaultProps) & RaisedProps & VariantProps>()
const image = typeof props.image === 'string' ? { src: props.image } : props.image const image = typeof props.image === 'string' ? { src: props.image } : props.image
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http') return typeof props.to === 'string' && props.to.startsWith('http')
}) })
// const fallbackWidth =
</script> </script>
<style module> <style module>
.card { .card {
/* Override --width with your preferred value */ /* Override --width with your preferred value */
--fw-card-width: var(--width, 320px); --fw-card-width: var(--width, v-bind("props.small ? 'min-content' : '320px'"));
--fw-card-padding: 24px; --fw-card-padding: v-bind("props.small ? '16px' : '24px'");
position: relative; position: relative;
@ -82,6 +85,7 @@ const isExternalLink = computed(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
flex-shrink: 0;
} }
&.is-category>.title { &.is-category>.title {
@ -161,7 +165,7 @@ const isExternalLink = computed(() => {
</div> </div>
<img v-else-if="image" :src="image?.src" <img v-else-if="image" :src="image?.src"
:class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" /> :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
<Spacer v-else style="--size:12px" /> <Spacer v-else :size="props.small? 4 : 12" />
<!-- Content --> <!-- Content -->
<component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component> <component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
@ -176,9 +180,9 @@ const isExternalLink = computed(() => {
</Pill> </Pill>
</div> </div>
<div v-if="$slots.default" :class="$style.content"> <Layout no-gap v-if="$slots.default" :class="$style.content">
<slot /> <slot />
</div> </Layout>
<!-- Footer and Action --> <!-- Footer and Action -->
<div v-if="$slots.footer" :class="$style.footer"> <div v-if="$slots.footer" :class="$style.footer">
@ -188,7 +192,8 @@ const isExternalLink = computed(() => {
<div v-if="$slots.action" :class="$style.action"> <div v-if="$slots.action" :class="$style.action">
<slot name="action" /> <slot name="action" />
</div> </div>
<Spacer v-else-if="!$slots.footer" style="--size:16px" />
<Spacer v-if="!$slots.footer && !$slots.action" :size="props.small? 8 : 16" />
</Layout> </Layout>
</template> </template>