henry-search 1.0.28 → 1.0.30

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.28",
3
+ "version": "1.0.30",
4
4
  "description": "Searches a typesense archive of musical performances",
5
5
  "main": "js/main.js",
6
6
  "scripts": {
@@ -4,13 +4,18 @@ const props = defineProps({
4
4
  audioId: {
5
5
  type: Number,
6
6
  require: true
7
+ },
8
+ extraClasses: {
9
+ type: String,
10
+ require: false,
11
+ default: ''
7
12
  }
8
13
  })
9
14
 
10
15
  </script>
11
16
 
12
17
  <template>
13
- <div class="audioLinks__box">
18
+ <div :class="`audioLinks__box ${props.extraClasses}`">
14
19
  <div class="audioLinks__links">
15
20
  <span class="audioLinks__label -first">Public</span>
16
21
  <a href="https://forms.office.com/pages/responsepage.aspx?id=OdIW0TyQrUiHfXYXUGXf-OBndBFJDdZNtXXrOlwA-shUNVBBNjZNQkozSEw2SUs3SFU1Q1I2R1VQTCQlQCN0PWcu&fswReload=1&fswNavStart=1674745526953" target="_blank" class="audioLinks__link -first">Request Form<svg class="audioLinks__arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -5,6 +5,7 @@
5
5
  import PTabs from './PTabs.vue'
6
6
  import SearchTab from "./SearchTab.vue"
7
7
  import EventLinks from "./EventLinks.vue"
8
+ import AudioLinks from "./AudioLinks.vue"
8
9
 
9
10
  import formatDate from '../composables/formatDate'
10
11
 
@@ -33,7 +34,8 @@
33
34
 
34
35
  onMounted(() => {
35
36
  document.addEventListener("click", function(){
36
- document.querySelectorAll(".audioLinkBox").forEach((el) => {
37
+ console.log('click')
38
+ document.querySelectorAll(".audioLinks__box").forEach((el) => {
37
39
  el.classList.remove("-open")
38
40
  })
39
41
  })
@@ -146,6 +148,12 @@
146
148
  return attributeArray.join("; ")
147
149
  }
148
150
 
151
+ const showAudioLinks = (event) => {
152
+ event.stopPropagation()
153
+ const audioLinkBox = event.currentTarget.parentElement.querySelector(".audioLinks__box")
154
+ audioLinkBox.classList.toggle("-open")
155
+ }
156
+
149
157
 
150
158
  </script>
151
159
 
@@ -205,13 +213,14 @@
205
213
  <span class="resultsGrid__mobileHeader">Composer/Work</span>
206
214
  {{ w?.composers?.join("; ") }} / {{ w?.title }}
207
215
  <div v-if="w.has_recording" class="toolTip">
208
- <a :href="`/details?performanceId=${item.id}`">
216
+ <a @click="showAudioLinks">
209
217
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultsGrid__icon">
210
218
  <circle cx="9" cy="9" r="9" fill="#14284E"/>
211
219
  <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
212
220
  <path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
213
221
  </svg>
214
222
  </a>
223
+ <audio-links :audio-id="item.bso_audio_id" extraClasses="-inGrid" />
215
224
  <span class="toolTip__text">Access Audio</span>
216
225
  </div>
217
226
  </div>
@@ -247,7 +256,7 @@
247
256
  ${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
248
257
  {{ w?.composers?.join("; ") }} / {{ w?.title }}
249
258
  <div v-if="w.has_recording" class="toolTip">
250
- <a :href="`/details?performanceId=${item.id}`">
259
+ <a @click="showAudioLinks">
251
260
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultsGrid__icon">
252
261
  <circle cx="9" cy="9" r="9" fill="#14284E"/>
253
262
  <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -255,6 +264,7 @@
255
264
  </svg>
256
265
 
257
266
  </a>
267
+ <audio-links :audio-id="item.bso_audio_id" extraClasses="-inGrid" />
258
268
  <span class="toolTip__text">Access Audio</span>
259
269
  </div>
260
270
  </div>
@@ -25,6 +25,7 @@
25
25
 
26
26
 
27
27
  import pSelect from '@vueform/multiselect'
28
+ import { truncate } from 'lodash';
28
29
 
29
30
  const props = defineProps({
30
31
  indexName: {
@@ -514,13 +515,15 @@
514
515
  });
515
516
 
516
517
  }"
518
+ :auto-apply="true"
519
+ :year-range="[1850,2050]"
517
520
  :teleport="true"
518
521
  :clearable="false"
519
522
  :multi-calendars="false"
520
523
  :enable-time-picker="false"
521
524
  :enter-submit="true"
522
525
  :tab-submit="true"
523
- :text-input="true"
526
+ :text-input="false"
524
527
  placeholder="Start"
525
528
  id="start"
526
529
  />
@@ -532,9 +535,11 @@
532
535
  min: formatMinValue(currentRefinement.min, range.min),
533
536
  max: formatMaxValue(modelValue/1000, range.max),
534
537
  })}"
538
+ :auto-apply="true"
539
+ :year-range="[1850,2050]"
535
540
  :teleport="true"
536
541
  :clearable="false"
537
- :text-input="true"
542
+ :text-input="false"
538
543
  :enter-submit="true"
539
544
  :tab-submit="true"
540
545
  :multi-calendars="false"
@@ -689,7 +694,7 @@
689
694
  </div>
690
695
  </summary>
691
696
  <div class="accordion__content">
692
- <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and" limit="100" >
697
+ <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and" :limit="100" >
693
698
  <template v-slot="{ items, refine }">
694
699
  <select @change="refine($event.currentTarget.value)">
695
700
  <option value="">Select Country</option>
@@ -697,7 +702,7 @@
697
702
  </select>
698
703
  </template>
699
704
  </ais-menu-select>
700
- <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" limit="100">
705
+ <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" :limit="100">
701
706
  <template v-slot="{ items, refine }">
702
707
  <select @change="refine($event.currentTarget.value)">
703
708
  <option value="">Select State</option>
@@ -705,7 +710,7 @@
705
710
  </select>
706
711
  </template>
707
712
  </ais-menu-select>
708
- <ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and" limit="100">
713
+ <ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and" :limit="100">
709
714
  <template v-slot="{ items, refine }">
710
715
  <select @change="refine($event.currentTarget.value)">
711
716
  <option value="">Select City</option>
@@ -7,10 +7,17 @@
7
7
 
8
8
  &__box {
9
9
  display:none;
10
+ right: 5rem;
11
+ margin-top: 2rem;
12
+ &.-inGrid {
13
+ right: 0rem;
14
+ left: -7rem;
15
+ width: 15rem;
16
+ margin-top: 0;
17
+ }
10
18
  &.-open {
11
19
  position:absolute;
12
- right: 5rem;
13
- margin-top: 2rem;
20
+
14
21
  z-index: 100;
15
22
  display:block;
16
23
  }
@@ -4,6 +4,7 @@
4
4
  border-radius: 5px;
5
5
  select {
6
6
  margin: .25rem;
7
+ -webkit-appearance: none;
7
8
  width: 95%;
8
9
  }
9
10
  .multiselect-caret {
@@ -10,16 +10,18 @@
10
10
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
11
11
  font-size: 0.75rem;
12
12
  font-weight: 100;
13
- text-wrap: nowrap;
14
- left: 50%;
13
+ height: 1.8rem;
14
+ left: -1.2rem;
15
15
  margin-left: -100%;
16
16
  opacity: 0;
17
17
  padding: 5px 0;
18
18
  position: absolute;
19
19
  text-align: center;
20
+ text-wrap: nowrap;
21
+ top: 2rem;
20
22
  transition: opacity 0.3s;
21
23
  visibility: hidden;
22
- width: 200%;
24
+ width: 6rem;
23
25
  z-index: 1;
24
26
  }
25
27
  &__text::after {
@@ -188,4 +188,21 @@
188
188
  }
189
189
 
190
190
 
191
- }
191
+ }
192
+ #start {
193
+ .dp__menu {
194
+ left: 8rem !important;
195
+ @include at(md) {
196
+ left: 0 !important;
197
+ }
198
+ }
199
+ }
200
+
201
+ // #end {
202
+ // .dp__menu {
203
+ // left: 4rem !important;
204
+ // @include at(md) {
205
+ // left: 0 !important;
206
+ // }
207
+ // }
208
+ // }
@@ -37,10 +37,12 @@
37
37
  &__sort {
38
38
  font-weight: 100;
39
39
  font-size: 1.1rem;
40
- margin-right: .5rem;
40
+ //margin-right: .5rem;
41
41
  display: flex;
42
+
42
43
  select {
43
44
  margin: 0 0 0.2rem 0;
45
+ -webkit-appearance: none;
44
46
  }
45
47
  //align-items: center;
46
48
  // select {
@@ -116,7 +116,7 @@
116
116
  position: sticky;
117
117
  //bottom: 0;
118
118
  z-index: 3;
119
- height: 110px;
119
+ height: 70px;
120
120
  width: 100vw;
121
121
  box-shadow: 0 -30px 30px var(--color-gray-100);
122
122
  background-color: white;
@@ -125,7 +125,6 @@
125
125
  }
