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; object-fit: cover;
width: 100%; width: 100%;
aspect-ratio: 1; aspect-ratio: 1;
position:relative;
&.with-padding { &.with-padding {
margin: var(--fw-card-padding) var(--fw-card-padding) calc(var(--fw-card-padding) / 2) var(--fw-card-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; line-height: 1em;
// Content
> span {
line-height: initial;
}
// Decoration // Decoration
cursor: pointer; cursor: pointer;

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

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