kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made some visual changes but need to work on some searches occuring more than once.

Browse Source
This commit is contained in:
deepjyoti30
2020-07-08 21:39:51 +05:30
parent 41852129a6
commit 350caf0022
3 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/main.css
View File

@@ -57,7 +57,10 @@ body {
left: 0; left: 0;
right: 0; right: 0;
z-index: 99; z-index: 99;
border-radius: 6px; } border-radius: 6px;
background: #2e2e2e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.main #search-bar .autocomplete-items-container .autocomplete-item { .main #search-bar .autocomplete-items-container .autocomplete-item {
width: 100%; width: 100%;
background: #2e2e2e; background: #2e2e2e;
@@ -68,14 +71,11 @@ body {
padding: 7px 14px; padding: 7px 14px;
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box; }
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.main #search-bar .autocomplete-items-container .autocomplete-item:hover { .main #search-bar .autocomplete-items-container .autocomplete-item:hover {
background-color: red; } background: #3b3b3b; }
.main #search-bar .autocomplete-items-container .autocomplete-active { .main #search-bar .autocomplete-items-container .autocomplete-active {
background-color: DodgerBlue !important; background: #353535; }
color: #ffffff; }
@media only screen and (max-width: 791px) { @media only screen and (max-width: 791px) {
.main #search-bar { .main #search-bar {
width: 65%; } } width: 65%; } }

20
js/autocomplete.js
View File

@@ -3,23 +3,27 @@ function autocomplete(inp, passedValues) {
/*execute a function when someone writes in the text field:*/ /*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) { inp.addEventListener("input", function(e) {
var parentContainer, item, val = this.value; var item, val = this.value;
var parentContainer = document.getElementsByClassName('autocomplete-items-container')[0];
/*close any already open lists of autocompleted values*/ /*close any already open lists of autocompleted values*/
closeAllLists(); closeAllLists();
if (!val) { return false;} if (!val) {
parentContainer.style.paddingBottom = "0";
return false;
}
currentFocus = -1; currentFocus = -1;
/*create a DIV element that will contain the items (values):*/ // Update some values of the parent container
parentContainer = document.getElementsByClassName("autocomplete-items-container")[0];
parentContainer.setAttribute("id", this.id + "autocomplete-list"); parentContainer.setAttribute("id", this.id + "autocomplete-list");
parentContainer.style.paddingBottom = "1rem";
/*for each item in the array...*/ /*for each item in the array...*/
Object.keys(passedValues).forEach((el, i, arr) => { Object.keys(passedValues).forEach((el, i, arr) => {
/*check if the item starts with the same letters as the text field value:*/ /*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { if (arr[i].toLowerCase().includes(val.toLowerCase())) {
/*create a DIV element for each matching element:*/ /*create a DIV element for each matching element:*/
item = document.createElement("DIV"); item = document.createElement("DIV");
item.setAttribute("class", "autocomplete-item"); item.setAttribute("class", "autocomplete-item");
@@ -95,9 +99,9 @@ function autocomplete(inp, passedValues) {
except the one passed as an argument:*/ except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-item"); var x = document.getElementsByClassName("autocomplete-item");
for (var i = 0; i < x.length; i++) { for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) { if (elmnt != x[i]) {
x[i].parentNode.removeChild(x[i]); x[i].parentNode.removeChild(x[i]);
} }
} }
} }

11
scss/main.scss
View File

@@ -92,6 +92,9 @@ body {
right: 0; right: 0;
z-index: 99; z-index: 99;
border-radius: 6px; border-radius: 6px;
background: lighten($background, 5);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
.autocomplete-item { .autocomplete-item {
width: 100%; width: 100%;
@@ -105,17 +108,13 @@ body {
color: $foreground; color: $foreground;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover { &:hover {
background-color: red; background: lighten($background, 10);
} }
} }
.autocomplete-active { .autocomplete-active {
background-color: DodgerBlue !important; background: lighten($background, 8);
color: #ffffff;
} }
} }