1 files changed, 12 insertions, 11 deletions

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 6059162..19174ad 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -19,16 +19,16 @@
 -->
 
 <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()"
+      @click="isEntryPoint() || $router.back()"
     >
       <fa-icon icon="arrow-left" size="lg" />
     </a>
@@ -40,12 +40,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Item } from "@/@types/gallery";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Item[];
 
   get commandToggleSearchPanelIcon(): string {
     return this.$uiStore.fullWidth ? "search" : "angle-double-left";
@@ -55,7 +56,7 @@ export default class LdCommand extends Vue {
     return this.currentItemPath.length <= 1 && !this.$uiStore.searchMode;
   }
 
-  get isEntryPoint(): boolean {
+  isEntryPoint(): boolean {
     return history.state?.ldgallery === "ENTRYPOINT"; // Set by MainLayout.vue
   }
 
@@ -67,18 +68,18 @@ 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;
   align-items: center;
   flex: 0 0 $layout-left;
 
-  > a {
+  > * {
     // normalise icon active boxes
     width: $layout-top;
     line-height: $layout-top;
@@ -89,7 +90,7 @@ export default class LdCommand extends Vue {
   @media only screen and (max-width: $tablet) {
     flex: 0 1;
 
-    > .command-secondary {
+    > .commandSecondary {
       display: none;
     }
   }