126
126
  .ais-ClearRefinements {
127
127
  width: 100%;
128
- height: 100%;
129
128
  display: grid;
130
129
  grid-template-columns: 1fr 1fr;
131
130
  align-items: center;
@@ -140,27 +139,28 @@
140
139
  }
141
140
  button.filterApply,
142
141
  button.filterClear {
142
+ border-radius: 5px;
143
+ border: 0;
143
144
  gap: 1rem;
144
145
  justify-content: space-between;
145
- width: 90%;
146
- height: 80%;
147
146
  justify-self: center;
148
- border: 0;
149
- border-radius: 5px;
150
147
  padding: 1rem;
151
-
148
+ width: 90%;
152
149
  }
153
150
  button.filterClear {
154
151
  background-color: var(--color-gray-100);
155
152
  border: none;
156
- height: 90%;
153
+ height: 110%;
157
154
 
158
155
  }
159
156
  button.filterApply {
160
157
  background-color: var(--color-turquoise);
161
158
  color: var(--color-dark-blue);
162
159
  font-weight: 600;
160
+ height: 94%;
163
161
  margin-right: 1rem;
162
+ position: relative;
163
+ top: .3rem;
164
164
  }
165
165
 
166
166
  }
@@ -272,11 +272,13 @@
272
272
  &__wrapper {
273
273
  overflow-y: scroll;
274
274
  width: 100%;
275
- height: 90%;
275
+ height: 97%;
276
+ padding-top: 0.5rem;
276
277
  @include at(lg) {
277
278
  overflow: hidden;
278
279
  display: grid;
279
280
  height: auto;
281
+ padding-top: 0;
280
282
  }
281
283
  }
