diff options
Diffstat (limited to 'viewer/src')
-rw-r--r-- | viewer/src/components/async/AsyncLdMarkdown.vue | 14 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 5 | ||||
-rw-r--r-- | viewer/src/views/layout/left/LayoutInformation.vue | 8 | ||||
-rw-r--r-- | viewer/src/views/layout/left/LayoutTagInput.vue | 16 |
4 files changed, 21 insertions, 22 deletions
diff --git a/viewer/src/components/async/AsyncLdMarkdown.vue b/viewer/src/components/async/AsyncLdMarkdown.vue index 213c11c..c3f368a 100644 --- a/viewer/src/components/async/AsyncLdMarkdown.vue +++ b/viewer/src/components/async/AsyncLdMarkdown.vue | |||
@@ -40,7 +40,6 @@ const html = computed(() => marked(props.markdown)); | |||
40 | <style lang="scss" module> | 40 | <style lang="scss" module> |
41 | .markdown { | 41 | .markdown { |
42 | color: white; | 42 | color: white; |
43 | line-height: 1.7; | ||
44 | word-wrap: break-word; | 43 | word-wrap: break-word; |
45 | 44 | ||
46 | a { | 45 | a { |
@@ -52,19 +51,10 @@ const html = computed(() => marked(props.markdown)); | |||
52 | background-color: #666; | 51 | background-color: #666; |
53 | } | 52 | } |
54 | 53 | ||
55 | p, | ||
56 | blockquote, | ||
57 | ul, | ||
58 | ol, | ||
59 | dl, | ||
60 | table, | ||
61 | pre { | ||
62 | margin: 15px 0; | ||
63 | } | ||
64 | |||
65 | ul, | 54 | ul, |
66 | ol { | 55 | ol { |
67 | padding-left: 30px; | 56 | list-style-type: disc; |
57 | padding-left: 1em; | ||
68 | } | 58 | } |
69 | 59 | ||
70 | h1 { | 60 | h1 { |
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index d8b3300..30bfe97 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue | |||
@@ -26,7 +26,10 @@ | |||
26 | /> | 26 | /> |
27 | <template v-else-if="galleryStore.config && galleryStore.galleryIndex"> | 27 | <template v-else-if="galleryStore.config && galleryStore.galleryIndex"> |
28 | <LayoutTop :class="[$style.layout, $style.layoutTop]" /> | 28 | <LayoutTop :class="[$style.layout, $style.layoutTop]" /> |
29 | <LayoutLeft :class="[$style.layout, $style.layoutLeft]" /> | 29 | <LayoutLeft |
30 | v-show="!uiStore.fullWidth" | ||
31 | :class="[$style.layout, $style.layoutLeft]" | ||
32 | /> | ||
30 | <router-view | 33 | <router-view |
31 | ref="content" | 34 | ref="content" |
32 | :class="[$style.layout, $style.layoutContent]" | 35 | :class="[$style.layout, $style.layoutContent]" |
diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue index 780a458..9dfb311 100644 --- a/viewer/src/views/layout/left/LayoutInformation.vue +++ b/viewer/src/views/layout/left/LayoutInformation.vue | |||
@@ -67,6 +67,7 @@ const formatDate = computed(() => { | |||
67 | .infopanel { | 67 | .infopanel { |
68 | padding: 2px 2px 7px 7px; | 68 | padding: 2px 2px 7px 7px; |
69 | overflow-wrap: break-word; | 69 | overflow-wrap: break-word; |
70 | max-height: 50%; | ||
70 | 71 | ||
71 | .title { | 72 | .title { |
72 | font-weight: bold; | 73 | font-weight: bold; |
@@ -80,13 +81,6 @@ const formatDate = computed(() => { | |||
80 | > * { | 81 | > * { |
81 | margin-top: 5px; | 82 | margin-top: 5px; |
82 | } | 83 | } |
83 | ul, | ||
84 | ol { | ||
85 | margin-left: 1em; | ||
86 | } | ||
87 | ul { | ||
88 | list-style-type: disc; | ||
89 | } | ||
90 | a { | 84 | a { |
91 | color: $palette-200; | 85 | color: $palette-200; |
92 | &:hover { | 86 | &:hover { |
diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue index a37c546..9ee6f8a 100644 --- a/viewer/src/views/layout/left/LayoutTagInput.vue +++ b/viewer/src/views/layout/left/LayoutTagInput.vue | |||
@@ -23,7 +23,7 @@ | |||
23 | v-model="search" | 23 | v-model="search" |
24 | :placeholder="t('tagInput.placeholder')" | 24 | :placeholder="t('tagInput.placeholder')" |
25 | :tabindex="50" | 25 | :tabindex="50" |
26 | @focus="e => (e.target as HTMLInputElement).select()" | 26 | @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()" |
27 | @keypress.enter="inputEnter" | 27 | @keypress.enter="inputEnter" |
28 | @keydown.backspace="inputBackspace" | 28 | @keydown.backspace="inputBackspace" |
29 | /> | 29 | /> |
@@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue'; | |||
58 | import LdInput from '@/components/LdInput.vue'; | 58 | import LdInput from '@/components/LdInput.vue'; |
59 | import { useIndexFactory } from '@/services/indexFactory'; | 59 | import { useIndexFactory } from '@/services/indexFactory'; |
60 | import { useGalleryStore } from '@/store/galleryStore'; | 60 | import { useGalleryStore } from '@/store/galleryStore'; |
61 | import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core'; | 61 | import { useUiStore } from '@/store/uiStore'; |
62 | import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core'; | ||
62 | import { computed, ref, StyleValue, watchEffect } from 'vue'; | 63 | import { computed, ref, StyleValue, watchEffect } from 'vue'; |
63 | import { useI18n } from 'vue-i18n'; | 64 | import { useI18n } from 'vue-i18n'; |
64 | 65 | ||
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']); | |||
69 | const model = useVModel(props, 'modelValue', emit); | 70 | const model = useVModel(props, 'modelValue', emit); |
70 | 71 | ||
71 | const { t } = useI18n(); | 72 | const { t } = useI18n(); |
73 | const uiStore = useUiStore(); | ||
72 | const galeryStore = useGalleryStore(); | 74 | const galeryStore = useGalleryStore(); |
73 | const indexFactory = useIndexFactory(); | 75 | const indexFactory = useIndexFactory(); |
74 | 76 | ||
@@ -88,6 +90,16 @@ const { focused } = useFocus(input); | |||
88 | 90 | ||
89 | // --- | 91 | // --- |
90 | 92 | ||
93 | const controlState = useKeyModifier('Control'); | ||
94 | onKeyStroke('k', e => { | ||
95 | if (!controlState.value || focused.value) return; | ||
96 | e.preventDefault(); | ||
97 | uiStore.toggleFullWidth(false); | ||
98 | focused.value = true; | ||
99 | }); | ||
100 | |||
101 | // --- | ||
102 | |||
91 | const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) | 103 | const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) |
92 | .filter(filterAlreadyPresent) | 104 | .filter(filterAlreadyPresent) |
93 | .sort((a, b) => b.items.length - a.items.length)); | 105 | .sort((a, b) => b.items.length - a.items.length)); |