- styling for home view component

- search view component: show automatically all records

src/views/home-view/home-view-component.scss

@@ -44,12 +44,24 @@ h6 {
     text-align: center;
     white-space: nowrap;
 }
+.field.has-addons .control:last-child:not(:only-child) .button,
+.field.has-addons .control:last-child:not(:only-child) .input,
+.field.has-addons .control:last-child:not(:only-child) .select select {
+    // border-bottom-left-radius: 0;
+    // border-top-left-radius: 0;
+    border-radius: 4px;
+}
 input{
     border-width:0;
+    box-shadow: none;
 }
 .search-button-icon {
     color: white;
 }
+.main-search-from-bg {
+    background-color: #fff;
+    padding: 0.2em;  
+}
 
 //contact apge
 .page-breaker {
@@ -68,4 +80,3 @@ input{
 .partner-logos {
     padding: 3em 0;
 }
-

src/views/home-view/home-view-component.vue

@@ -56,7 +56,7 @@
                         <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
                         <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
                     </form> -->
-                    <div class="field has-addons">
+                    <div class="field has-addons main-search-from-bg">
                         <div class="control is-expanded">
                             <input id="search_query" class="input is-medium" type="text" name="q" autocomplete="off" v-model="display" />
                             <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->

src/views/search-view/search-view-component.ts

@@ -22,7 +22,7 @@ import { ActiveFilterCategories } from "@/models/solr";
 })
 export default class SearchViewComponent extends Vue {
     @Prop()
-    display?: string;
+    display!: string;
 
     results: Array<Dataset> = [];
 
@@ -49,10 +49,32 @@ export default class SearchViewComponent extends Vue {
     // private rdrAPI!: DatasetService;
     private error = "";
 
+    get stringSearchTerm(): string {
+        if (typeof this.searchTerm === "string") {
+            return this.searchTerm;
+        } else if (this.searchTerm instanceof Suggestion) {
+            return this.searchTerm.value + " (" + this.searchTerm.type + ")";
+        } else {
+            return "";
+        }
+    }
+
+    hasSearchTerm(): boolean {
+        if (typeof this.searchTerm === "string" && this.searchTerm !== "") {
+            return true;
+        } else if (this.searchTerm instanceof Suggestion && this.searchTerm.value !== "") {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     beforeMount(): void {
         // this.rdrAPI = new DatasetService();
         if (this.display != undefined && this.display != "") {
             this.onSearch(this.display);
+        } else {
+            this.onSearch("");
         }
     }
 

src/views/search-view/search-view-component.vue

@@ -26,9 +26,8 @@
                 </ul>
             </div> -->
             <div v-if="results.length > 0" class="result-list-info">
-                <div class="resultheader">
+                <div class="resultheader" v-if="hasSearchTerm()">
-                    Your search yielded
+                    Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
-                    <strong>{{ numFound }}</strong> results:
                 </div>
             </div>
             <div v-else-if="results.length == 0">