scrollable + better search

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -17,7 +17,11 @@ const articleList = [
     "The composition of the light",
     "The composition of the sand",
     "Fluctuation in universe beavers",
-    "The Potato War"
+    "The Potato War",
+  "The Potato War",
+  "The Potato War",
+  "The Potato War",
+  "The Potato War",
 ]
 
 const jsonMockViewsByYears= [
@@ -34,7 +38,10 @@ function searchInList(list, searchInput){
   let retList =[]
   for (let i = 0; i < list.length; i++) {
     console.log(list[i] + " et " + searchInput + " vaut " + lDistance(list[i], searchInput) )
-    if (lDistance(list[i], searchInput) < 6){
+    if (lDistance(list[i], searchInput) < 10){
+      retList.push(list[i])
+    }
+    else if(list[i].toUpperCase().indexOf(searchInput.toUpperCase()) > -1){
       retList.push(list[i])
     }
   }
@@ -136,7 +143,7 @@ function update(){
     <div id="articles">
       <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
       <ul id="articlesUL">
-        <li v-for="n in searchInList(articleList,input)">{{n}}</li>
+        <li id="articleLi" v-for="n in searchInList(articleList,input)">{{n}}</li>
       </ul>
     </div>
   </div>
@@ -187,10 +194,9 @@ function update(){
   color: white;
   background-color: rgb(255, 255, 255, 0.1);
   font-size: large;
-  align-self: center;
-  text-align: center;
 }
 
+
 #statsPie {
 
 }
@@ -199,6 +205,7 @@ function update(){
 }
 
 #search-input {
+  margin-left: 5px;
   width: 60%;
   font-size: 16px;
   padding: 12px 20px 12px 40px;
@@ -209,35 +216,22 @@ function update(){
 #articlesUL {
   list-style-type: none;
   color: white;
-  padding: 0;
-  margin: 0;
-}
-
-#myUL li a {
-  border: 1px solid #ddd;
-  /* Add a border to all links */
-  margin-top: -1px;
-  /* Prevent double borders */
-  background-color: #f6f6f6;
-  /* Grey background color */
   padding: 12px;
-  /* Add some padding */
-  text-decoration: none;
-  /* Remove default text underline */
-  font-size: 18px;
-  /* Increase the font-size */
-  color: black;
-  /* Add a black text color */
-  display: block;
-  /* Make it into a block element to fill the whole list */
+  margin: 5px;
+  height: 400px;
+  overflow: scroll;
+}
+#articleLi{
+  border: 2px solid black;
+  color: white;
+  font-size: x-large;
+  align-self: center;
+  text-align: left;
+  text-indent: 7px;
+
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius: 20px;
+  margin-bottom: 15px;
 }
 
-#myUL li a:hover:not(.header) {
-  background-color: #eee;
-}
-
-#Chart{
-    width: "100%";
-    height: "100%";
-}
 </style>