Merge pull request #73 from SourceCodeOER/fix_front

Fix front

Author: dewita

components/Panel/Item/FilterPanel.vue

@@ -147,7 +147,7 @@
     /**
      * The current opened tag selecter component
      */
-    selectedTagSelecter: CheckBoxSelecter | undefined = undefined;
+    selectedTagSelecter: CheckBoxSelecter | RadioButtonSelecter | undefined = undefined;
     /**
      * If active, the input form is displayed to let the user enters the name of the favorite
      */
@@ -406,7 +406,7 @@
      * Save the current tagSelecter or close a tag selecter if previously activated
      * @param tagSelecter
      */
-    toggleList(tagSelecter: CheckBoxSelecter) {
+    toggleList(tagSelecter: CheckBoxSelecter | RadioButtonSelecter) {
       if (this.selectedTagSelecter !== undefined) {
         // @ts-ignore
         this.selectedTagSelecter.closeList();

components/Panel/Panel.vue

@@ -127,7 +127,7 @@
 
   .panel__main {
     .panel__nav__wrapper {
-      position: sticky;
+      position: absolute;
       top: 0;
       left: 0;
       right: 0;

components/Panel/PanelItem.vue

@@ -55,6 +55,7 @@
 <style lang="scss" scoped>
   .panel__item {
     height: calc(100% - 50px);
+    margin-top: 50px;
     overflow-y: scroll;
     overflow-x: hidden;
   }

components/Search/RadioButtonSelecter.vue

@@ -4,7 +4,7 @@
       <Icon type="arrowRight"/>
       <slot></slot>
     </span>
-    <ul :class="{active}">
+    <ul :class="{active}" ref="list">
       <li>
         <input type="text" class="input--primary-color" v-model="filter" placeholder="Filtrer">
       </li>
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-  import {Vue, Component, Prop, Emit, Watch} from "vue-property-decorator";
+  import {Vue, Component, Prop, Emit, Watch, Ref} from "vue-property-decorator";
   import Icon from "~/components/Symbols/Icon.vue";
   import {RadiobuttonObject, RadiobuttonSelecterObjectEmitted} from "~/types";
 
@@ -43,6 +43,8 @@
     @Prop({type: Array, required: true}) readonly defaultOptions!: RadiobuttonObject[];
     @Prop({default: 'default'}) readonly defaultValue!: any;
     @Prop({type: Boolean, default: false}) readonly selectDefaultOption!: boolean;
+    @Ref() list!: HTMLElement;
+
 
     selectedValue: any = this.defaultValue;
 
@@ -78,8 +80,21 @@
     }
 
     @Emit()
-    toggleList() {
+    toggleList(): RadioButtonSelecter {
       this.active = !this.active;
+
+      if(this.active) {
+        this.list.style.maxHeight = this.list.scrollHeight.toString() + "px";
+      } else {
+        this.list.style.maxHeight = "0";
+      }
+
+      return this
+    }
+
+    closeList(): RadioButtonSelecter {
+      this.active = false;
+      this.list.style.maxHeight = "0";
       return this
     }