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

fix(ui): shortcuts modal without table and bottom lines

This commit is contained in:
ArneBo 2024-12-19 11:44:57 +01:00 committed by upsiflu
parent d8111dcbf6
commit 33ef977860
1 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
front/src/components/ShortcutsModal.vue
View File

@ -4,6 +4,7 @@ import { computed } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue' import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
const model = defineModel<boolean>() const model = defineModel<boolean>()
@ -103,42 +104,47 @@ const player = computed(() => [
:title="t('components.ShortcutsModal.header.modal')" :title="t('components.ShortcutsModal.header.modal')"
v-model="model"> v-model="model">
<section class="scrolling content"> <section class="scrolling content">
<Layout flex> <Layout columns style="column-gap: 64px; column-rule: none;">
<div class="column" :class="$style.withPadding"> <div class="column">
<table <div
v-for="section in player" v-for="section in player"
:key="section.title" :key="section.title"
class="ui compact basic table" style="break-inside: avoid;"
> >
<h3>{{ section.title }}</h3> <h3 style="margin-top: 0px;">{{ section.title }}</h3>
<tbody> <layout stack no-gap>
<tr <div
v-for="shortcut in section.shortcuts" v-for="shortcut in section.shortcuts"
:key="shortcut.summary" :key="shortcut.summary"
> >
<td :class="$style.description">{{ shortcut.summary }}</td> <layout flex>
<td>          <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button></td> <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
</tr> <Spacer grow />
</tbody> <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button>
</table> </layout>
<hr />
</div> </div>
<div class="column" :class="$style.withPadding"> </layout>
<table </div>
<div
v-for="section in general" v-for="section in general"
:key="section.title" :key="section.title"
class="ui compact basic table"
> >
<h3>{{ section.title }}</h3> <h3>{{ section.title }}</h3>
<tbody> <layout stack no-gap>
<tr <div
v-for="shortcut in section.shortcuts" v-for="shortcut in section.shortcuts"
:key="shortcut.summary" :key="shortcut.summary"
> >
<td :class="$style.description">{{ shortcut.summary }}</td> <layout flex>
<td>          <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button></td> <span :class="$style.description" style="align-self: center;">{{ shortcut.summary }}</span>
</tr> <Spacer grow />
</tbody> <Button style="pointer-events:none;" class="is-icon-only">{{ shortcut.key }}</Button>
</table> </layout>
<hr />
</div>
</layout>
</div>
</div> </div>
</Layout> </Layout>
</section> </section>