Merge branch 'main' of github.com:SouthGreenPlatform/panache into main

Added last modifications from Alexandre
SouthGreenPlatform · Jun 14, 2021 · f20f99c · f20f99c
2 parents b2c78af + 34b25e7
commit f20f99c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/components/FileLoader.vue b/src/components/FileLoader.vue
@@ -7,7 +7,7 @@
         type='file'
         @change="checkExtensionFile"
     />
-    <label class="custom-file-label col-form-label-sm" :for="`fileSelector_${idBonus}`">
+    <label class="ellipsis custom-file-label col-form-label-sm" :for="`fileSelector_${idBonus}`">
       {{fileName || labelToDisplay}}
     </label>
   </div>
@@ -75,7 +75,12 @@ export default {
       }
     },
     emitDataURL: function(loadedFile) {
-      this.fileName = loadedFile.name;
+      let nbMaxChar = 23;
+      if (loadedFile.name.length > nbMaxChar) {
+        this.fileName = loadedFile.name.slice(0, nbMaxChar) + "...";
+      } else {
+        this.fileName = loadedFile.name;
+      }
       console.log(`File ${loadedFile.name} loaded from computer.`);
       console.log(loadedFile);
       this.$emit('file-loaded', loadedFile )
@@ -107,4 +112,9 @@ export default {
   align-self: center;
 }
 
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 </style>
diff --git a/src/components/GeneSearchBar.vue b/src/components/GeneSearchBar.vue
@@ -73,7 +73,7 @@
 
           <!-- LIST OF THE TAGS (GENE) YOU WANT TO USE AS FILTER -->
           <div :key="componentKey">
-            <b-input-group v-for="tag in tags" :key="tag" size="sm" v-show="presenceMap.has(tag)" :prepend="presenceMap.get(tag) ? 'Presence' : 'Absence'" class="mb-2">
+            <b-input-group v-for="tag in tags" :key="tag" size="sm" v-show="presenceMap.has(tag)" :prepend="presenceMap.get(tag) ? 'Presence' : 'Absence'" class="mb-2 tagCustomCSS">
               <b-input-group-prepend is-text>
                 <!-- CHECKBOX TO CHANGE THE STATUS OF THE GENE IN THE FILTER -->
                 <b-form-checkbox
@@ -290,4 +290,12 @@ export default {
   color: #495057;
 }
 
+</style>
+
+<style>
+
+.tagCustomCSS .input-group-prepend:first-child .input-group-text {
+  width: 78px !important;
+}
+
 </style>