From d80966abdc71139fa9a2a89e4a831006c54c0ea5 Mon Sep 17 00:00:00 2001 From: Alex Green Date: Thu, 23 May 2024 20:35:10 +0000 Subject: [PATCH 01/48] Facet option checkboxes, fully functional --- ckanext/ontario_theme/fanstatic/common.css | 139 +++++++++++++++++- .../fanstatic/scripts/odc-facet-checkboxes.js | 16 ++ .../fanstatic/scripts/webassets.yml | 9 ++ .../ontario-checkbox-background-no-width.svg | 1 + .../templates/internal/package/search.html | 3 +- .../internal/snippets/facet_list.html | 34 ++--- 6 files changed, 182 insertions(+), 20 deletions(-) create mode 100644 ckanext/ontario_theme/fanstatic/scripts/odc-facet-checkboxes.js create mode 100644 ckanext/ontario_theme/public/images/ontario-checkbox-background-no-width.svg diff --git a/ckanext/ontario_theme/fanstatic/common.css b/ckanext/ontario_theme/fanstatic/common.css index 162fa5370..cdc685ac7 100644 --- a/ckanext/ontario_theme/fanstatic/common.css +++ b/ckanext/ontario_theme/fanstatic/common.css @@ -3133,7 +3133,7 @@ label::after { font-size: 16px; } -.nav > li.show-more-items { +.show-more-items { display: none; } @@ -3466,4 +3466,141 @@ label::after { .popular-datasets-404 li { padding-bottom: 8px; +} + +/* ======================================================================== + Checkboxes - Design System + ======================================================================== */ + +.ontario-checkboxes { + margin-bottom: 2.5rem; + max-width: 48rem +} + +.ontario-checkboxes__item { + position: relative; + margin: 0 0 1rem; + padding: 0 0 0 2rem; + min-height: 28px; + box-sizing: content-box +} + +.ontario-checkboxes__item:last-of-type { + margin: 0 +} + +@media screen and (max-width: 40em) { + .ontario-checkboxes__item { + padding: 0 0 0 2.5rem; + min-height: 32px + } +} + +.ontario-checkboxes__input { + cursor: pointer; + margin: 0; + position: absolute; + top: -2px; + left: -2px; + opacity: 0; + width: 36px; + height: 36px; + z-index: 1; + -webkit-tap-highlight-color: transparent +} + +@media screen and (max-width: 40em) { + .ontario-checkboxes__input { + width: 40px; + height: 40px + } +} + +.ontario-checkboxes__label { + display: inline-block; + cursor: pointer; + line-height: 1.5; + margin: .25rem 0; + padding: 0 1rem; + width: auto; + white-space: normal +} + +@media screen and (max-width: 40em) { + .ontario-checkboxes__label { + margin: .33rem 0 + } +} + +.ontario-checkboxes__label:before { + content: ""; + border: 2px solid #1a1a1a; + background-color: #fff; + border-radius: 4px; + position: absolute; + top: 0; + left: 0; + width: 32px; + height: 32px; + transition: border .1s ease-in-out; + display: block +} + +@media screen and (max-width: 40em) { + .ontario-checkboxes__label:before { + width: 36px; + height: 36px + } +} + +.ontario-checkboxes__label:after { + content: ""; + background-image: url("/images/ontario-checkbox-background-no-width.svg"); + background-repeat: no-repeat; + height: 30px; + width: 30px; + position: absolute; + top: 1px; + left: 1px; + right: 0; + bottom: 0; + opacity: 0; + display: block +} + +@media screen and (max-width: 40em) { + .ontario-checkboxes__label:after { + height: 34px; + width: 34px + } +} + +.ontario-checkboxes__input:focus + .ontario-checkboxes__label:before { + box-shadow: 0 0 0 4px #009adb; + outline: 4px solid transparent; + transition: all .1s ease-in-out +} + +.ontario-checkboxes__input:checked + .ontario-checkboxes__label:after { + opacity: 1 +} + +.ontario-checkboxes__input:checked + .ontario-checkboxes__label:before { + background-color: #1a1a1a +} + +/* ======================================================================== + Checkboxes - Overrides + ======================================================================== */ +.facet-fieldset { + padding-left: 20px; +} + +.facet-fieldset label { + font-weight: unset; + font-size: 16px; +} + +.facet-fieldset .ontario-checkboxes { + margin-bottom: unset; } \ No newline at end of file diff --git a/ckanext/ontario_theme/fanstatic/scripts/odc-facet-checkboxes.js b/ckanext/ontario_theme/fanstatic/scripts/odc-facet-checkboxes.js new file mode 100644 index 000000000..69746171b --- /dev/null +++ b/ckanext/ontario_theme/fanstatic/scripts/odc-facet-checkboxes.js @@ -0,0 +1,16 @@ +// Enable JavaScript's strict mode. Strict mode catches some common +// programming errors and throws exceptions, prevents some unsafe actions from +// being taken, and disables some confusing and bad JavaScript features. + +"use strict"; + +ckan.module('facet_checkboxes', function ($) { + return { + initialize: function () { + $(":checkbox").on('click', jQuery.proxy(this._onChange, this)); + }, + _onChange: function (event) { + window.location.href = event.target.value; + } + } +}); \ No newline at end of file diff --git a/ckanext/ontario_theme/fanstatic/scripts/webassets.yml b/ckanext/ontario_theme/fanstatic/scripts/webassets.yml index 75ddf5538..13c8c04f1 100644 --- a/ckanext/ontario_theme/fanstatic/scripts/webassets.yml +++ b/ckanext/ontario_theme/fanstatic/scripts/webassets.yml @@ -12,6 +12,15 @@ ontario_theme_form_validators_js: filters: rjsmin contents: odc-dataset-form-validators.js output: ontario_theme_scripts/%(version)s_odc-dataset-form-validators.js + extra: + preload: + - vendor/jquery + - base/main + +ontario_theme_facet_checkboxes_js: + filters: rjsmin + contents: odc-facet-checkboxes.js + output: ontario_theme_scripts/%(version)s_odc-facet-checkboxes.js extra: preload: - vendor/jquery diff --git a/ckanext/ontario_theme/public/images/ontario-checkbox-background-no-width.svg b/ckanext/ontario_theme/public/images/ontario-checkbox-background-no-width.svg new file mode 100644 index 000000000..cf713cd47 --- /dev/null +++ b/ckanext/ontario_theme/public/images/ontario-checkbox-background-no-width.svg @@ -0,0 +1 @@ + diff --git a/ckanext/ontario_theme/templates/internal/package/search.html b/ckanext/ontario_theme/templates/internal/package/search.html index c36770575..c20895534 100644 --- a/ckanext/ontario_theme/templates/internal/package/search.html +++ b/ckanext/ontario_theme/templates/internal/package/search.html @@ -110,8 +110,9 @@

{% endblock primary %} {% block secondary %} + {%- asset "ontario_theme_scripts/ontario_theme_facet_checkboxes_js" -%}