1
0
forked from PGL/Clyde

scrollable + better search

This commit is contained in:
Bartha Maxime 2024-04-08 11:02:59 +02:00
parent d31547c4cc
commit a94167c8a0

View File

@ -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>