viewer: information panel scrollbar and collapse with animation

github: resolves #78

2 files changed, 17 insertions, 0 deletions

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0c351e5..c59eba9 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -76,3 +76,7 @@ $proposed-category-bgcolor: $palette-700;
 
 $layout-top: 45px;
 $layout-left: 250px;
+
+// Transitions
+
+$transition-flex-expand: 0.1s;
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
new file mode 100644
index 0000000..160f625
--- /dev/null
+++ b/viewer/src/assets/scss/transition.scss
@@ -0,0 +1,13 @@
+@import "~@/assets/scss/theme.scss";
+
+// === Transitions for Vue
+
+.flex-expand-enter-active, .flex-expand-leave-active {
+  transition: max-height $transition-flex-expand linear;
+}
+.flex-expand-enter, .flex-expand-leave-to {
+  max-height: 0%;
+}
+.flex-expand-enter-to, .flex-expand-leave {
+  max-height: 100%;
+}