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

fix(regression): button width CSS definition

This commit is contained in:
upsiflu 2025-01-02 20:23:08 +01:00
parent 2d5d7ee2ad
commit 4a62f05d1e
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -136,6 +136,7 @@ const attributes = computed(() =>
object-fit: cover;
width: 100%;
aspect-ratio: 1;
position:relative;
&.with-padding {
margin: var(--fw-card-padding) var(--fw-card-padding) calc(var(--fw-card-padding) / 2) var(--fw-card-padding);

6
front/src/components/ui/Link.vue
View File

@ -91,6 +91,12 @@ onMounted(() => {
line-height: 1em;
// Content
> span {
line-height: initial;
}
// Decoration
cursor: pointer;

18
front/src/composables/width.ts
View File

@ -15,23 +15,23 @@ export type Key = KeysOfUnion<WidthProps>
const styles = {
minContent: 'width: min-content;',
tiny: "width: 124px; grid-column: span 2;",
buttonWidth: "width: max(136px, min-content); grid-column: span 2; flex-grow: 0; align-self: start;",
buttonWidth: "width: 136px; grid-column: span 2; flex-grow: 0; min-width: min-content;",
small: "width: 202px; grid-column: span 3;",
medium: "width: 280px; grid-column: span 4;",
auto: "width: auto;",
full: "width: auto; grid-column: 1 / -1; place-self: stretch; flex-grow: 1;",
width: (w:string)=>`width: ${w}; flex-grow:0;`,
} as const satisfies Record<Key, string|((w:string)=>string)>;
width: (w: string) => `width: ${w}; flex-grow:0;`,
} as const satisfies Record<Key, string | ((w: string) => string)>;
const getStyle = (props : Partial<WidthProps>) => (key : Key):string =>
const getStyle = (props: Partial<WidthProps>) => (key: Key): string =>
// @ts-ignore
(typeof styles[key] === 'function' && key in props) ?
typeof styles[key] === 'function' && key in props ?
styles[key](
// TODO: Make the typescript compiler understand `key in props`
// @ts-ignore
props[key]
)
: styles[key]
)
: styles[key]
// All keys are exclusive
const conflicts: Set<Key>[] = [
@ -41,7 +41,7 @@ const conflicts: Set<Key>[] = [
const merge = (rules: string[]) => (attributes: HTMLAttributes = {}) =>
rules.length === 0 ? attributes : ({
...attributes,
style: rules.join(' ') + ('style' in attributes ? attributes.style + ' ' : '')
style: rules.join(' ') + ('style' in attributes ? ' ' + attributes.style : '')
})
/**
@ -60,7 +60,7 @@ const merge = (rules: string[]) => (attributes: HTMLAttributes = {}) =>
export const width = <TProps extends Partial<WidthProps>>(
props: TProps,
defaults: Key[] = []
) => merge (
) => merge(
(Object.entries(props) as Entries<TProps>).reduce(
((acc, [key, value]) =>
value && key in styles ?