viewer: use CSS modules

GitHub: closes #196

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 @@
   <div
     ref="breadcrumb"
     v-dragscroll
-    class="ld-breadcrumb flex scrollbar"
+    class="flex scrollbar"
+    :class="$style.ldBreadcrumb"
     @click.capture="e => dragScrollClickFix.onClickCapture(e)"
     @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
     @dragscrollmove="checkForOverflowMask"
   >
-    <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
-    <ul class="ld-breadcrumb">
+    <div v-show="overflowMask" :class="$style.ldBreadcrumbOverflowMask"></div>
+    <ul>
       <li v-for="(item, idx) in currentItemPath" :key="item.path">
         <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
         <router-link :to="item.path" class="link">
@@ -89,10 +90,10 @@ export default class LdBreadcrumb extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
-.ld-breadcrumb-overflow-mask {
+.ldBreadcrumbOverflowMask {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -104,7 +105,7 @@ export default class LdBreadcrumb extends Vue {
   pointer-events: none;
 }
 
-.ld-breadcrumb {
+.ldBreadcrumb {
   ul {
     display: flex;
     white-space: nowrap;
@@ -117,7 +118,7 @@ export default class LdBreadcrumb extends Vue {
     align-self: center;
     margin-right: $breadcrumb-margins;
   }
-  &.scrollbar {
+  &:global(.scrollbar) {
     overflow-y: hidden;
     scrollbar-width: none;
     &::-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 @@
 -->
 
 <template>
-  <div class="flex command-btns">
+  <div class="flex" :class="$style.commandBtns">
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" />
     </a>
     <ld-command-sort />
     <a
-      :class="{ disabled: isEntryPoint() }"
-      class="link command-secondary"
+      class="link"
+      :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
       :title="$t('command.back')"
       @click="isEntryPoint() || $router.back()"
     >
@@ -68,11 +68,11 @@ export default class LdCommand extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/_buefy_variables.scss";
 @import "~@/assets/scss/theme.scss";
 
-.command-btns {
+.commandBtns {
   background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
@@ -90,7 +90,7 @@ export default class LdCommand extends Vue {
   @media only screen and (max-width: $tablet) {
     flex: 0 1;
 
-    > .command-secondary {
+    > .commandSecondary {
       display: none;
     }
   }
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 @@
 -->
 
 <template>
-  <div class="flex webkit-flex-shrink-fix">
+  <div class="flex" :class="$style.webkitFlexShrinkFix">
     <b-button @click="clear">
       <fa-icon icon="eraser" />
       <span>{{ $t("command.search.clear") }}</span>
@@ -47,10 +47,10 @@ export default class LdCommandSearch extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 // fix flexbox shrinking and overlap in old webkit versions
 // https://github.com/pacien/ldgallery/issues/183
-.webkit-flex-shrink-fix {
+.webkitFlexShrinkFix {
   flex: none;
 }
 </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 @@
 
 <template>
   <ld-error v-if="hasNoResults" icon="search" :message="noresult" />
-  <div v-else class="thumbnail-tiles">
+  <div v-else :class="$style.thumbnailTiles">
     <router-link v-for="item in sortedItems" :key="item.path" :to="item.path">
       <ld-thumbnail :item="item" />
     </router-link>
@@ -45,8 +45,8 @@ export default class LdPicture extends Vue {
 }
 </script>
 
-<style lang="scss">
-.thumbnail-tiles {
+<style lang="scss" module>
+.thumbnailTiles {
   display: flex;
   flex-wrap: wrap;
   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 @@
 -->
 
 <template>
-  <div class="proposition">
-    <h2 v-if="showCategory && Object.keys(propositions).length" class="subtitle category">{{ title }}</h2>
+  <div :class="$style.proposition">
+    <h2 v-if="showCategory && Object.keys(propositions).length" :class="[$style.subtitle, $style.category]">
+      {{ title }}
+    </h2>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag">
       <a
-        class="operation-btns link"
+        class="link"
+        :class="$style.operationBtns"
         :title="$t('tag-propositions.substraction')"
         @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
       >
@@ -31,7 +34,8 @@
       </a>
 
       <a
-        class="operation-btns link"
+        class="link"
+        :class="$style.operationBtns"
         :title="$t('tag-propositions.addition')"
         @click="add(Operation.ADDITION, proposed.rawTag)"