MaDgIK
/
open-science-observatory-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed the search bar in the top menu

This commit is contained in:
Stefania Martziou 2021-09-02 09:04:18 +00:00
parent 5ba1503aed
commit d07cc59bd0
2 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/shared/topmenu/top-menu.component.html
View File

@ -57,11 +57,11 @@
<div class="uk-navbar-center"> <div class="uk-navbar-center">
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry"> <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">
<span id="search-icon" uk-search-icon></span> <span id="search-icon-mobile" uk-search-icon></span>
<ng-autocomplete <ng-autocomplete
[data]="countriesCollection" [data]="countriesCollection"
[searchKeyword]="keyword" [searchKeyword]="keyword"
placeHolder="Search for a country..." [placeholder]="'Search for a country...'"
(selected)='selectCountryFromAutocompleteEvent($event)' (selected)='selectCountryFromAutocompleteEvent($event)'
(inputChanged)='onChangeSearch($event)' (inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)' (inputFocused)='onFocused($event)'
@ -164,7 +164,7 @@
<ng-autocomplete <ng-autocomplete
[data]="countriesCollection" [data]="countriesCollection"
[searchKeyword]="keyword" [searchKeyword]="keyword"
placeHolder="Search for a country..." [placeholder]="'Search for a country...'"
(selected)='selectCountryFromAutocompleteEvent($event)' (selected)='selectCountryFromAutocompleteEvent($event)'
(inputChanged)='onChangeSearch($event)' (inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)' (inputFocused)='onFocused($event)'

42
src/assets/css/os-observatory-custom.css
View File

@ -328,6 +328,22 @@ div.indicator span {
border-radius: 3px; border-radius: 3px;
} }
.searchForCountry.uk-search.uk-search-default {
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #C7C7C7;
border-radius: 4px;
}
.searchForCountry.uk-search .uk-search-icon {
color: #4687f4;
z-index: 10;
}
.autocomplete-container .input-container input {
padding: 0 15px 0 40px !important;
}
/********* Mock chart for country **********/ /********* Mock chart for country **********/
.epc_chart { .epc_chart {
display: block; display: block;
@ -1635,17 +1651,17 @@ hr.entitiesDivider {
color: var(--primary-color); color: var(--primary-color);
} }
.searchForCountry.uk-search.uk-search-default { /*.searchForCountry.uk-search.uk-search-default {*/
width: 100%; /*width: 100%;*/
background: #FFFFFF 0% 0% no-repeat padding-box; /*background: #FFFFFF 0% 0% no-repeat padding-box;*/
border: 1px solid #C7C7C7; /*border: 1px solid #C7C7C7;*/
border-radius: 4px; /*border-radius: 4px;*/
} /*}*/
.searchForCountry.uk-search .uk-search-icon { /*.searchForCountry.uk-search .uk-search-icon {*/
color: #4687f4; /*color: #4687f4;*/
z-index: 10; /*z-index: 10;*/
} /*}*/
.progress { .progress {
width: 100%; width: 100%;
@ -1743,8 +1759,8 @@ hr.entitiesDivider {
padding: 0px; padding: 0px;
} }
.autocomplete-container .input-container input { /*.autocomplete-container .input-container input {*/
padding: 0 15px 0 40px !important; /*padding: 0 15px 0 40px !important;*/
} /*}*/
} }