From a8dd6fcc91e3c0642b93e1715e7e61fb11bee0e9 Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Thu, 23 Aug 2018 17:12:37 +0100
Subject: [PATCH] Use the searchable dropdown for the country selector
---
addressfield/widgets.py | 6 +-
.../src/sass/public/components/_select2.scss | 102 ++++++++++++++++++
opentech/static_src/src/sass/public/main.scss | 1 +
3 files changed, 107 insertions(+), 2 deletions(-)
create mode 100644 opentech/static_src/src/sass/public/components/_select2.scss
diff --git a/addressfield/widgets.py b/addressfield/widgets.py
index 4e9ac3c25..3b85a1f5a 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 000000000..714e7919a
--- /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 8928471a2..9f5b54ddb 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
--
GitLab