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

fix(ui): set header spacing according to designs (24px/68px)

This commit is contained in:
upsiflu 2025-01-20 19:17:28 +02:00
parent d20744bb70
commit 8eeeb3f8f8
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/components/ui/Header.vue
View File

@ -21,16 +21,11 @@ const heading =
: props.h2 ? ({ h2: props.h2 }) as const : props.h2 ? ({ h2: props.h2 }) as const
: ({ h3: props.h3 }) as const : ({ h3: props.h3 }) as const
console.log("HEADING", heading)
const numberOfColumnsPerItem =
'noItems' in props && props.noItems ? 1 : 'tinyItems' in props && props.tinyItems ? 2 : 'smallItems' in props && props['smallItems'] ? 3 : 4
const { style, ...fallthroughProps } = useAttrs() const { style, ...fallthroughProps } = useAttrs()
</script> </script>
<template> <template>
<Layout header flex> <Layout header flex gap-24>
<div v-if="$slots.image"> <div v-if="$slots.image">
<slot name="image" /> <slot name="image" />
</div> </div>
@ -40,7 +35,7 @@ const { style, ...fallthroughProps } = useAttrs()
> >
<!-- Set distance between baseline and previous row --> <!-- Set distance between baseline and previous row -->
<Spacer v <Spacer v
:size="64" :size="68"
style="align-self: baseline;" style="align-self: baseline;"
/> />
<Heading v-bind="heading" style="align-self: baseline; padding:0 0 24px 0; margin:0;"/> <Heading v-bind="heading" style="align-self: baseline; padding:0 0 24px 0; margin:0;"/>

2
front/src/components/ui/Layout.vue
View File

@ -9,7 +9,7 @@ const props = defineProps<{
noWrap?: true, noWrap?: true,
} & { [P in "stack" | "grid" | "flex" | "columns" | "row" | "page"]?: true | string } } & { [P in "stack" | "grid" | "flex" | "columns" | "row" | "page"]?: true | string }
& { [C in "nav" | "aside" | "header" | "footer" | "main" | "label" | "form" | "h1" | "h2" | "h3" | "h4" | "h5"]?: true } & { [C in "nav" | "aside" | "header" | "footer" | "main" | "label" | "form" | "h1" | "h2" | "h3" | "h4" | "h5"]?: true }
& { [G in 'no-gap' | `gap-${'4' | '8' | '12' | '16' | '32' | '64' | 'auto'}` ]?: true } & { [G in 'no-gap' | `gap-${'4' | '8' | '12' | '16' | '24' | '32' | '64' | 'auto'}` ]?: true }
& (PastelProps | ColorProps | DefaultProps) & (PastelProps | ColorProps | DefaultProps)
& RaisedProps & RaisedProps
& VariantProps & VariantProps

8
front/ui-docs/components/ui/layout/header.md
View File

@ -67,6 +67,14 @@ Make sure to keep the minimum width of the title and the content area narrow to
::: :::
::: tip Spacing:
The distance between the image and the content area is 24px (`gap-24`). The title baseline is at 68px below top.
[-> Reference design (Penpot)](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=6ca536f0-0f5f-11ed-adb9-fff9e854a67c)
:::
### Add an action to the right of the heading ### Add an action to the right of the heading
-> Use the `action` prop [which is the same as in the `Section` component](/components/ui/layout/section#provide-an-action). -> Use the `action` prop [which is the same as in the `Section` component](/components/ui/layout/section#provide-an-action).