- Results box background colour changed
- Results message redesigned - Pagination text aligned right
This commit is contained in:
parent
9ad4037c74
commit
2b7b5323d3
|
|
@ -86,7 +86,7 @@ const prevClick = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||||
<div id="frontText">
|
<div id="frontText" class="w-full text-right mr-4">
|
||||||
<p class="text-sm text-gray-700 leading-5">
|
<p class="text-sm text-gray-700 leading-5">
|
||||||
Showing
|
Showing
|
||||||
<span class="font-medium">{{ fromPage }}</span>
|
<span class="font-medium">{{ fromPage }}</span>
|
||||||
|
|
|
||||||
|
|
@ -136,7 +136,7 @@ input {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
max-height: 200px;
|
max-height: 192px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -155,9 +155,11 @@ input {
|
||||||
|
|
||||||
.autocomplete-result-item.is-active {
|
.autocomplete-result-item.is-active {
|
||||||
background: rgba(0, 180, 255, 0.15);
|
background: rgba(0, 180, 255, 0.15);
|
||||||
|
// background: #3cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.autocomplete-result-item:hover {
|
.autocomplete-result-item:hover {
|
||||||
background: rgba(0, 180, 255, 0.075);
|
// background: rgba(0, 180, 255, 0.075);
|
||||||
|
background: #baedf1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
|
<vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
|
<!-- <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
|
||||||
<div v-if="results.length > 0" class="result-list-info">
|
<div v-if="results.length > 0" class="result-list-info">
|
||||||
<div v-if="hasSearchTerm()" class="resultheader">
|
<div v-if="hasSearchTerm()" class="resultheader">
|
||||||
Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
|
Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
|
||||||
|
|
@ -17,10 +17,80 @@
|
||||||
<strong> 0</strong> results:
|
<strong> 0</strong> results:
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- ASK ELNAZ! ------------------------------------------------------------------------------------------------- -->
|
||||||
|
<div class="columns">
|
||||||
|
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 0rem; padding-right: 1.5rem; padding-left: 1.5rem">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col col-8 column is-8 results_column" style="padding-top: 0.5rem; padding-right: 1rem; padding-left: 1rem; padding-bottom: 0rem;">
|
||||||
|
|
||||||
|
<!-- <div v-if="results.length > 0" class="result-list-info">
|
||||||
|
<div v-if="hasSearchTerm()" class="resultheader">
|
||||||
|
Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Option 1: Enclose in a Colored Box -->
|
||||||
|
<!-- <div v-if="results.length > 0" class="result-list-info">
|
||||||
|
<div v-if="hasSearchTerm()" class="bg-blue-50 border-l-4 border-blue-400 p-4">
|
||||||
|
<p class="text-sm text-blue-700">
|
||||||
|
Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Option 2: Use a Notice/Alert Style -->
|
||||||
|
<!--
|
||||||
|
<div v-if="results.length > 0" class="result-list-info">
|
||||||
|
<div v-if="hasSearchTerm()" class="bg-yellow-100 border border-yellow-300 text-yellow-800 px-4 py-3 rounded-md" role="alert">
|
||||||
|
<span class="block sm:inline">Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Option 3: Highlight with a Callout -->
|
||||||
|
|
||||||
|
<div v-if="results.length > 0" class="result-list-info">
|
||||||
|
<div v-if="hasSearchTerm()" class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
|
||||||
|
<span class="font-medium pl-5">Your search term</span> <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Option 4: Bold with Underline -->
|
||||||
|
<!--
|
||||||
|
<div v-if="results.length > 0" class="result-list-info">
|
||||||
|
<div v-if="hasSearchTerm()" class="text-lg font-bold underline text-gray-800">
|
||||||
|
Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div v-else-if="results.length == 0">
|
||||||
|
<div class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
|
||||||
|
<span class="font-medium pl-5">Your search yielded <strong> 0</strong> results:</span>
|
||||||
|
<!-- Your search yielded
|
||||||
|
<strong> 0</strong> results: -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div v-else-if="results.length == 0">
|
||||||
|
<div class="resultheader">
|
||||||
|
Your search yielded
|
||||||
|
<strong> 0</strong> results:
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem; padding-left: 1.5rem">
|
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 0.5rem; padding-right: 1.5rem; padding-left: 1.5rem">
|
||||||
<div id="externals" class="">
|
<div id="externals" class="">
|
||||||
<div v-for="(facetItems, key, index) in facets" v-bind:key="index" name="external_card" style="margin-bottom: 0px">
|
<div v-for="(facetItems, key, index) in facets" v-bind:key="index" name="external_card" style="margin-bottom: 0px">
|
||||||
<facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
|
<facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
|
||||||
|
|
@ -28,7 +98,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
|
<div class="col col-8 column is-8 results_column" style="padding-top: 0.5rem; padding-right: 1rem; padding-left: 1rem">
|
||||||
<div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
|
<div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
|
||||||
<span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
|
<span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
|
||||||
<!-- {{ values }} {{key}} {{index }} -->
|
<!-- {{ values }} {{key}} {{index }} -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user