Wal/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

scrollable + better search

Browse Source
This commit is contained in:
Bartha Maxime 2024-04-08 11:02:59 +02:00
parent d31547c4cc
commit a94167c8a0
1 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
View File

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