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

fix(ui): minor Modal component fixes

This commit is contained in:
upsiflu 2025-02-06 16:24:26 +01:00
parent 0fe648ca6d
commit acae8e5f7d
3 changed files with 3 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,7 +82,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
<Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions || cancel" class="modal-actions">
<slot name="actions" />
<Button v-if="cancel" autofocus :onClick="()=>{ isOpen = false }">
<Button v-if="cancel" secondary autofocus :onClick="()=>{ isOpen = false }">
{{ cancel }}
</Button>
</Layout>

2
front/src/components/ui/modal.scss
View File

@ -66,7 +66,7 @@
}
.modal-actions {
padding: 0.75rem 2rem 1rem;
padding: 0 2rem 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: flex-start;

40
front/ui-docs/components/ui/modal.md
View File

@ -334,42 +334,4 @@ primary
### Designing for small screens
On slim phones, the content may only be 260px wide (Galaxy S5). Make sure the content wraps accordingly.
### Long, scrolling content
Consider using an indicator such as a line or a shadow to convey that there is content below the fold.
```vue-html
<Button primary @click="isOpen9 = true">
Open modal
</Button>
<Modal v-model="isOpen9" title="Long content">
Nested modal content
<section v-for="index in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
<h2>{{ index }}</h2>
<p>
<span v-for="_ in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">Lorem ipsum dolor sit amet.</span>
</p>
</section>
<template #actions>
<div style="background: currentcolor; opacity: .2; width: 100%; height: 1px;" > </div>
</template>
</Modal>
```
<Button primary @click="isOpen9 = true">
Open modal
</Button>
<Modal v-model="isOpen9" title="Long content">
Nested modal content
<section v-for="index in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
<h2>{{ index }}</h2>
<p>
<span v-for="_ in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">Lorem ipsum dolor sit amet.</span>
</p>
</section>
<template #actions>
<div style="background: currentcolor; opacity: .2; width: 100%; height: 1px;" > </div>
</template>
</Modal>
On slim phones, with the default 32px paddings, the content may only be 260px wide (Galaxy S5). Make sure the content wraps accordingly.