UHasselt Component Library

Search Filter: Mobile 

<div id='search-filter-mobile' class='opened'>
    <div class='search-filter-header'>
        <span class='text'>Filter</span>
        <span class="icon far fa-times   icon-close" aria-hidden="true"></span>
    </div>

    <form>
        <ul class='search-filter-categories'>
            <li data-alias='opleidingstype'>
                <span class='text'>Opleidingstype</span>
                <span class="icon far fa-chevron-right   icon-down" aria-hidden="true"></span>
            </li>
            <li data-alias='interessegebied'>
                <span class='text'>Interessegebied</span>
                <span class="icon far fa-chevron-right   icon-down" aria-hidden="true"></span>
            </li>
            <li data-alias='taal'>
                <span class='text'>Taal</span>
                <span class="icon far fa-chevron-right   icon-down" aria-hidden="true"></span>
            </li>
            <li data-alias='lesvorm'>
                <span class='text'>Lesvorm</span>
                <span class="icon far fa-chevron-right   icon-down" aria-hidden="true"></span>
            </li>
        </ul>

        <div id='search-filter-mobile-items-opleidingstype' class='search-filter-mobile-items'>
            <div class='search-filter-back'>
                <span class="icon far fa-chevron-left   icon-up" aria-hidden="true"></span>
                <span class='text'>Opleidingstype</span>
            </div>
            <div class='search-filter-mobile-items-inner'>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb1" name="cb1">
                        <label class="form-label   " for="cb1">
                            Item 1
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb2" name="cb2">
                        <label class="form-label   " for="cb2">
                            Item 2
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
            </div>
        </div>
        <div id='search-filter-mobile-items-interessegebied' class='search-filter-mobile-items'>
            <div class='search-filter-back'>
                <span class="icon far fa-chevron-left   icon-up" aria-hidden="true"></span>
                <span class='text'>Interessegebied</span>
            </div>
            <div class='search-filter-mobile-items-inner'>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb3" name="cb3">
                        <label class="form-label   " for="cb3">
                            Item 3
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb4" name="cb4">
                        <label class="form-label   " for="cb4">
                            Item 4
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
            </div>
        </div>
        <div id='search-filter-mobile-items-taal' class='search-filter-mobile-items'>
            <div class='search-filter-back'>
                <span class="icon far fa-chevron-left   icon-up" aria-hidden="true"></span>
                <span class='text'>Taal</span>
            </div>
            <div class='search-filter-mobile-items-inner'>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb5" name="cb5">
                        <label class="form-label   " for="cb5">
                            Item 5
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb6" name="cb6">
                        <label class="form-label   " for="cb6">
                            Item 6
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
            </div>
        </div>
        <div id='search-filter-mobile-items-lesvorm' class='search-filter-mobile-items'>
            <div class='search-filter-back'>
                <span class="icon far fa-chevron-left   icon-up" aria-hidden="true"></span>
                <span class='text'>Lesvorm</span>
            </div>
            <div class='search-filter-mobile-items-inner'>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb7" name="cb7">
                        <label class="form-label   " for="cb7">
                            Item 7
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
                <div class='search-filter-mobile-item'>
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb8" name="cb8">
                        <label class="form-label   " for="cb8">
                            Item 8
                        </label>
                    </div>

                    <label class="form-label   " for="input-label">
                        Input label
                    </label>
                </div>
            </div>
        </div>

        <div class='search-filter-button'>
            <a href="#" class="button button-black ">
                <span>
                    <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                    <span class="text">
                        Toon 24 resultaten
                    </span>
                </span>
            </a>

        </div>
    </form>
</div>
 
