aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2021-07-04 02:22:39 +0200
committerpacien2021-07-04 16:32:04 +0200
commitdfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0 (patch)
tree6058cc246b6546ed57b3ac7821a6ae775caf1fd5
parentcddf5d5c42795388dbd9058268160f1e867d64f5 (diff)
downloadldgallery-dfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0.tar.gz
viewer: use CSS modules
GitHub: closes #196
-rw-r--r--viewer/src/components/LdBreadcrumb.vue15
-rw-r--r--viewer/src/components/LdCommand.vue12
-rw-r--r--viewer/src/components/LdCommandSearch.vue6
-rw-r--r--viewer/src/components/LdGallery.vue6
-rw-r--r--viewer/src/components/LdProposition.vue23
-rw-r--r--viewer/src/components/LdTagInput.vue6
-rw-r--r--viewer/src/components/LdThumbnail.vue8
-rw-r--r--viewer/src/components/item_handlers/LdDirectoryViewer.vue2
-rw-r--r--viewer/src/components/item_handlers/LdPdfViewer.vue2
-rw-r--r--viewer/src/components/item_handlers/LdVideoViewer.vue2
-rw-r--r--viewer/src/views/GalleryNavigation.vue2
-rw-r--r--viewer/src/views/GallerySearch.vue2
-rw-r--r--viewer/src/views/PanelTop.vue2
13 files changed, 41 insertions, 47 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" 37 class="link"
38 :class="$style.operationBtns"
35 :title="$t('tag-propositions.addition')" 39 :title="$t('tag-propositions.addition')"
36 @click="add(Operation.ADDITION, proposed.rawTag)" 40 @click="add(Operation.ADDITION, proposed.rawTag)"