local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: re-style the keyboard shortcuts menu (#996)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/996
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-11-14 16:35:41 +00:00
parent 7824ba089a
commit fcadbc352b
1 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/misc/keyboard-shortcuts/index.vue
View file

@ -1,6 +1,6 @@
<template>
<modal @close="close()">
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
<card class="has-background-white has-no-shadow keyboard-shortcuts" :title="$t('keyboardShortcuts.title')">
<template v-for="(s, i) in shortcuts" :key="i">
<h3>{{ $t(s.title) }}</h3>
@ -12,10 +12,11 @@
</div>
</div>
<dl>
<dl class="shortcut-list">
<template v-for="(sc, si) in s.shortcuts" :key="si">
<dt>{{ $t(sc.title) }}</dt>
<dt class="shortcut-title">{{ $t(sc.title) }}</dt>
<shortcut
class="shortcut-keys"
is="dd"
:keys="sc.keys"
:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
@ -47,8 +48,30 @@ export default {
}
</script>
<style>
dt {
font-weight: bold;
<style scoped>
.keyboard-shortcuts {
text-align: left;
}
.message:not(:last-child) {
margin-bottom: 1rem;
}
.message-body {
padding: .75rem;
}
.shortcut-list {
display: grid;
grid-template-columns: 2fr 1fr;
}
.shortcut-title {
margin-bottom: .5rem;
}
.shortcut-keys {
justify-content: end;
margin-bottom: .5rem;
}
</style>