<div id='search-filter-mobile' class='opened'>
    <div class='search-filter-header'>
        <span class='text'>{{filterTitle}}</span>
        {{render '@icon' @root.icon-close}}
    </div>

    <form>
        <ul class='search-filter-categories'>
            {{#each categories}}
                <li data-alias='{{alias}}'>
                    <span class='text'>{{heading.text}}</span>
                    {{render '@icon' @root.icon-right}}
                </li>
            {{/each}}
        </ul>

        {{#each categories}}
            <div id='search-filter-mobile-items-{{alias}}' class='search-filter-mobile-items'>
                <div class='search-filter-back'>
                    {{render '@icon' @root.icon-left}}
                    <span class='text'>{{heading.text}}</span>
                </div>
                <div class='search-filter-mobile-items-inner'>
                    {{#each items}}
                        <div class='search-filter-mobile-item'>
                            {{render '@checkbox' checkbox merge=true}}
                            {{render '@label' label merge=true}}
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/each}}

        <div class='search-filter-button'>
            {{render '@button' button merge=true}}
        </div>
    </form>
</div>
 
{
  "modifier": "",
  "filterTitle": "Filter",
  "icon-close": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "icon-close"
  },
  "icon-bell": {
    "icon": "fa-bell",
    "style": "far",
    "modifier": "icon-bell"
  },
  "icon-bell-red": {
    "icon": "fa-bell",
    "style": "fas",
    "modifier": "icon-bell-red"
  },
  "icon-down": {
    "icon": "fa-chevron-down",
    "style": "far",
    "modifier": "icon-down"
  },
  "icon-up": {
    "icon": "fa-chevron-up",
    "style": "far",
    "modifier": "icon-up"
  },
  "icon-right": {
    "icon": "fa-chevron-right",
    "style": "far",
    "modifier": "icon-down"
  },
  "icon-left": {
    "icon": "fa-chevron-left",
    "style": "far",
    "modifier": "icon-up"
  },
  "categories": [
    {
      "startOpened": true,
      "alias": "opleidingstype",
      "heading": {
        "text": "Opleidingstype",
        "modifier": "text-red"
      },
      "items": [
        {
          "checkbox": {
            "name": "cb1",
            "id": "cb1",
            "label": {
              "text": "Item 1",
              "for": "cb1"
            }
          },
          "counter": 10
        },
        {
          "checkbox": {
            "name": "cb2",
            "id": "cb2",
            "label": {
              "text": "Item 2",
              "for": "cb2"
            }
          },
          "counter": 5
        }
      ]
    },
    {
      "startOpened": false,
      "alias": "interessegebied",
      "heading": {
        "text": "Interessegebied",
        "modifier": "text-red"
      },
      "items": [
        {
          "checkbox": {
            "name": "cb3",
            "id": "cb3",
            "label": {
              "text": "Item 3",
              "for": "cb3"
            }
          },
          "counter": 22
        },
        {
          "checkbox": {
            "name": "cb4",
            "id": "cb4",
            "label": {
              "text": "Item 4",
              "for": "cb4"
            }
          },
          "counter": 2
        }
      ]
    },
    {
      "startOpened": false,
      "alias": "taal",
      "heading": {
        "text": "Taal",
        "modifier": "text-red"
      },
      "items": [
        {
          "checkbox": {
            "name": "cb5",
            "id": "cb5",
            "label": {
              "text": "Item 5",
              "for": "cb5"
            }
          },
          "counter": 343
        },
        {
          "checkbox": {
            "name": "cb6",
            "id": "cb6",
            "label": {
              "text": "Item 6",
              "for": "cb6"
            }
          },
          "counter": 1
        }
      ]
    },
    {
      "startOpened": false,
      "alias": "lesvorm",
      "heading": {
        "text": "Lesvorm",
        "modifier": "text-red"
      },
      "items": [
        {
          "checkbox": {
            "name": "cb7",
            "id": "cb7",
            "label": {
              "text": "Item 7",
              "for": "cb7"
            }
          },
          "counter": 3
        },
        {
          "checkbox": {
            "name": "cb8",
            "id": "cb8",
            "label": {
              "text": "Item 8",
              "for": "cb8"
            }
          },
          "counter": 13
        }
      ]
    }
  ],
  "button": {
    "text": "Toon 24 resultaten",
    "icon": false
  }
}
  • Content: 
    #search-filter-desktop {
    display: inline-block;

    form {
        @apply m-0;
    }

    .item-toggle {
        position: relative;
        top: -5px;
    }

    .search-filter-category {
        @apply pb-6;

        &:not(:last-child) {
            @apply border-b-2 mb-6;
        }

        .search-filter-heading {
            @apply relative m-0 cursor-pointer;
            display: flex;
            justify-content: space-between;

            .heading {
                @apply m-0;
            }

            .search-filter-toggle {
                margin-left: 60px;
            }
        }

        .search-filter-desktop-items {
            @apply mt-4;

            .search-filter-desktop-item {
                @apply mb-2;

                display: flex;
                align-items: flex-start;

                .form-checkbox {
                    @apply inline-block;
                }

                .form-label {
                    @apply inline-block text-md relative cursor-pointer;
                    top: 1px;
                }

                margin-left: 0;

                .search-filter-small-copy {
                    @apply text-black-300;
                    margin-left: 12px;
                    font-size: 12px;
                }
            }

            .search-filter-icon {
                @apply text-black-500;

                margin-left: 20px;
            }

            .search-filter-icon-red {
                @apply text-red;

                margin-left: 20px;
            }
        }

        &:not([open]) {
            .icon-up {
                @apply hidden;
            }
        }

        &[open] {
            .icon-down {
                @apply hidden;
            }
        }
    }
}

#search-filter-mobile {
    /* @apply md:hidden; */
    @apply flex flex-col fixed w-screen h-screen top-0 bg-white;
    @apply transform-gpu transition-all;

    z-index: 9999;
    left: -100vw;

    &.opened {
        @apply left-0;
    }

    .search-filter-header {
        @apply flex items-center;
        @apply px-4 py-3;
        @apply text-lg text-white bg-red;
        flex: 0 0 auto;

        .text {
            @apply flex-1;
        }
    }

    .search-filter-categories {
        @apply flex-1;

        > li {
            @apply flex items-center;
            @apply px-4 py-3;
            @apply text-md border-gray-500 border-b-2;

            .text {
                @apply flex-1;
            }
        }
    }

    .search-filter-mobile-items {
        @apply hidden flex-1 flex-col;

        .search-filter-back {
            @apply flex items-center;
            @apply px-4 py-3;
            @apply text-md bg-gray-500 font-bold;
            flex: 0 0 auto;

            .icon {
                @apply mr-4;
            }
        }

        .search-filter-mobile-items-inner {
            @apply overflow-y-auto;
            flex: 1 1 0;

            .search-filter-mobile-item {
                @apply px-4 py-2;

                .form-checkbox {
                    @apply inline-block mr-2;
                }

                .form-label {
                    @apply inline-block text-md relative cursor-pointer;
                    top: 1px;
                }
            }
        }
    }

    .search-filter-button {
        @apply px-4 py-3 text-center;
        flex: 0 0 auto;
    }
}
  • URL: /components/raw/search-filter/search-filter.css
  • Filesystem Path: src\components\04-organisms\search-filter\search-filter.css
  • Size: 3.5 KB
  • Content: 
    (function () {

    'use strict';

    (function () {

        'use strict';

        // Close all details after iframe is loaded
        $(window).on('load', function (e) {
            if ($(window).width() > 1023) {
                document.body
                    .querySelectorAll('#search-filter-desktop details')
                    .forEach((e) =>
                        e.hasAttribute('open')
                            ? e.removeAttribute('open')
                            : e.setAttribute('open', true)
                    );
            }
        });
    })();

    var filterDelay;
    $('#search-filter-desktop input:checkbox').change(function () {
        clearTimeout(filterDelay);

        var $form = $(this).closest('form');
        filterDelay = setTimeout(function () {
            $form.submit();
        }, 1000);
    });

    var $searchFilterMobile = $('#search-filter-mobile');

    // Click category
    $searchFilterMobile
        .find('.search-filter-categories > li')
        .on('click', function () {
            $searchFilterMobile
                .find('.search-filter-categories, .search-filter-items')
                .hide();
            $searchFilterMobile
                .find('#search-filter-items-' + this.dataset.alias)
                .css('display', 'flex');
        });

    // Click back
    $searchFilterMobile.find('.search-filter-back').on('click', function () {
        $searchFilterMobile.find('.search-filter-items').hide();
        $searchFilterMobile.find('.search-filter-categories').show();
    });

    // Click close
    $searchFilterMobile.find('.icon-close').on('click', function () {
        $searchFilterMobile.removeClass('opened');
    });
})();
  • URL: /components/raw/search-filter/search-filter.js
  • Filesystem Path: src\components\04-organisms\search-filter\search-filter.js
  • Size: 1.8 KB

No notes defined.