diff options
author | pacien | 2021-07-04 17:35:17 +0200 |
---|---|---|
committer | pacien | 2021-07-04 17:35:17 +0200 |
commit | d48a9eb9a75d8e55f78964e884bb94efd23fcd9b (patch) | |
tree | 6058cc246b6546ed57b3ac7821a6ae775caf1fd5 /viewer | |
parent | 34fc1501f74f29d29737164e47977b7412c84ceb (diff) | |
parent | dfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0 (diff) | |
download | ldgallery-d48a9eb9a75d8e55f78964e884bb94efd23fcd9b.tar.gz |
Merge branch 'oz-css-modules' into develop
Reviewed-by: pacien <pacien.trangirard@pacien.net>
GitHub: closes #306
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/src/components/LdBreadcrumb.vue | 15 | ||||
-rw-r--r-- | viewer/src/components/LdCommand.vue | 12 | ||||
-rw-r--r-- | viewer/src/components/LdCommandSearch.vue | 6 | ||||
-rw-r--r-- | viewer/src/components/LdGallery.vue | 6 | ||||
-rw-r--r-- | viewer/src/components/LdProposition.vue | 23 | ||||
-rw-r--r-- | viewer/src/components/LdTagInput.vue | 6 | ||||
-rw-r--r-- | viewer/src/components/LdThumbnail.vue | 8 | ||||
-rw-r--r-- | viewer/src/components/item_handlers/LdDirectoryViewer.vue | 2 | ||||
-rw-r--r-- | viewer/src/components/item_handlers/LdPdfViewer.vue | 2 | ||||
-rw-r--r-- | viewer/src/components/item_handlers/LdVideoViewer.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/GalleryNavigation.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/GallerySearch.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 33 | ||||
-rw-r--r-- | viewer/src/views/PanelTop.vue | 2 |
14 files changed, 60 insertions, 61 deletions
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue index 2c17554..d518365 100644 --- a/viewer/src/components/LdBreadcrumb.vue +++ b/viewer/src/components/LdBreadcrumb.vue | |||
@@ -21,14 +21,15 @@ | |||
21 | <div | 21 | <div |
22 | ref="breadcrumb" | 22 | ref="breadcrumb" |
23 | v-dragscroll | 23 | v-dragscroll |
24 | class="ld-breadcrumb flex scrollbar" | 24 | class="flex scrollbar" |
25 | :class="$style.ldBreadcrumb" | ||
25 | @click.capture="e => dragScrollClickFix.onClickCapture(e)" | 26 | @click.capture="e => dragScrollClickFix.onClickCapture(e)" |
26 | @dragscrollstart="dragScrollClickFix.onDragScrollStart()" | 27 | @dragscrollstart="dragScrollClickFix.onDragScrollStart()" |
27 | @dragscrollend="dragScrollClickFix.onDragScrollEnd()" | 28 | @dragscrollend="dragScrollClickFix.onDragScrollEnd()" |
28 | @dragscrollmove="checkForOverflowMask" | 29 | @dragscrollmove="checkForOverflowMask" |
29 | > | 30 | > |
30 | <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div> | 31 | <div v-show="overflowMask" :class="$style.ldBreadcrumbOverflowMask"></div> |
31 | <ul class="ld-breadcrumb"> | 32 | <ul> |
32 | <li v-for="(item, idx) in currentItemPath" :key="item.path"> | 33 | <li v-for="(item, idx) in currentItemPath" :key="item.path"> |
33 | <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> | 34 | <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> |
34 | <router-link :to="item.path" class="link"> | 35 | <router-link :to="item.path" class="link"> |
@@ -89,10 +90,10 @@ export default class LdBreadcrumb extends Vue { | |||
89 | } | 90 | } |
90 | </script> | 91 | </script> |
91 | 92 | ||
92 | <style lang="scss"> | 93 | <style lang="scss" module> |
93 | @import "~@/assets/scss/theme.scss"; | 94 | @import "~@/assets/scss/theme.scss"; |
94 | 95 | ||
95 | .ld-breadcrumb-overflow-mask { | 96 | .ldBreadcrumbOverflowMask { |
96 | position: absolute; | 97 | position: absolute; |
97 | width: 100%; | 98 | width: 100%; |
98 | height: 100%; | 99 | height: 100%; |
@@ -104,7 +105,7 @@ export default class LdBreadcrumb extends Vue { | |||
104 | pointer-events: none; | 105 | pointer-events: none; |
105 | } | 106 | } |
106 | 107 | ||
107 | .ld-breadcrumb { | 108 | .ldBreadcrumb { |
108 | ul { | 109 | ul { |
109 | display: flex; | 110 | display: flex; |
110 | white-space: nowrap; | 111 | white-space: nowrap; |
@@ -117,7 +118,7 @@ export default class LdBreadcrumb extends Vue { | |||
117 | align-self: center; | 118 | align-self: center; |
118 | margin-right: $breadcrumb-margins; | 119 | margin-right: $breadcrumb-margins; |
119 | } | 120 | } |
120 | &.scrollbar { | 121 | &:global(.scrollbar) { |
121 | overflow-y: hidden; | 122 | overflow-y: hidden; |
122 | scrollbar-width: none; | 123 | scrollbar-width: none; |
123 | &::-webkit-scrollbar { | 124 | &::-webkit-scrollbar { |
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue index 7ffa670..19174ad 100644 --- a/viewer/src/components/LdCommand.vue +++ b/viewer/src/components/LdCommand.vue | |||
@@ -19,14 +19,14 @@ | |||
19 | --> | 19 | --> |
20 | 20 | ||
21 | <template> | 21 | <template> |
22 | <div class="flex command-btns"> | 22 | <div class="flex" :class="$style.commandBtns"> |
23 | <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()"> | 23 | <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()"> |
24 | <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" /> | 24 | <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" /> |
25 | </a> | 25 | </a> |
26 | <ld-command-sort /> | 26 | <ld-command-sort /> |
27 | <a | 27 | <a |
28 | :class="{ disabled: isEntryPoint() }" | 28 | class="link" |
29 | class="link command-secondary" | 29 | :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }" |
30 | :title="$t('command.back')" | 30 | :title="$t('command.back')" |
31 | @click="isEntryPoint() || $router.back()" | 31 | @click="isEntryPoint() || $router.back()" |
32 | > | 32 | > |
@@ -68,11 +68,11 @@ export default class LdCommand extends Vue { | |||
68 | } | 68 | } |
69 | </script> | 69 | </script> |
70 | 70 | ||
71 | <style lang="scss"> | 71 | <style lang="scss" module> |
72 | @import "~@/assets/scss/_buefy_variables.scss"; | 72 | @import "~@/assets/scss/_buefy_variables.scss"; |
73 | @import "~@/assets/scss/theme.scss"; | 73 | @import "~@/assets/scss/theme.scss"; |
74 | 74 | ||
75 | .command-btns { | 75 | .commandBtns { |
76 | background-color: $command-buttons-bgcolor; | 76 | background-color: $command-buttons-bgcolor; |
77 | justify-content: space-around; | 77 | justify-content: space-around; |
78 | vertical-align: middle; | 78 | vertical-align: middle; |
@@ -90,7 +90,7 @@ export default class LdCommand extends Vue { | |||
90 | @media only screen and (max-width: $tablet) { | 90 | @media only screen and (max-width: $tablet) { |
91 | flex: 0 1; | 91 | flex: 0 1; |
92 | 92 | ||
93 | > .command-secondary { | 93 | > .commandSecondary { |
94 | display: none; | 94 | display: none; |
95 | } | 95 | } |
96 | } | 96 | } |
diff --git a/viewer/src/components/LdCommandSearch.vue b/viewer/src/components/LdCommandSearch.vue index 33ab804..61b66f4 100644 --- a/viewer/src/components/LdCommandSearch.vue +++ b/viewer/src/components/LdCommandSearch.vue | |||
@@ -18,7 +18,7 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="flex webkit-flex-shrink-fix"> | 21 | <div class="flex" :class="$style.webkitFlexShrinkFix"> |
22 | <b-button @click="clear"> | 22 | <b-button @click="clear"> |
23 | <fa-icon icon="eraser" /> | 23 | <fa-icon icon="eraser" /> |
24 | <span>{{ $t("command.search.clear") }}</span> | 24 | <span>{{ $t("command.search.clear") }}</span> |
@@ -47,10 +47,10 @@ export default class LdCommandSearch extends Vue { | |||
47 | } | 47 | } |
48 | </script> | 48 | </script> |
49 | 49 | ||
50 | <style lang="scss"> | 50 | <style lang="scss" module> |
51 | // fix flexbox shrinking and overlap in old webkit versions | 51 | // fix flexbox shrinking and overlap in old webkit versions |
52 | // https://github.com/pacien/ldgallery/issues/183 | 52 | // https://github.com/pacien/ldgallery/issues/183 |
53 | .webkit-flex-shrink-fix { | 53 | .webkitFlexShrinkFix { |
54 | flex: none; | 54 | flex: none; |
55 | } | 55 | } |
56 | </style> | 56 | </style> |
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue index 1443927..e567e7c 100644 --- a/viewer/src/components/LdGallery.vue +++ b/viewer/src/components/LdGallery.vue | |||
@@ -19,7 +19,7 @@ | |||
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <ld-error v-if="hasNoResults" icon="search" :message="noresult" /> | 21 | <ld-error v-if="hasNoResults" icon="search" :message="noresult" /> |
22 | <div v-else class="thumbnail-tiles"> | 22 | <div v-else :class="$style.thumbnailTiles"> |
23 | <router-link v-for="item in sortedItems" :key="item.path" :to="item.path"> | 23 | <router-link v-for="item in sortedItems" :key="item.path" :to="item.path"> |
24 | <ld-thumbnail :item="item" /> | 24 | <ld-thumbnail :item="item" /> |
25 | </router-link> | 25 | </router-link> |
@@ -45,8 +45,8 @@ export default class LdPicture extends Vue { | |||
45 | } | 45 | } |
46 | </script> | 46 | </script> |
47 | 47 | ||
48 | <style lang="scss"> | 48 | <style lang="scss" module> |
49 | .thumbnail-tiles { | 49 | .thumbnailTiles { |
50 | display: flex; | 50 | display: flex; |
51 | flex-wrap: wrap; | 51 | flex-wrap: wrap; |
52 | align-items: center; | 52 | align-items: center; |
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue index 088e249..07b27f5 100644 --- a/viewer/src/components/LdProposition.vue +++ b/viewer/src/components/LdProposition.vue | |||
@@ -19,11 +19,14 @@ | |||
19 | --> | 19 | --> |
20 | 20 | ||
21 | <template> | 21 | <template> |
22 | <div class="proposition"> | 22 | <div :class="$style.proposition"> |
23 | <h2 v-if="showCategory && Object.keys(propositions).length" class="subtitle category">{{ title }}</h2> | 23 | <h2 v-if="showCategory && Object.keys(propositions).length" :class="[$style.subtitle, $style.category]"> |
24 | {{ title }} | ||
25 | </h2> | ||
24 | <div v-for="proposed in proposedTags" :key="proposed.rawTag"> | 26 | <div v-for="proposed in proposedTags" :key="proposed.rawTag"> |
25 | <a | 27 | <a |
26 | class="operation-btns link" | 28 | class="link" |
29 | :class="$style.operationBtns" | ||
27 | :title="$t('tag-propositions.substraction')" | 30 | :title="$t('tag-propositions.substraction')" |
28 | @click="add(Operation.SUBSTRACTION, proposed.rawTag)" | 31 | @click="add(Operation.SUBSTRACTION, proposed.rawTag)" |
29 | > | 32 | > |
@@ -31,7 +34,8 @@ | |||
31 | </a> | 34 | </a> |
32 | 35 | ||
33 | <a | 36 | <a |
34 | class="operation-btns link" |