feat: add message component
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
a2f65d86c2
commit
72b44567b8
|
@ -4,13 +4,11 @@
|
||||||
<template v-for="(s, i) in shortcuts" :key="i">
|
<template v-for="(s, i) in shortcuts" :key="i">
|
||||||
<h3>{{ $t(s.title) }}</h3>
|
<h3>{{ $t(s.title) }}</h3>
|
||||||
|
|
||||||
<div class="message is-primary">
|
<message>
|
||||||
<div class="message-body">
|
{{
|
||||||
{{
|
s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
|
||||||
s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
|
}}
|
||||||
}}
|
</message>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<dl class="shortcut-list">
|
<dl class="shortcut-list">
|
||||||
<template v-for="(sc, si) in s.shortcuts" :key="si">
|
<template v-for="(sc, si) in s.shortcuts" :key="si">
|
||||||
|
@ -30,11 +28,15 @@
|
||||||
<script>
|
<script>
|
||||||
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
|
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
|
||||||
import Shortcut from '@/components/misc/shortcut.vue'
|
import Shortcut from '@/components/misc/shortcut.vue'
|
||||||
|
import Message from '@/components/misc/message'
|
||||||
import {KEYBOARD_SHORTCUTS} from './shortcuts'
|
import {KEYBOARD_SHORTCUTS} from './shortcuts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'keyboard-shortcuts',
|
name: 'keyboard-shortcuts',
|
||||||
components: {Shortcut},
|
components: {
|
||||||
|
Message,
|
||||||
|
Shortcut,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
shortcuts: KEYBOARD_SHORTCUTS,
|
shortcuts: KEYBOARD_SHORTCUTS,
|
||||||
|
|
21
src/components/misc/message.vue
Normal file
21
src/components/misc/message.vue
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<div class="message">
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'message',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.message {
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
border: 1px solid var(--primary);
|
||||||
|
background: hsla(var(--primary-hsl), .05);
|
||||||
|
margin: .5rem 0;
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -2,14 +2,9 @@
|
||||||
<div class="no-auth-wrapper">
|
<div class="no-auth-wrapper">
|
||||||
<div class="noauth-container">
|
<div class="noauth-container">
|
||||||
<Logo class="logo" width="400" height="117" />
|
<Logo class="logo" width="400" height="117" />
|
||||||
<div class="message is-info" v-if="motd !== ''">
|
<message v-if="motd !== ''">
|
||||||
<div class="message-header">
|
{{ motd }}
|
||||||
<p>{{ $t('misc.info') }}</p>
|
</message>
|
||||||
</div>
|
|
||||||
<div class="message-body">
|
|
||||||
{{ motd }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -17,6 +12,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Logo from '@/components/home/Logo.vue'
|
import Logo from '@/components/home/Logo.vue'
|
||||||
|
import message from '@/components/misc/message'
|
||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
import {computed} from 'vue'
|
import {computed} from 'vue'
|
||||||
|
|
||||||
|
|
|
@ -193,10 +193,6 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-body {
|
|
||||||
padding: .5rem .75rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
// @import "bulma-css-variables/sass/components/level"; // not used
|
// @import "bulma-css-variables/sass/components/level"; // not used
|
||||||
@import "bulma-css-variables/sass/components/media";
|
@import "bulma-css-variables/sass/components/media";
|
||||||
@import "bulma-css-variables/sass/components/menu";
|
@import "bulma-css-variables/sass/components/menu";
|
||||||
@import "bulma-css-variables/sass/components/message";
|
//@import "bulma-css-variables/sass/components/message";
|
||||||
@import "bulma-css-variables/sass/components/modal";
|
@import "bulma-css-variables/sass/components/modal";
|
||||||
@import "bulma-css-variables/sass/components/navbar";
|
@import "bulma-css-variables/sass/components/navbar";
|
||||||
@import "bulma-css-variables/sass/components/pagination";
|
@import "bulma-css-variables/sass/components/pagination";
|
||||||
|
|
Reference in New Issue
Block a user