From df12ed8173e91442029ad4740e20fe00fdd0faf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= Date: Thu, 25 Jan 2018 14:12:33 +0100 Subject: [PATCH] Improve rendering of radios, checkboxes and select Namely, it concerns the widgets: RadioSelect, CheckboxInput and Select. --- allauth_ens/scss/_base.scss | 74 +++--- allauth_ens/static/allauth_ens/authens.js | 175 ++++++++++---- allauth_ens/static/allauth_ens/screen.css | 228 ++++++++++-------- .../templates/allauth_ens/block-form.html | 72 ++++-- 4 files changed, 346 insertions(+), 203 deletions(-) diff --git a/allauth_ens/scss/_base.scss b/allauth_ens/scss/_base.scss index fa5af96..62e26c4 100644 --- a/allauth_ens/scss/_base.scss +++ b/allauth_ens/scss/_base.scss @@ -22,6 +22,10 @@ b { font-weight: bold; } +.hidden { + display: none; +} + /******************** * Layout structure * @@ -53,7 +57,7 @@ $main-max-width: 500px; .content-wrapper { display: flex; - flex-flow: row wrap; + flex-flow: row nowrap; align-items: center; /* Blocks */ @@ -66,21 +70,23 @@ $main-max-width: 500px; @media (min-width: 500px) { & > section { flex: 1 1 auto; - width: 250px; + min-width: 250px; } } @media (min-width: 120px) { & > section { flex: 1 1 auto; - width: 350px; + min-width: 350px; } } } #providers { - width:150px; + width: 150px; + min-width: unset; + flex: 1 0 auto; } @@ -393,6 +399,13 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; padding: $input-wrapper-padding; label { + margin-right: 10px; + + color: rgba(0,0,0,0.38); + font-size: $input-font-size; + } + + & .transform-label label { @include ellipsis; padding-left: $input-wrapper-padding; @@ -403,11 +416,6 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; height: $label-height; line-height: $label-height; - color: rgba(0,0,0,0.38); - font-size: $input-font-size; - } - - &:not(.input-skip) label { position: absolute; bottom: 100%; left: 0; @@ -439,6 +447,11 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; height: 20px; } + select { + height: $input-height; + background: $white; + } + @mixin input-special($type, $color: $input-border-color) { &.input-#{$type} { color: $color; @@ -451,29 +464,30 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; } } - &:not(.input-skip) { - - &.input-focused label, - &.input-has-value label { - transform: translate3d(0,$label-small-top,0) scale($label-small-scale); - } - - &.input-focused label { + &.input-focused { + label, .messages { color: inherit; } } + &.input-focused, &.input-has-value { + .transform-label label { + transform: translate3d(0,$label-small-top,0) scale($label-small-scale); + } + } + @include input-special('has-value', $brand-success); @include input-special('error', $brand-danger); @include input-special('focused', $brand-primary); - .infos-spacer { + .messages-spacer { float: right; min-height: $input-space-after; min-width: 1px; } .messages { + color: rgba(0, 0, 0, 0.38); & > * { padding-top: 5px; @@ -481,35 +495,41 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; } } + &.input-checkbox, &.input-radio { + & > :first-child { + display: block; + } + } } -.widget-checkbox { +.buttons-choices { display: inline-flex; - & > input[type="checkbox"] { - display: none; - } - & > button { @include transition; flex: 0 1 auto; display: inline-block; padding: 5px 10px; - background: white; + background: lighten($brand-primary, 60%); color: $gray-light; } - & > button.choice-yes { + & > button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } - & > button.choice-no { + & > button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - & > button.focus { + & > button:focus { + background: lighten($brand-primary, 30%); + color: white; + } + + & > button.selected { background: $brand-primary; color: white; } diff --git a/allauth_ens/static/allauth_ens/authens.js b/allauth_ens/static/allauth_ens/authens.js index 004b0f4..05b48ed 100644 --- a/allauth_ens/static/allauth_ens/authens.js +++ b/allauth_ens/static/allauth_ens/authens.js @@ -2,79 +2,154 @@ * Input fields handlers */ -function toggleWrapperClass(class_name, callable) { - let func = function(bool) { - if (bool === undefined) - bool = callable.apply(this); - this.wrapper.toggleClass(class_name, bool); - }; - return func; -} +let WIDGET_CLS = { + has_error: 'input-error', + has_focus: 'input-focused', + has_value: 'input-has-value' +}; -let Input = function(field) { +let Widget = function($wrapper) { + this.$wrapper = $wrapper; - this.dom_field = field; - this.field = $(field); - this.wrapper = $(field).closest('.input-wrapper'); + this.$field = $wrapper.find('input'); - // initialization - this.update_focus(); this.update_has_value(); // register event handlers - this.field.focus( () => this.on_focus() ); - this.field.blur( () => this.on_blur() ); - this.field.on('change', () => this.on_change() ); + this.$field.focus( () => this.on_focus() ); + this.$field.blur( () => this.on_blur() ); + this.$field.on('change', () => this.on_change() ); + + // initialization + if (this.has_focus()) + this.$field.focus(); }; -Input.prototype = { - has_value: function() { return this.field.val() ? true : false; }, - has_focus: function() { return this.field.is(':focus'); }, - has_error: function() { return !this.has_value() && this.field.prop('required'); }, +Widget.prototype = { + has_value: function () { + return Boolean(this.$field.val()); + }, - on_focus: function() { this.update_focus(true); }, - on_blur: function() { this.update_focus(false); }, - on_change: function() { + has_focus: function () { + return this.$field.is(':focus'); + }, + + has_error: function () { + return this.$field.prop('required') && !this.has_value(); + }, + + on_focus: function () { + this.$wrapper.addClass(WIDGET_CLS.has_focus); + }, + + on_blur: function () { + this.$wrapper.removeClass(WIDGET_CLS.has_focus); + }, + + on_change: function () { this.update_has_value(); this.update_error(); + }, + + update_has_value: function () { + this.$wrapper.toggleClass(WIDGET_CLS.has_value, this.has_value()); + }, + + update_error: function () { + let has_error = this.has_error(); + this.$wrapper.toggleClass(WIDGET_CLS.has_error, has_error); + if (!has_error) + this.$wrapper.find('.messages .error-desc').hide(); } }; -$.extend(Input.prototype, { - update_focus: toggleWrapperClass('input-focused', Input.prototype.has_focus), - update_error: function () { - let has_error = this.has_error(); - toggleWrapperClass('input-error').bind(this)(has_error); - if (!has_error) { - this.wrapper.find('.messages .error-desc').hide(); +let CheckboxInput = function ($wrapper) { + this.$wrapper = $wrapper; + + this.$field = $wrapper.find('input'); + this.$buttons = $wrapper.find('button'); + + this.$buttons.click( (e) => this.on_click(e) ); + this.$buttons.focus( () => this.on_focus() ); + this.$buttons.blur( () => this.on_blur() ); +}; + +CheckboxInput.prototype = { + on_click: function (e) { + let $button = $(e.target); + let checked = $button.hasClass('choice-yes'); + + this.$field.prop('checked', checked); + this.$buttons.removeClass('selected'); + $button.addClass('selected'); + }, + + on_focus: function () { + this.$wrapper.addClass(WIDGET_CLS.has_focus); + }, + + on_blur: function () { + this.$wrapper.removeClass(WIDGET_CLS.has_focus); + } +}; + +let RadioSelect = function ($wrapper) { + this.$wrapper = $wrapper; + + this.$buttons = $wrapper.find('button'); + + this.$buttons.click( (e) => this.on_click(e) ); + this.$buttons.focus( () => this.on_focus() ); + this.$buttons.blur( () => this.on_blur() ); +}; + +RadioSelect.prototype = { + on_click: function (e) { + let $button = $(e.target); + let $field = $button.find('input'); + + if (!$field.prop('checked')) { + $field.prop('checked', true); + this.$buttons.removeClass('selected'); + $button.addClass('selected'); } }, - update_has_value: toggleWrapperClass('input-has-value', Input.prototype.has_value), -}); + on_focus: function () { this.$wrapper.addClass(WIDGET_CLS.has_focus); }, + on_blur: function () { this.$wrapper.removeClass(WIDGET_CLS.has_focus); } +}; $(function () { - let fields = $('input.field'); - fields.map( function() { return new Input(this); }); + $('.input-wrapper').each(function () { + let $wrapper = $(this); + let widget_type = $wrapper.data('widget-type'); + + if (widget_type == 'checkboxinput') { + new CheckboxInput($wrapper); + } else if (widget_type == 'radioselect') { + new RadioSelect($wrapper); + } else if (widget_type == 'select') { + new Select($wrapper); + } else { + new Widget($wrapper); + } + }); }); -$(function () { - let choice_yes = $('.choice-yes'); - let choice_no = $('.choice-no'); +let Select = function ($wrapper) { + this.$wrapper = $wrapper; - choice_yes.click(function () { - $(this).siblings('input').prop('checked', true); - $(this).addClass('focus'); - $(this).siblings('.choice-no').removeClass('focus'); - }); + this.$field = $wrapper.find('select'); - choice_no.click(function () { - $(this).siblings('input').prop('checked', true); - $(this).addClass('focus'); - $(this).siblings('.choice-yes').removeClass('focus'); - }); + this.$field.focus( () => this.on_focus() ); + this.$field.blur( () => this.on_blur() ); +}; + +Select.prototype = { + on_focus: function () { this.$wrapper.addClass(WIDGET_CLS.has_focus); }, + on_blur: function () { this.$wrapper.removeClass(WIDGET_CLS.has_focus); } +}; -}); /** * Keyboard shortcuts @@ -87,7 +162,7 @@ function prepareShorcuts() { let shortcuts = {}; $('.method-wrapper a').each( function() { - let name = $(this).text(); + let name = $(this).text().trim(); for (let i=0; i < name.length; i++) { let key = name[i].toLowerCase(); diff --git a/allauth_ens/static/allauth_ens/screen.css b/allauth_ens/static/allauth_ens/screen.css index 6efa395..4bfa440 100644 --- a/allauth_ens/static/allauth_ens/screen.css +++ b/allauth_ens/static/allauth_ens/screen.css @@ -128,10 +128,15 @@ b { font-weight: bold; } +/* line 25, ../../scss/_base.scss */ +.hidden { + display: none; +} + /******************** * Layout structure * ********************/ -/* line 32, ../../scss/_base.scss */ +/* line 36, ../../scss/_base.scss */ .wrapper { max-width: 500px; margin: 0 auto; @@ -140,54 +145,56 @@ b { } @media (min-height: 400px) and (min-width: 576px) { - /* line 42, ../../scss/_base.scss */ + /* line 46, ../../scss/_base.scss */ html, body { height: 100%; } } @media (min-height: 500px) and (min-width: 576px) { - /* line 48, ../../scss/_base.scss */ + /* line 52, ../../scss/_base.scss */ .wrapper { position: relative; top: -5%; } } -/* line 54, ../../scss/_base.scss */ +/* line 58, ../../scss/_base.scss */ .content-wrapper { display: flex; - flex-flow: row wrap; + flex-flow: row nowrap; align-items: center; /* Blocks */ } -/* line 61, ../../scss/_base.scss */ +/* line 65, ../../scss/_base.scss */ .content-wrapper > section { flex: 1 100%; padding: 15px; } @media (min-width: 500px) { - /* line 67, ../../scss/_base.scss */ + /* line 71, ../../scss/_base.scss */ .content-wrapper > section { flex: 1 1 auto; - width: 250px; + min-width: 250px; } } @media (min-width: 120px) { - /* line 74, ../../scss/_base.scss */ + /* line 78, ../../scss/_base.scss */ .content-wrapper > section { flex: 1 1 auto; - width: 350px; + min-width: 350px; } } -/* line 82, ../../scss/_base.scss */ +/* line 86, ../../scss/_base.scss */ #providers { width: 150px; + min-width: unset; + flex: 1 0 auto; } /********** * Header * **********/ -/* line 94, ../../scss/_base.scss */ +/* line 100, ../../scss/_base.scss */ header { display: flex; align-items: stretch; @@ -203,7 +210,7 @@ header::after { content: ""; clear: both; } -/* line 108, ../../scss/_base.scss */ +/* line 114, ../../scss/_base.scss */ header a { color: #fff !important; } @@ -212,7 +219,7 @@ header a:focus, header a:hover { background: #d43f3a; text-decoration: none; } -/* line 117, ../../scss/_base.scss */ +/* line 123, ../../scss/_base.scss */ header .right { display: flex; flex-flow: column; @@ -223,25 +230,25 @@ header .right { font-size: 14px; text-align: center; } -/* line 130, ../../scss/_base.scss */ +/* line 136, ../../scss/_base.scss */ header .right > * { flex: 0 0 auto; } -/* line 133, ../../scss/_base.scss */ +/* line 139, ../../scss/_base.scss */ header .right > * > * { display: block; padding: 5px 10px; } -/* line 139, ../../scss/_base.scss */ +/* line 145, ../../scss/_base.scss */ header .right #connect-status { font-weight: normal; font-size: 12px; } -/* line 143, ../../scss/_base.scss */ +/* line 149, ../../scss/_base.scss */ header .right #connect-status .fa { margin-right: 5px; } -/* line 149, ../../scss/_base.scss */ +/* line 155, ../../scss/_base.scss */ header h1 { flex: 1 1 auto; padding: 15px 25px; @@ -250,11 +257,11 @@ header h1 { /************ * Messages * ************/ -/* line 162, ../../scss/_base.scss */ +/* line 168, ../../scss/_base.scss */ .messages-container { padding: 0 15px; } -/* line 165, ../../scss/_base.scss */ +/* line 171, ../../scss/_base.scss */ .messages-container::after { display: block; content: ""; @@ -262,30 +269,30 @@ header h1 { height: 2px; } -/* line 173, ../../scss/_base.scss */ +/* line 179, ../../scss/_base.scss */ .messages-list { padding: 10px 0; } -/* line 183, ../../scss/_base.scss */ +/* line 189, ../../scss/_base.scss */ .message { padding: 5px; font-size: 14px; color: #292b2c; } -/* line 178, ../../scss/_base.scss */ +/* line 184, ../../scss/_base.scss */ .message.info { color: #28a1c5; } -/* line 178, ../../scss/_base.scss */ +/* line 184, ../../scss/_base.scss */ .message.success { color: #2d672d; } -/* line 178, ../../scss/_base.scss */ +/* line 184, ../../scss/_base.scss */ .message.warning { color: #b06d0f; } -/* line 178, ../../scss/_base.scss */ +/* line 184, ../../scss/_base.scss */ .message.error { color: #b52b27; } @@ -293,24 +300,24 @@ header h1 { /*********** * Content * ***********/ -/* line 202, ../../scss/_base.scss */ +/* line 208, ../../scss/_base.scss */ section > * + * { margin-top: 15px; } /* Methods list */ -/* line 210, ../../scss/_base.scss */ +/* line 216, ../../scss/_base.scss */ .method-list { display: flex; flex-flow: row wrap; justify-content: space-between; } -/* line 215, ../../scss/_base.scss */ +/* line 221, ../../scss/_base.scss */ .method-list > .method-wrapper { flex: 1 100%; padding: 2px 0; } -/* line 219, ../../scss/_base.scss */ +/* line 225, ../../scss/_base.scss */ .method-list > .method-wrapper a { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -340,11 +347,11 @@ section > * + * { } /* Connected accounts list */ -/* line 243, ../../scss/_base.scss */ +/* line 249, ../../scss/_base.scss */ .connections-providers-list > * + * { margin-top: 2px; } -/* line 247, ../../scss/_base.scss */ +/* line 253, ../../scss/_base.scss */ .connections-providers-list > * > .heading { width: 100%; padding: 10px; @@ -357,7 +364,7 @@ section > * + * { content: ""; clear: both; } -/* line 256, ../../scss/_base.scss */ +/* line 262, ../../scss/_base.scss */ .connections-providers-list > * > .heading .connect { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -388,29 +395,29 @@ section > * + * { color: #fff; } -/* line 268, ../../scss/_base.scss */ +/* line 274, ../../scss/_base.scss */ .connections-list { border-left: 5px solid #f7f7f9; } -/* line 271, ../../scss/_base.scss */ +/* line 277, ../../scss/_base.scss */ .connections-list > * { padding: 10px; font-size: 14px; } -/* line 275, ../../scss/_base.scss */ +/* line 281, ../../scss/_base.scss */ .connections-list > * + * { border-top: 1px dotted #eceeef; } -/* line 279, ../../scss/_base.scss */ +/* line 285, ../../scss/_base.scss */ .connections-list > * > .fa { margin-right: 5px; } -/* line 283, ../../scss/_base.scss */ +/* line 289, ../../scss/_base.scss */ .connections-list > * .delete { float: right; margin-top: -2px; } -/* line 287, ../../scss/_base.scss */ +/* line 293, ../../scss/_base.scss */ .connections-list > * .delete [type=submit] { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -439,17 +446,17 @@ section > * + * { background: #b52b27; color: #fff; } -/* line 296, ../../scss/_base.scss */ +/* line 302, ../../scss/_base.scss */ .connections-list form { display: inline-block; } /* E-mail adresses list */ -/* line 305, ../../scss/_base.scss */ +/* line 311, ../../scss/_base.scss */ .emailaddress-list .emailaddress { border-bottom: 1px dotted #464a4c; } -/* line 309, ../../scss/_base.scss */ +/* line 315, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary { height: 45px; } @@ -459,13 +466,13 @@ section > * + * { content: ""; clear: both; } -/* line 314, ../../scss/_base.scss */ +/* line 320, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > * { float: left; height: 100%; padding: 12px; } -/* line 320, ../../scss/_base.scss */ +/* line 326, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status { float: right; width: 45px; @@ -473,25 +480,25 @@ section > * + * { text-align: center; font-size: 20px; } -/* line 328, ../../scss/_base.scss */ +/* line 334, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .email { padding: 12px; font-weight: bold; } -/* line 333, ../../scss/_base.scss */ +/* line 339, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .primary { color: #025aa5; } -/* line 337, ../../scss/_base.scss */ +/* line 343, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .verified { color: #449d44; } -/* line 341, ../../scss/_base.scss */ +/* line 347, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .unverified { color: #ec971f; } -/* line 350, ../../scss/_base.scss */ +/* line 356, ../../scss/_base.scss */ .actions { margin-bottom: 10px; } @@ -501,7 +508,7 @@ section > * + * { content: ""; clear: both; } -/* line 355, ../../scss/_base.scss */ +/* line 361, ../../scss/_base.scss */ .actions > * { float: right; margin-right: 10px; @@ -511,7 +518,7 @@ section > * + * { /********* * Forms * *********/ -/* line 387, ../../scss/_base.scss */ +/* line 393, ../../scss/_base.scss */ .input-wrapper { position: relative; display: block; @@ -524,24 +531,19 @@ section > * + * { content: ""; clear: both; } -/* line 395, ../../scss/_base.scss */ +/* line 401, ../../scss/_base.scss */ .input-wrapper label { + margin-right: 10px; + color: rgba(0, 0, 0, 0.38); + font-size: 16px; +} +/* line 408, ../../scss/_base.scss */ +.input-wrapper .transform-label label { padding-left: 0; width: 100%; max-width: 100%; height: 26px; line-height: 26px; - color: rgba(0, 0, 0, 0.38); - font-size: 16px; -} -/* line 26, ../../scss/_mixins.scss */ -.input-wrapper label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -/* line 410, ../../scss/_base.scss */ -.input-wrapper:not(.input-skip) label { position: absolute; bottom: 100%; left: 0; @@ -550,7 +552,13 @@ section > * + * { transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transform-origin: left top; } -/* line 422, ../../scss/_base.scss */ +/* line 26, ../../scss/_mixins.scss */ +.input-wrapper .transform-label label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +/* line 430, ../../scss/_base.scss */ .input-wrapper input.field:not([type=checkbox]) { height: 30px; width: 100%; @@ -560,96 +568,110 @@ section > * + * { border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 16px; } -/* line 436, ../../scss/_base.scss */ +/* line 444, ../../scss/_base.scss */ .input-wrapper input[type="checkbox"] { vertical-align: sub; width: 20px; height: 20px; } -/* line 456, ../../scss/_base.scss */ -.input-wrapper:not(.input-skip).input-focused label, .input-wrapper:not(.input-skip).input-has-value label { - transform: translate3d(0, 6.5px, 0) scale(0.75); +/* line 450, ../../scss/_base.scss */ +.input-wrapper select { + height: 30px; + background: #fff; } -/* line 461, ../../scss/_base.scss */ -.input-wrapper:not(.input-skip).input-focused label { +/* line 468, ../../scss/_base.scss */ +.input-wrapper.input-focused label, .input-wrapper.input-focused .messages { color: inherit; } -/* line 443, ../../scss/_base.scss */ +/* line 474, ../../scss/_base.scss */ +.input-wrapper.input-focused .transform-label label, .input-wrapper.input-has-value .transform-label label { + transform: translate3d(0, 6.5px, 0) scale(0.75); +} +/* line 456, ../../scss/_base.scss */ .input-wrapper.input-has-value { color: #449d44; } -/* line 447, ../../scss/_base.scss */ +/* line 460, ../../scss/_base.scss */ .input-wrapper.input-has-value input.field { padding-bottom: 0px; border-width: 2px; border-color: #449d44; } -/* line 443, ../../scss/_base.scss */ +/* line 456, ../../scss/_base.scss */ .input-wrapper.input-error { color: #d9534f; } -/* line 447, ../../scss/_base.scss */ +/* line 460, ../../scss/_base.scss */ .input-wrapper.input-error input.field { padding-bottom: 0px; border-width: 2px; border-color: #d9534f; } -/* line 443, ../../scss/_base.scss */ +/* line 456, ../../scss/_base.scss */ .input-wrapper.input-focused { color: #025aa5; } -/* line 447, ../../scss/_base.scss */ +/* line 460, ../../scss/_base.scss */ .input-wrapper.input-focused input.field { padding-bottom: 0px; border-width: 2px; border-color: #025aa5; } -/* line 470, ../../scss/_base.scss */ -.input-wrapper .infos-spacer { +/* line 483, ../../scss/_base.scss */ +.input-wrapper .messages-spacer { float: right; min-height: 10px; min-width: 1px; } -/* line 478, ../../scss/_base.scss */ +/* line 489, ../../scss/_base.scss */ +.input-wrapper .messages { + color: rgba(0, 0, 0, 0.38); +} +/* line 492, ../../scss/_base.scss */ .input-wrapper .messages > * { padding-top: 5px; font-size: 12px; } +/* line 499, ../../scss/_base.scss */ +.input-wrapper.input-checkbox > :first-child, .input-wrapper.input-radio > :first-child { + display: block; +} -/* line 486, ../../scss/_base.scss */ -.widget-checkbox { +/* line 505, ../../scss/_base.scss */ +.buttons-choices { display: inline-flex; } -/* line 489, ../../scss/_base.scss */ -.widget-checkbox > input[type="checkbox"] { - display: none; -} -/* line 493, ../../scss/_base.scss */ -.widget-checkbox > button { +/* line 508, ../../scss/_base.scss */ +.buttons-choices > button { transition: background 0.15s, color 0.15s, border-color 0.15s; flex: 0 1 auto; display: inline-block; padding: 5px 10px; - background: white; + background: #daeeff; color: #636c72; } -/* line 502, ../../scss/_base.scss */ -.widget-checkbox > button.choice-yes { +/* line 517, ../../scss/_base.scss */ +.buttons-choices > button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } -/* line 507, ../../scss/_base.scss */ -.widget-checkbox > button.choice-no { +/* line 522, ../../scss/_base.scss */ +.buttons-choices > button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } -/* line 512, ../../scss/_base.scss */ -.widget-checkbox > button.focus { +/* line 527, ../../scss/_base.scss */ +.buttons-choices > button:focus { + background: #43a7fd; + color: white; +} +/* line 532, ../../scss/_base.scss */ +.buttons-choices > button.selected { background: #025aa5; color: white; } -/* line 518, ../../scss/_base.scss */ +/* line 538, ../../scss/_base.scss */ [type=submit]:not(.link) { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -676,7 +698,7 @@ section > * + * { color: #fff; } -/* line 524, ../../scss/_base.scss */ +/* line 544, ../../scss/_base.scss */ [type=submit].link { transition: background 0.15s, color 0.15s, border-color 0.15s; color: #025aa5; @@ -693,23 +715,23 @@ section > * + * { cursor: pointer; } -/* line 533, ../../scss/_base.scss */ +/* line 553, ../../scss/_base.scss */ .form-inline { display: flex; align-items: center; } -/* line 537, ../../scss/_base.scss */ +/* line 557, ../../scss/_base.scss */ .form-inline > .input-wrapper { flex: 1 0 auto; } -/* line 541, ../../scss/_base.scss */ +/* line 561, ../../scss/_base.scss */ .form-inline [type=submit] { margin-top: -5px; margin-left: 8px; font-size: 14px; } -/* line 548, ../../scss/_base.scss */ +/* line 568, ../../scss/_base.scss */ .btn { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -729,7 +751,7 @@ section > * + * { cursor: pointer; } -/* line 553, ../../scss/_base.scss */ +/* line 573, ../../scss/_base.scss */ .btn-primary { background: #025aa5; color: #fff; @@ -740,7 +762,7 @@ section > * + * { color: #fff; } -/* line 554, ../../scss/_base.scss */ +/* line 574, ../../scss/_base.scss */ .btn-success { background: #449d44; color: #fff; diff --git a/allauth_ens/templates/allauth_ens/block-form.html b/allauth_ens/templates/allauth_ens/block-form.html index e843843..fb58446 100644 --- a/allauth_ens/templates/allauth_ens/block-form.html +++ b/allauth_ens/templates/allauth_ens/block-form.html @@ -2,32 +2,58 @@ {% csrf_token %} -{% for field in form %} - {% with widget=field|widget_type %} - {% if widget == "checkboxinput" %} -
- +{% for field in form.visible_fields %} + {% with widget_type=field|widget_type %} +
+ {% if widget_type == "checkboxinput" %} +
+ +
+ + +
+ +
+ {% elif widget_type == "radioselect" %} +
+ +
+ {% for choice in field %} + + {% endfor %} +
+
+ {% elif widget_type == "select" %} +
+ + {% render_field field %} +
{% else %} -
+
{% render_field field class+="field" size="" autocomplete="off" autocapitalize="none" placeholder="" %} - {% endif %} -
-
    - {% if field.help_text %} -
  • {{ field.help_text|safe }}
    • - {% endif %} - {% for error in field.errors %} -
  • {{ error }}
    • - {% endfor %} -
+ {% endif %} +
+
    + {% if field.help_text %} +
  • {{ field.help_text|safe }}
    • + {% endif %} + {% for error in field.errors %} +
  • {{ error }}
    • + {% endfor %} +
+
{% endwith %} {% endfor %} + +