henry-search 1.0.27 → 1.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "henry-search",
3
- "version": "1.0.27",
3
+ "version": "1.0.28",
4
4
  "description": "Searches a typesense archive of musical performances",
5
5
  "main": "js/main.js",
6
6
  "scripts": {
@@ -377,7 +377,7 @@
377
377
  { facet: 'works.artists.role', value: item.artist_role },
378
378
  { facet: 'works.title', value: item.work_title }
379
379
  ])">
380
- <span class="resultsGrid__lightLink">{{ item.num_performances }} Performances</span>
380
+ {{ item.num_performances }} Performances
381
381
 
382
382
  </a>
383
383
  </div>
@@ -436,7 +436,7 @@
436
436
  <a :href="createURL([{ facet: 'works.composers', value: item.composers},
437
437
  { facet: 'works.title', value: item.title}
438
438
  ])">
439
- <span class="resultsGrid__lightLink">{{ item.num_performances }} Performances</span>
439
+ {{ item.num_performances }} Performances
440
440
  </a>
441
441
  </div>
442
442
  </template>
@@ -485,6 +485,8 @@
485
485
  <ais-search-box class="searchBox" >
486
486
  <template v-slot="{ currentRefinement, isSearchStalled, refine }">
487
487
  <label for="searchbox" class="label__hidden">{{ props.searchPlaceholder }}</label>
488
+ <button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
489
+ </button>
488
490
  <input
489
491
  class="ais-SearchBox-input input"
490
492
  id="searchbox"
@@ -493,8 +495,7 @@
493
495
  @input="refine($event.currentTarget.value)"
494
496
  :placeholder="props.searchPlaceholder"
495
497
  >
496
- <button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
497
- </button>
498
+
498
499
  <span :hidden="!isSearchStalled">Loading...</span>
499
500
  </template>
500
501
  </ais-search-box>
@@ -597,10 +598,10 @@
597
598
  <template v-slot="{items, refine, searchForItems, isFromSearch}">
598
599
 
599
600
  <div class="accordion__content" v-if="items.length || isFromSearch">
600
- <!-- <div class="ais-SearchBox searchBox -filter"> -->
601
+ <div class="ais-SearchBox searchBox -filter">
601
602
  <label class="label__hidden" :for="refinement.attribute">{{ refinement.placeholder }}</label>
602
603
  <form class="searchBox__form" @submit="$event.preventDefault()" @reset="searchForItems('')">
603
- <input type="text" :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter ais-SearchBox searchBox" v-if="!refinement.hideSearch">
604
+ <input type="text" :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter" v-if="!refinement.hideSearch">
604
605
  <button v-if="isFromSearch"
605
606
  class="ais-SearchBox-reset"
606
607
  type="reset"
@@ -613,7 +614,7 @@
613
614
  </svg>
614
615
  </button>
615
616
  </form>
616
- <!-- </div> -->
617
+ </div>
617
618
  <div class="checkBoxes">
618
619
  <span class="checkBoxes__alert" v-if="!items.length"><span class="checkBoxes__alertIcon">!</span>No matches found</span>
619
620
  <label v-for="item in items" class="checkBoxes__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
@@ -644,9 +645,9 @@
644
645
  <summary class="accordion__summary">
645
646
  <h6 :class="`accordion__heading ${ !(items.length || isFromSearch) ? '-gray' : ''}`">{{ refinement.title }}</h6>
646
647
  <div class="accordion__iconWrapper" v-if="items.length">
647
- <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation" viewBox="0 0 18 18" fill="none">
648
- <path d="M7 17L15 9L7 1" stroke="var(--icon-color, currentColor)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
649
- </svg>
648
+ <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation" viewBox="0 0 18 18" fill="none">
649
+ <path d="M7 17L15 9L7 1" stroke="var(--icon-color, currentColor)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
650
+ </svg>
650
651
  </div>
651
652
  </summary>
652
653
  <div class="accordion__content" v-if="items.length || isFromSearch">
@@ -691,15 +692,15 @@
691
692
  <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and" limit="100" >
692
693
  <template v-slot="{ items, refine }">
693
694
  <select @change="refine($event.currentTarget.value)">
694
- <option>Select Country</option>
695
+ <option value="">Select Country</option>
695
696
  <option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
696
697
  </select>
697
698
  </template>
698
699
  </ais-menu-select>
699
- <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" limit="100" :sort-by="['name']">
700
+ <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" limit="100">
700
701
  <template v-slot="{ items, refine }">
701
702
  <select @change="refine($event.currentTarget.value)">
702
- <option>Select State</option>
703
+ <option value="">Select State</option>
703
704
  <option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
704
705
  </select>
705
706
  </template>
@@ -707,7 +708,7 @@
707
708
  <ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and" limit="100">
708
709
  <template v-slot="{ items, refine }">
709
710
  <select @change="refine($event.currentTarget.value)">
710
- <option>Select City</option>
711
+ <option value="">Select City</option>
711
712
  <option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
712
713
  </select>
713
714
  </template>
@@ -4,7 +4,6 @@
4
4
  min-height: 1.8rem;
5
5
  overflow-y: auto;
6
6
  padding-bottom: 0.5rem;
7
- padding-left: 0.5rem;
8
7
  input[type=checkbox] {
9
8
  border: thin solid var(--color-gray-100);
10
9
  background-color: var(--color-white);
@@ -48,7 +47,7 @@
48
47
  background-color: var(--color-turquoise);
49
48
  border: thin solid var(--color-turquoise);
50
49
  &::before {
51
- display: block;
50
+ //display: block;
52
51
  background: var(--color-gray-200);
53
52
  }
54
53
  }
@@ -36,6 +36,9 @@
36
36
  padding: 0 2.75rem !important;
37
37
  }
38
38
  }
39
+ .dp__input:focus {
40
+ border: 1px solid var(--color-turquoise);
41
+ }
39
42
 
40
43
  .dp__input_icon {
41
44
  margin-left: 8px !important;
@@ -7,7 +7,7 @@
7
7
  background-color: #FDF9F7;
8
8
  @include at (md) {
9
9
  padding: .5rem;
10
- margin: .5rem .5rem .5rem 0;
10
+ margin: .5rem 0;
11
11
  }
12
12
 
13
13
  height: 40px;
@@ -88,6 +88,6 @@
88
88
  }
89
89
  }
90
90
 
91
- .searchBox:active {
92
- border: 3px solid red;
91
+ .searchBox:has(input:focus) {
92
+ border: 1px solid var(--color-turquoise);
93
93
  }
@@ -6,7 +6,7 @@
6
6
  padding: 0 1.5rem;
7
7
  @include at(lg) {
8
8
  padding: 0;
9
- grid-template-columns: repeat(7, 1fr);
9
+ grid-template-columns: repeat(7, minmax(0, 1fr));
10
10
  }
11
11
 
12
12
  &__cell {
@@ -28,6 +28,10 @@
28
28
  a {
29
29
  color: var(--color-dark-blue);
30
30
  }
31
+ a:hover {
32
+ color: var(--color-dark-blue);
33
+ text-decoration: underline;
34
+ }
31
35
 
32
36
  &.-artist {
33
37
  border-left: none;
@@ -150,9 +154,6 @@
150
154
  position: relative;
151
155
  left: 0.1rem;
152
156
  }
153
- &__lightLink {
154
- color: var(--color-turquoise);
155
- }
156
157
 
157
158
  &__mobileHeader {
158
159
  display: block;