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"> <Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions || cancel" class="modal-actions">
<slot name="actions" /> <slot name="actions" />
<Button v-if="cancel" autofocus :onClick="()=>{ isOpen = false }"> <Button v-if="cancel" secondary autofocus :onClick="()=>{ isOpen = false }">
{{ cancel }} {{ cancel }}
</Button> </Button>
</Layout> </Layout>

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

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

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

@ -334,42 +334,4 @@ primary
### Designing for small screens ### Designing for small screens
On slim phones, the content may only be 260px wide (Galaxy S5). Make sure the content wraps accordingly. On slim phones, with the default 32px paddings, 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>