Commit b127a621 authored by Ben Mullins's avatar Ben Mullins Committed by Chris Wells
Browse files

Issue #3281200 by bnjmnm, narendraR, hooroomoo, chrisfromredfin: Make... 

Issue #3281200 by bnjmnm, narendraR, hooroomoo, chrisfromredfin: Make categories filter usable on mobile; remove extraneous classes
parent 8d6fbd9a

sveltejs/public/build/bundle.css

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js.map

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/src/Filter.svelte

+36 −30
Original line number Diff line number Diff line
@@ -9,6 +9,7 @@ 
<script>

  import { createEventDispatcher, getContext, onMount } from 'svelte';

  import { moduleCategoryFilter, moduleCategoryVocabularies } from './stores';

  import MediaQuery from './MediaQuery.svelte';



  const { drupalSettings, Drupal } = window;

  const dispatch = createEventDispatcher();
@@ -61,12 +62,13 @@ 
  });

</script>



<!--Changed to checkbox -->

<form class="views-exposed-form">

  <div

    class="views-exposed-form__item js-form-item form-item js-form-type-select form-type--select js-form-item-type form-item--type"

  >

<MediaQuery query="(min-width: 901px)" let:matches>

  <form>

    <details class="pb-categories" open={matches}>

      <summary hidden={matches}>

        <h2>{Drupal.t('Categories')}</h2>

      </summary>

      <h2 hidden={!matches}>{Drupal.t('Categories')}</h2>

      {#await apiModuleCategory then categoryList}

        {#each categoryList as dt}

          <input
@@ -80,21 +82,25 @@ 
          <br />

        {/each}

      {/await}

  </div>

    </details>

  </form>

</MediaQuery>



<style>

  .views-exposed-form__item.views-exposed-form__item {

    max-width: 100%;

    margin: 0.75rem 0.5rem 0 0;

  summary {

    padding: 0;

    cursor: pointer;

  }

  .views-exposed-form.views-exposed-form {

    display: flex;

    flex-wrap: wrap;

  [open] summary {

    padding-bottom: 0.95rem;

  }

  h2 {

    margin-top: 0;

    margin-bottom: 1.5rem;

    padding: 0.5rem 1.5rem 1.5rem 1.5rem;

    background-color: #fff;

  }

  summary > h2 {

    display: inline;

    font-size: 1rem;

    padding: 0 0.5rem;

  }

  .checkbox-label {

    padding-left: 10px;

sveltejs/src/MediaQuery.svelte

0 → 100644
+45 −0
Original line number Diff line number Diff line 
<!-- Media query component based on

 https://svelte.dev/repl/26eb44932920421da01e2e21539494cd?version=3.48.0 -->

<script>

  import { onMount } from 'svelte';



  // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export

  export let query;



  let mql;

  let mqlListener;

  let wasMounted = false;

  let matches = false;



  // eslint-disable-next-line no-shadow

  function addNewListener(query) {

    mql = window.matchMedia(query);

    mqlListener = (v) => {

      matches = v.matches;

    };

    mql.addEventListener('change', mqlListener);

    matches = mql.matches;

  }



  function removeActiveListener() {

    if (mql && mqlListener) {

      mql.removeListener(mqlListener);

    }

  }



  onMount(() => {

    wasMounted = true;

    return () => {

      removeActiveListener();

    };

  });



  $: {

    if (wasMounted) {

      removeActiveListener();

      addNewListener(query);

    }

  }

</script>



<slot {matches} />