scrollable + better search
This commit is contained in:
parent
d31547c4cc
commit
a94167c8a0
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user