diff --git a/addressfield/widgets.py b/addressfield/widgets.py index 4e9ac3c250b44835f88b552411335acc327b75c7..3b85a1f5ac725a5b86820a572fd787a6dedaa8d5 100644 --- a/addressfield/widgets.py +++ b/addressfield/widgets.py @@ -1,7 +1,7 @@ from django import forms -from django_countries.widgets import CountrySelectWidget from django_countries import countries +from django_select2.forms import Select2Widget class KeepOwnAttrsWidget(forms.Widget): @@ -10,7 +10,9 @@ class KeepOwnAttrsWidget(forms.Widget): return super().get_context(name, value, attrs) -class CountrySelectWithChoices(KeepOwnAttrsWidget, CountrySelectWidget): +class CountrySelectWithChoices(KeepOwnAttrsWidget, Select2Widget): + is_required = True + def __init__(self, *args, **kwargs): kwargs['choices'] = countries super().__init__(*args, **kwargs) diff --git a/opentech/static_src/src/sass/public/components/_select2.scss b/opentech/static_src/src/sass/public/components/_select2.scss new file mode 100644 index 0000000000000000000000000000000000000000..714e7919af04e7c26d9a580bba1110b4ccf9cdf8 --- /dev/null +++ b/opentech/static_src/src/sass/public/components/_select2.scss @@ -0,0 +1,102 @@ +.select2 { + &-container { + z-index: 99995; // to override any modals + } + + .select2-container--default, + &.select2-container--default { + width: 100% !important; // sass-lint:disable-line no-important + + .select2-selection--single { + height: 55px; + border: 1px solid $color--mid-grey; + border-radius: 0; + + &.is-active { + font-weight: $weight--bold; + border-color: $color--primary; + } + + .select2-selection__clear { + position: absolute; + right: 35px; + display: none; + float: none; + + @include media-query(small-tablet) { + display: block; + } + } + + .select2-selection__rendered { + padding-left: 15px; + line-height: 55px; + } + + .select2-selection__arrow { + right: 15px; + height: 53px; + pointer-events: none; + background: url('./../../images/dropdown.svg') transparent no-repeat 95% center; + background-size: 8px; + + b[role='presentation'] { + display: none; + } + } + + .select2-selection__placeholder { + color: $color--default; + } + } + } +} + +.select2-container { + &--default { + .select2-results__option--highlighted[aria-selected] { + color: $color--default !important; // sass-lint:disable-line no-important + background-color: transparentize($color--primary, 0.9) !important; // sass-lint:disable-line no-important + } + } + + .select2-dropdown { + border: 0; + border-bottom: 1px solid $color--mid-grey; + border-radius: 0; + + @include media-query(small-tablet) { + border: 1px solid $color--mid-grey; + } + } + + .select2-results__option { + padding: 0; + + &[aria-selected='true'] { + .wrap { + &::before { + background: url('./../../images/tick.svg') $color--dark-blue center no-repeat; + background-size: 12px; + border: 1px solid $color--dark-blue; + content: ''; + } + } + } + + .wrap { + display: flex; + align-items: center; + padding: 6px; + + &::before { + width: 20px; + height: 20px; + margin-right: 10px; + background: $color--white; + border: 1px solid $color--mid-grey; + content: ''; + } + } + } +} diff --git a/opentech/static_src/src/sass/public/main.scss b/opentech/static_src/src/sass/public/main.scss index 8928471a2984f625853c0b1af4699162ca4ef311..9f5b54ddbe7bb997ca33c8f15cabc126c3c29a52 100755 --- a/opentech/static_src/src/sass/public/main.scss +++ b/opentech/static_src/src/sass/public/main.scss @@ -33,6 +33,7 @@ @import 'components/responsive-object'; @import 'components/rich-text'; @import 'components/section'; +@import 'components/select2'; @import 'components/wrapper'; // Layout