viewer: information panel scrollbar and collapse with animation

github: resolves #78

2 files changed, 16 insertions, 12 deletions

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2dd7a57..80778f6 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -106,7 +106,7 @@ html {
 }
 .layout {
   position: fixed;
-  transition: all 0.1s linear;
+  transition: all $transition-flex-expand linear;
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index f8d6faf..12c95d1 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div class="flex-column sidebar">
+  <div class="flex-column" :class="$style.sidebar">
     <ld-tag-input
       :search-filters.sync="searchFilters"
       :tags-index="$galleryStore.tagsIndex"
@@ -26,7 +26,7 @@
     />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
-    <div class="scrollbar no-scroll-x flex-grow-1">
+    <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrink1000">
       <ld-proposition
         v-for="category in $galleryStore.tagsCategories"
         :key="category.tag"
@@ -37,13 +37,13 @@
         :current-tags="currentTags"
       />
     </div>
-    <b-collapse animation="slide" :open.sync="infoOpen">
-      <h1 slot="trigger" class="flex title">
-        {{ $t("panelLeft.information.title") }}
-        <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
-      </h1>
-      <ld-information :item="$galleryStore.currentItem" />
-    </b-collapse>
+    <h1 class="flex title" @click="infoOpen = !infoOpen">
+      {{ $t("panelLeft.information.title") }}
+      <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
+    </h1>
+    <transition name="flex-expand">
+      <ld-information v-show="infoOpen" :item="$galleryStore.currentItem" class="scrollbar no-scroll-x" />
+    </transition>
   </div>
 </template>
 
@@ -92,11 +92,11 @@ export default class PanelLeft extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
 .sidebar {
-  .title {
+  :global(.title) {
     background-color: $proposed-category-bgcolor;
     padding: 0.2em 0.5em;
     margin: 0 0 1px 0;
@@ -109,4 +109,8 @@ export default class PanelLeft extends Vue {
     }
   }
 }
+
+.flexShrink1000 {
+  flex-shrink: 1000;
+}
 </style>