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

feat(ui): enable columns layout

This commit is contained in:
upsiflu 2024-12-17 23:11:56 +01:00
parent 1b5cfc7215
commit c2dcd6cdba
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import { useCssModule } from 'vue'
const props = defineProps< const props = defineProps<
{ columnWidth?: number, noGap?:true } { columnWidth?: number, noGap?:true }
& { [P in "stack" | "grid" | "flex"]?: true } & { [P in "stack" | "grid" | "flex" | "columns"]?: true }
& { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>() & { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
const classes = useCssModule() const classes = useCssModule()
const columnWidth = props.columnWidth ?? 320 const columnWidth = props.columnWidth ?? 320
@ -17,6 +17,7 @@ const columnWidth = props.columnWidth ?? 320
noGap || classes.gap, noGap || classes.gap,
props.grid ? classes.grid props.grid ? classes.grid
: props.flex ? classes.flex : props.flex ? classes.flex
: props.columns? classes.columns
: classes.stack : classes.stack
]"> ]">
<slot /> <slot />
@ -39,6 +40,12 @@ const columnWidth = props.columnWidth ?? 320
flex-grow:0; flex-grow:0;
} }
} }
&.columns{
column-count: auto;
column-width: calc(v-bind(columnWidth) * 1px);
display: block;
column-rule: 1px solid var(--border-color);
}
&.grid { &.grid {
display: grid; display: grid;
grid-template-columns: grid-template-columns:

30
front/ui-docs/components/ui/layout.md
View File

@ -150,6 +150,36 @@ Add space between vertically stacked items
</Tab> </Tab>
<Tab title="Columns" icon="𝌆">
Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
<Layout flex>
```vue-html
<Layout columns>
<Card title="A"></Card>
<Card title="B"></Card>
<Card title="C"></Card>
<Card title="D"></Card>
<Card title="E"></Card>
</Layout>
```
<div class="preview">
<Layout columns>
<Card title="A"></Card>
<Card title="B"></Card>
<Card title="C"></Card>
<Card title="D"></Card>
<Card title="E"></Card>
</Layout>
</div>
</Layout>
</Tab>
</Tabs> </Tabs>
## Common props ## Common props