282
284
  }
@@ -2,8 +2,8 @@
2
2
 
3
3
  .performanceGrid {
4
4
  display: grid;
5
- grid-template-columns: 1fr 1fr;
6
- @include at(lg) {
5
+ grid-template-columns: 1fr;
6
+ @include at(md) {
7
7
  grid-template-columns: repeat(5, 1fr);
8
8
  margin-bottom: 6rem;
9
9
  }
@@ -169,7 +169,6 @@
169
169
  }
170
170
  .toolTip__text {
171
171
  width: 6rem;
172
- left: -1rem;
173
- margin-top:1rem;
172
+ left: -1.2rem;
174
173
  }
175
174
  }
@@ -80,7 +80,7 @@
80
80
  display: flex;
81
81
  justify-content: space-between;
82
82
 
83
- padding: 0 1rem 0;
83
+ padding: 0 1.4rem 0;
84
84
  @include at(lg) {
85
85
  padding: 0;
86
86
  border-bottom: none;
@@ -121,7 +121,7 @@
121
121
  padding-top: 1rem;
122
122
  //width: 75%;
123
123
  h2 {
124
- margin-bottom: 0.2rem;
124
+ margin-bottom: 0.25rem;
125
125
  }
126
126
  @include at(lg) {
127
127
  padding-top: 0;
@@ -45,7 +45,7 @@
45
45
  font-weight: bold;
46
46
  color: var(--color-dark-blue);
47
47
  padding: 0.75rem 0 0.75rem 0;
48
- @media screen and (min-width: 768px) {
48
+ @include at (md) {
49
49
  grid-template-columns: repeat(5, 1fr) max(300px);
50
50
  }
51
51
  a {