viewer: unified CSS classes to kebab case

6 files changed, 13 insertions, 13 deletions

diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index ff354c6..7bbecec 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -28,7 +28,7 @@
     field="display"
     type="is-black"
     size="is-medium"
-    class="panelTagInput"
+    class="paneltag-input"
     @typing="searchTags"
     @add="onAdd"
     @remove="onRemove"
@@ -119,7 +119,7 @@ export default class LdTagInput extends Vue {
 </script>
 
 <style lang="scss">
-.panelTagInput .autocomplete .dropdown-content {
+.paneltag-input .autocomplete .dropdown-content {
   max-height: 300px;
 }
 </style>
diff --git a/viewer/src/views/GalleryPicture.vue b/viewer/src/views/GalleryPicture.vue
index 323333a..9f26282 100644
--- a/viewer/src/views/GalleryPicture.vue
+++ b/viewer/src/views/GalleryPicture.vue
@@ -21,7 +21,7 @@
   <div
     v-dragscroll
     class="scrollbar"
-    :class="{fitToScreen: !$uiStore.fullscreen, originalSize: $uiStore.fullscreen}"
+    :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
     @click="onClick"
     @dragscrollstart="dragging=true"
   >
@@ -50,7 +50,7 @@ export default class GalleryPicture extends Vue {
 </script>
 
 <style lang="scss">
-.fitToScreen {
+.fit-to-screen {
   display: flex;
   justify-content: space-around;
   height: 100%;
@@ -59,7 +59,7 @@ export default class GalleryPicture extends Vue {
     cursor: zoom-in;
   }
 }
-.originalSize {
+.original-size {
   display: block;
   text-align: center;
   cursor: grab;
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 41a59e1..2ed0bc2 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div class="forcedsize" :class="{preload: loading}">
+  <div class="forcedsize" :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
       class="thumbnail"
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index c202def..78d8a8a 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div :class="{fullscreen: $uiStore.fullscreen, fullWidth: $uiStore.fullWidth}">
+  <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}">
     <panel-top v-if="!isLoading" class="layout layout-top" />
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
@@ -99,9 +99,9 @@ html {
 }
 .fullscreen {
   --layout-top: 0px;
-  @extend .fullWidth;
+  @extend .fullwidth;
 }
-.fullWidth {
+.fullwidth {
   --layout-left: 0px;
   .layout {
     &.layout-left {
diff --git a/viewer/src/views/TopBreadcrumb.vue b/viewer/src/views/TopBreadcrumb.vue
index 1a14123..eb7fdd1 100644
--- a/viewer/src/views/TopBreadcrumb.vue
+++ b/viewer/src/views/TopBreadcrumb.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <ul class="pathBreadcrumb">
+  <ul class="ld-breadcrumb">
     <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
       <router-link :to="item.path">
         <fa-icon :icon="getIcon(item)" size="lg" />
@@ -47,7 +47,7 @@ export default class TopBreadcrumb extends Vue {
 </script>
 
 <style lang="scss">
-.pathBreadcrumb {
+.ld-breadcrumb {
   border-left: 2px solid rgba(white, 0.1);
   padding-left: 15px;
   display: flex;
diff --git a/viewer/src/views/TopCommand.vue b/viewer/src/views/TopCommand.vue
index b5d16e8..dc79fa7 100644
--- a/viewer/src/views/TopCommand.vue
+++ b/viewer/src/views/TopCommand.vue
@@ -22,13 +22,13 @@
     <div class="link" title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandTagsIcon()" size="lg" />
     </div>
-    <router-link to="/" :class="{disabled: isRoot()}" title="$t('title.home')">
+    <router-link to="/" :class="{'disabled': isRoot()}" title="$t('title.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
     <div class="link" title="$t('title.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </div>
-    <router-link :class="{disabled: isRoot()}" title="$t('title.parent')" :to="parent()">
+    <router-link :class="{'disabled': isRoot()}" title="$t('title.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
     </router-link>