@everymatrix/casino-filter-page 0.0.246 → 0.0.250

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-filter-page",
3
- "version": "0.0.246",
3
+ "version": "0.0.250",
4
4
  "main": "dist/casino-filter-page.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "a366db972245075088a5539434d1ea34d55c1b91"
39
+ "gitHead": "a6d1510ec4bbfb0c340f1528b6c6636b9552705c"
40
40
  }
@@ -288,38 +288,38 @@
288
288
  $: clientstylingurl && setClientStylingURL();
289
289
  </script>
290
290
 
291
- <div bind:this={customStylingContainer}>
291
+ <div bind:this={customStylingContainer} part="CustomStylingContainer">
292
292
  {#if isLoading}
293
- <div class="lds-dual-ring"></div>
293
+ <div class="lds-dual-ring" part="lds-dual-ring"></div>
294
294
  {:else}
295
- <div class="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}" >
296
- <section class="FilterHeaderSection">
297
- <div class="FilterHeaderDetails">
298
- <h4 class="FilterHeaderTitle">{$_('filters.filterModalTitle')}</h4>
299
- <h5 class="FilterHeaderSubtitle">{$_('filters.filterModalSubtitle')}</h5>
295
+ <div class="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}" part="FilterModalContent {mobileView ? 'FilterModalMobileContent' : ''}">
296
+ <section class="FilterHeaderSection" part="FilterHeaderSection">
297
+ <div class="FilterHeaderDetails" part="FilterHeaderDetails">
298
+ <h4 class="FilterHeaderTitle" part="FilterHeaderTitle">{$_('filters.filterModalTitle')}</h4>
299
+ <h5 class="FilterHeaderSubtitle" part="FilterHeaderSubtitle">{$_('filters.filterModalSubtitle')}</h5>
300
300
  </div>
301
301
  </section>
302
- <section class="FilterContentSection">
302
+ <section class="FilterContentSection" part="FilterContentSection">
303
303
  {#if vendorsArray}
304
304
  {#each vendorsArray as vendor}
305
- <div class="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" on:click="{() => toggleVendorFilter(vendor)}">
306
- <img class="VendorImage" src="{vendor.image}" alt="{vendor.name}" />
305
+ <div class="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" part="VendorBox {vendor.isFilterSelected ? 'VendorBoxSelected' : ''}" on:click="{() => toggleVendorFilter(vendor)}">
306
+ <img class="VendorImage" part="VendorImage" src="{vendor.image}" alt="{vendor.name}" />
307
307
  {#if vendor.isFilterSelected}
308
- <div class="FilterIconContainer">
309
- <div class="CheckMark"></div>
308
+ <div class="FilterIconContainer" part="FilterIconContainer">
309
+ <div class="CheckMark" part="CheckMark"></div>
310
310
  </div>
311
311
  {/if}
312
312
  </div>
313
313
  {/each}
314
314
  {/if}
315
315
  </section>
316
- <section class="FilterFooterSection">
316
+ <section class="FilterFooterSection" part="FilterFooterSection">
317
317
  {#if provisionalVendorArray}
318
318
  {#if provisionalVendorArray.length}
319
- <div class="ClearFiltersButton" on:click="{() => clearVendorFilter()}">{$_('filters.filterClear')}</div>
319
+ <div class="ClearFiltersButton" part="ClearFiltersButton" on:click="{() => clearVendorFilter()}">{$_('filters.filterClear')}</div>
320
320
  {/if}
321
321
  {/if}
322
- <div class="ApplyFiltersButton {!applyFilters ? "ApplyFilterButtonDisabled" : ''}" on:click="{() => applyVendorFilter()}">{$_('filters.filterApply')}</div>
322
+ <div class="ApplyFiltersButton {!applyFilters ? 'ApplyFilterButtonDisabled' : ''}" part="ApplyFiltersButton {!applyFilters ? 'ApplyFilterButtonDisabled' : ''}" on:click="{() => applyVendorFilter()}">{$_('filters.filterApply')}</div>
323
323
  </section>
324
324
  </div>
325
325
  {/if}
@@ -329,6 +329,17 @@
329
329
  :host {
330
330
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
331
331
  }
332
+
333
+ .FilterModalContent {
334
+ max-height: 80vh;
335
+ display: flex;
336
+ flex-direction: column;
337
+ }
338
+
339
+ .FilterHeaderSection {
340
+ flex-grow: 0;
341
+ }
342
+
332
343
  .FilterHeaderDetails {
333
344
  .FilterHeaderTitle {
334
345
  font-size: 34px;
@@ -346,8 +357,25 @@
346
357
  .FilterContentSection {
347
358
  display: inline-flex;
348
359
  flex-wrap: wrap;
349
- grid-gap: 30px;
360
+ grid-gap: 25px;
361
+ flex-grow: 1;
362
+ overflow-y: auto;
363
+ scrollbar-width: thin;
364
+ scrollbar-color: var(--emfe-w-color-gray-300, #58586B) var(--emfe-w-color-gray-100, #E6E6E6);
350
365
  }
366
+
367
+ .FilterContentSection::-webkit-scrollbar {
368
+ width: 6px;
369
+ }
370
+
371
+ .FilterContentSection::-webkit-scrollbar-thumb {
372
+ background: var(--emfe-w-color-gray-300, #58586B);
373
+ }
374
+
375
+ .FilterContentSection::-webkit-scrollbar-track {
376
+ background: var(--emfe-w-color-gray-100, #E6E6E6);
377
+ }
378
+
351
379
  .VendorBox {
352
380
  width: 230px;
353
381
  height: 125px;
@@ -391,6 +419,7 @@
391
419
  justify-content: center;
392
420
  grid-gap: 30px;
393
421
  margin-top: 60px;
422
+ flex-grow: 0;
394
423
  .ClearFiltersButton, .ApplyFiltersButton {
395
424
  width: 180px;
396
425
  height: 50px;