minor changes on template

mmaelicke · Jul 24, 2018 · 986875e · 986875e
1 parent dc362e7
commit 986875e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 20 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -11,11 +11,11 @@
  </ul>
 </nav>
 
-<div class="container-fluid">
- <div class="row">
+<div class="container-fluid h-100">
+ <div class="row h-100">
  <!-- sidebar -->
  <app-sidebar></app-sidebar>
- <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
+ <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4 h-100">
  <app-message></app-message>
  <router-outlet></router-outlet>
  </main>

diff --git a/src/app/main/result-list/result-list.component.html b/src/app/main/result-list/result-list.component.html
@@ -1,19 +1,26 @@
-<h1 class="page-header mt-3">
- Results
- <div class="btn-group btn-group-lg pull-right" role="group">
- <button type="button" class="btn btn-outline-primary" (click)="listStyle='table';"><fa name="table"></fa></button>
- <button type="button" class="btn btn-outline-primary" (click)="listStyle='plain';"><fa name="terminal"></fa></button>
- <button type="button" class="btn btn-outline-primary" (click)="listStyle='list-item';"><fa name="list"></fa></button>
- <button type="button" class="btn btn-outline-primary" (click)="listStyle='default';"><fa name="server"></fa></button>
- </div>
-</h1>
+<ng-container *ngIf="hits.length > 0; else noResultsFound">
+ <ng-container *ngTemplateOutlet="searchResults"></ng-container>
+</ng-container>
+
 
-<table class="table table-striped" *ngIf="listStyle==='table'; else rawList">
- <tr><th>Title</th><th>Variable</th><th>license</th></tr>
- <tr *ngFor="let hit of hits">
- <td>{{ hit.title }}</td><td>{{ hit.variable }}</td><td>{{ hit.license }}</td>
- </tr>
-</table>
+<ng-template #searchResults>
+ <h1 class="page-header mt-3">
+ Results
+ <div class="btn-group btn-group-lg pull-right" role="group">
+ <button type="button" class="btn btn-outline-primary" (click)="listStyle='table';"><fa name="table"></fa></button>
+ <button type="button" class="btn btn-outline-primary" (click)="listStyle='plain';"><fa name="terminal"></fa></button>
+ <button type="button" class="btn btn-outline-primary" (click)="listStyle='list-item';"><fa name="list"></fa></button>
+ <button type="button" class="btn btn-outline-primary" (click)="listStyle='default';"><fa name="server"></fa></button>
+ </div>
+ </h1>
+
+ <table class="table table-striped" *ngIf="listStyle==='table'; else rawList">
+ <tr><th>Title</th><th>Variable</th><th>license</th></tr>
+ <tr *ngFor="let hit of hits">
+ <td>{{ hit.title }}</td><td>{{ hit.variable }}</td><td>{{ hit.license }}</td>
+ </tr>
+ </table>
+</ng-template>
 
 <ng-template #rawList>
  <app-result-list-item
@@ -22,3 +29,16 @@ <h1 class="page-header mt-3">
  [itemStyle]="listStyle"
  ></app-result-list-item>
 </ng-template>
+
+<ng-template #noResultsFound>
+ <div class="row h-100 bg-light">
+ <div class="col"></div>
+ <div class="col col-md-8 col-sm-12 my-auto">
+ <div class="alert alert-light text-center">
+ <h2 class="alert-heading">No Results found.</h2>
+ Your search did not return any results.
+ </div>
+ </div>
+ <div class="col"></div>
+ </div>
+</ng-template>
diff --git a/src/app/main/result-list/result-list.component.ts b/src/app/main/result-list/result-list.component.ts
@@ -10,7 +10,7 @@ import {Subscription} from 'rxjs/internal/Subscription';
  styleUrls: ['./result-list.component.css']
 })
 export class ResultListComponent implements OnInit, OnDestroy {
- hits: Hit[];
+ hits: Hit[] = [];
  hitsSubscription: Subscription;
  listStyle: string;
  listStyleSubscription: Subscription;

diff --git a/src/app/shared/elasticsearch/elastic-transport.service.ts b/src/app/shared/elasticsearch/elastic-transport.service.ts
@@ -199,7 +199,7 @@ export class ElasticTransportService {
  },
  'filter': {
  'term': {
- 'variable': variableName
+ 'variable.raw': variableName
  }
  }
  }

diff --git a/src/styles.css b/src/styles.css
@@ -1,5 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 /* Some custom styling */
+html, body {
+ height: 100%;
+}
+
 bg-theme {
  background-color: #BB5B3D;
 }