changeset 3144:7d33eff62dc6

client: prepared diagram legend component to support multiple instances
author Markus Kottlaender <markus@intevation.de>
date Fri, 03 May 2019 10:30:07 +0200
parents 8fdbc524e7b5
children d33a5c1522dc
files client/src/components/DiagramLegend.vue
diffstat 1 files changed, 6 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/DiagramLegend.vue	Fri May 03 10:22:58 2019 +0200
+++ b/client/src/components/DiagramLegend.vue	Fri May 03 10:30:07 2019 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['d-flex border-right', { collapsed }]" id="diagram-legend">
+  <div :class="['diagram-legend', { collapsed }]">
     <span class="box-control toggle" @click="collapsed = !collapsed">
       <font-awesome-icon icon="angle-left" fixed-width />
     </span>
@@ -14,11 +14,13 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-#diagram-legend
+<style lang="sass">
+.diagram-legend
   position: relative
   width: 180px
   font-size: 0.8rem
+  display: flex
+  border-right: solid 1px #dee2e6
   .toggle
     margin-left: 0
     position: absolute
@@ -28,6 +30,7 @@
       transition: transform 0.3s
   &.collapsed
     width: 0
+    border-right: none
     .toggle
       left: 0.25rem
       svg