Project

General

Profile

« Previous | Next » 

Revision 58522

[Library|Trunk]

Updates on searchbar and navbar:
searchbar width, button, css
library.css:
searchbar css
navbar z-index same as uk-sticky nav bar (from theme.css)
beta indication z-index

View differences:

modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/navigationBar.component.html
27 27
           {{community.name}} </div>
28 28
       </a>
29 29
       <div   *ngIf="enableSearch && isEnabled([searchRoute], showPage)"
30
              class="  ">
30
              class=" uk-width-large ">
31 31
         <search-bar  [searchPlaceHolder]="searchPlaceHolder"
32 32
                      [searchRoute]="searchRoute" [properties]="properties"></search-bar>
33 33
       </div>
......
150 150
               </a>
151 151

  
152 152
              <div   *ngIf="enableSearch && isEnabled([searchRoute], showPage)"
153
                     class="  uk-margin-large-left ">
153
                     class="  uk-margin-left uk-width-xlarge ">
154 154
                  <search-bar  [searchPlaceHolder]="searchPlaceHolder"
155 155
                              [searchRoute]="searchRoute" [properties]="properties"></search-bar>
156 156
              </div>
......
170 170
                      class="uk-margin-left uk-text-large"> {{community.name}} </div>
171 171
               </a>
172 172
              <div   *ngIf="enableSearch && isEnabled([searchRoute], showPage)"
173
                     class="  ">
173
                     class="uk-width-large  ">
174 174
                <search-bar  [searchPlaceHolder]="searchPlaceHolder"
175 175
                             [searchRoute]="searchRoute" [properties]="properties"></search-bar>
176 176
              </div>
modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/searchBar/searchBar.component.ts
107 107
  }
108 108

  
109 109
  getCurrentRoute() {
110
    console.log(this.router.url.split('?')[0]);
110 111
    return this.router.url.split('?')[0];
111 112
  }
112 113
  entityChanged($event){
modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/searchBar/searchBar.component.html
1
<div *ngIf="enableSearchbar" class="">
2
<!--  <form class="uk-search uk-search-default uk-width-1-1">
3
    <a routerLinkActive="uk-link"
4
       routerLink="{{searchRoute}}" [queryParams]="{keyword: keyword}"  class="uk-search-icon-flip" uk-search-icon></a>
5
    <input class="uk-search-input" type="search"  [placeholder]="searchPlaceHolder"
6
           aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword"  >
7
  </form>-->
8
<!--  <advanced-search-form [showAdvancedSearchLink]="false" [simpleView]="true" ></advanced-search-form>-->
9
  <form class=" uk-margin-medium-bottom uk-margin-top searchBar ">
10
    <div class="uk-grid uk-margin-small-left">
11
      <div
12
        [class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'">
13
        <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
14
                            [selectedEntity]="entityType"
15
                            [properties]="properties"
16
                            (selectionChange)=" entityChanged($event)"
17
                            [customFilter]="customFilter"
18
                            [onlyresults]="true" matPanelClass="navbarMatSelectPanelClass"
19
                            [onChangeNavigate]="false" ></entities-selection>
20 1

  
21
      </div>
22
      <div class=" uk-padding-remove-left uk-margin-small-top">
23
        <div class="uk-inline">
24
          <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip"
25
             (click)="keyword = ''"
26
             uk-icon="icon: close"></a>
27
          <input type="text" class="uk-input text-input-box"
28
                 [placeholder]="searchPlaceHolder" aria-describedby="sizing-addon2"
29
                 [(ngModel)]="keyword" name="keyword">
30
        </div>
2
<form *ngIf="enableSearchbar"
3
      class=" uk-margin-medium-bottom uk-margin-top searchBar uk-form-width-1-1 uk-grid uk-margin-small-left">
4
  <div
5
    [class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'">
6
    <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
7
                        [selectedEntity]="entityType"
8
                        [properties]="properties"
9
                        (selectionChange)=" entityChanged($event)"
10
                        [customFilter]="customFilter"
11
                        [onlyresults]="true" matPanelClass="navbarMatSelectPanelClass"
12
                        [onChangeNavigate]="false" ></entities-selection>
31 13

  
32
      </div>
33
      <div class="uk-padding-remove-left uk-margin-small-top">
34
        <button (click)="keywordChanged()" type="submit"
35
                class=" uk-button  portal-button  uk-text-bold ">
36
          Search
37
        </button>
38

  
39
      </div>
40
    </div>
41
  </form>
42
</div>
14
  </div>
15
  <div class=" uk-padding-remove-left uk-margin-small-top uk-inline uk-width-expand">
16
      <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip"
17
         (click)="keyword = ''"
18
         uk-icon="icon: close"></a>
19
      <input type="text" class="uk-input text-input-box uk-width-expand"
20
             [placeholder]="searchPlaceHolder" aria-describedby="sizing-addon2"
21
             [(ngModel)]="keyword" name="keyword">
22
  </div>
23
  <!--<div class="uk-padding-remove-left uk-margin-small-top">
24
    <button (click)="keywordChanged()" type="submit"
25
            class=" uk-button  portal-button  uk-text-bold ">
26
      Search
27
    </button>
28
  </div>-->
29
  <button (click)="keywordChanged()" type="submit"
30
          class="uk-icon-button uk-icon  portal-button uk-padding-remove-left uk-margin-small-left uk-margin-small-top"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
31
  </button>
32
</form>
modules/uoa-services-library/trunk/ng-openaire-library/src/assets/library.css
1367 1367

  
1368 1368
/* theme */
1369 1369
.uk-navbar {
1370
    z-index: 9999;
1370
    z-index: 980;
1371 1371
}
1372 1372

  
1373 1373
/* theme */
......
1417 1417
    top: 0;
1418 1418
    left: 0;
1419 1419
    display: none;
1420
    z-index: 10000;
1420 1421
}
1421 1422

  
1422 1423
input[name="code"] {
......
1741 1742
    padding: 10px;
1742 1743
    display: inline-block
1743 1744
}
1745
.text-input-box{
1746
    border: 1px solid #DFE1E5 !important;
1747
}
1744 1748

  
1745 1749
/* theme */
1746 1750
.uk-input, .uk-select {
1747
    border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;
1751
    border-bottom: 1px solid rgba(0, 0, 0, 0.42) ;
1748 1752
}
1749 1753

  
1750 1754
/* theme */
......
1887 1891
    color: #fff !important;
1888 1892
    border-color: #222080 !important;
1889 1893
}
1894

  
1895
search-bar .entitiesSelection{
1896
    max-width:115px;
1897
    border: solid 1px var(--portal-main-color) !important;
1898
    background: white !important;
1899
    color:  var(--portal-main-color);
1900
}
1901
search-bar .entitiesSelection span, search-bar .entitiesSelection div, search-bar .entitiesSelection  .mat-select-arrow, search-bar .entitiesSelection .mat-select-value{
1902
    color:  var(--portal-main-color) !important;
1903
}

Also available in: Unified diff