From d1b70ee3991fcf94a5309b7e507ea21a9094b1f8 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 21 Jun 2022 14:56:17 -0500 Subject: [PATCH 1/6] docs(form): recaptcha keys server setttings --- taccsite_cms/_settings/form_plugin.py | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/taccsite_cms/_settings/form_plugin.py b/taccsite_cms/_settings/form_plugin.py index 7e42af918..8ef2c3a90 100644 --- a/taccsite_cms/_settings/form_plugin.py +++ b/taccsite_cms/_settings/form_plugin.py @@ -113,3 +113,14 @@ 'django.forms', # support form template override 'captcha', # support recaptcha for djangocms_forms ] + +######################## +# DJANGO: RECAPTCHA +######################## + +# To properly avoid client error about using test keys +# RECAPTCHA_PUBLIC_KEY = '__this_must_be_on_server_not_here__' +# RECAPTCHA_SECRET_KEY = '__this_must_be_on_server_not_here__' + +# To silence server error about using test keys +# SILENCED_SYSTEM_CHECKS = ['captcha.recaptcha_test_key_error'] From cf0fda9031d681438364926cea50962494c7a8ef Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 22 Jun 2022 10:30:45 -0500 Subject: [PATCH 2/6] feat(form): change asterisk to styled "(required)" Text color was chosen to be accessible: https://webaim.org/resources/contrastchecker/ --- .../css/src/_imports/components/django.cms.forms.css | 10 ++++++++++ .../djangocms_forms/form_template/default.html | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css index ddfebaba4..25a8ffc4e 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css @@ -64,6 +64,16 @@ p.help-text:last-child { margin-bottom: 0; /* overwrite forms.css label */ } +:root { + /* TUP-271: Add to & Import from @core-styles */ + /* https://github.com/TACC/tup-ui/blob/c5454ba/libs/core-styles/src/lib/_imports/settings/color.css */ + --global-color-danger--dark: #ab1717; +} +.asterisk { + margin-left: 0.5em; + color: var(--global-color-danger--dark); +} + /* Errors */ diff --git a/taccsite_cms/templates/djangocms_forms/form_template/default.html b/taccsite_cms/templates/djangocms_forms/form_template/default.html index 926588e72..0de3ac62d 100644 --- a/taccsite_cms/templates/djangocms_forms/form_template/default.html +++ b/taccsite_cms/templates/djangocms_forms/form_template/default.html @@ -24,7 +24,7 @@

{{ instance.title }}

{{ field }} {% endif %} {% if not field|is_checkbox %} {{ field }} From 1b5601ad5b5295ea47a9db4338443d1d45894863 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 22 Jun 2022 10:46:18 -0500 Subject: [PATCH 3/6] feat(form): most fields width 100% --- .../site_cms/css/src/_imports/elements/form.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css index 7dbfa17b1..0784be761 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css @@ -38,7 +38,16 @@ textarea { padding: 15px 10px; border: var(--global-border--normal); } - +input:not( + [type="time"], + [type="date"], + [type="checkbox"], + [type="radio"] +), +select, +textarea { + width: 100%; +} input[type="time"], input[type="date"] { font-family: var(--global-font-family--mono); From f88658d3f6bb64216537af8b8d01776cb4c2b722 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 22 Jun 2022 11:33:56 -0500 Subject: [PATCH 4/6] feat(form): field height based on pointer accuracy --- .../site_cms/css/src/_imports/elements/form.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css index 0784be761..5491e6d73 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css @@ -13,6 +13,7 @@ Reference: Styleguide Elements.Forms */ +@import url("_imports/tools/media-queries.css"); form { font-family: var(--global-font-family--sans-alt); @@ -35,7 +36,6 @@ fieldset:not(:last-child) { input, select, textarea { - padding: 15px 10px; border: var(--global-border--normal); } input:not( @@ -52,3 +52,18 @@ input[type="time"], input[type="date"] { font-family: var(--global-font-family--mono); } + +@media (pointer: coarse) { + input, + select, + textarea { + padding: 15px 10px; + } +} +@media (pointer: fine), (pointer: none) { + input, + select, + textarea { + padding: 5px 10px; + } +} From 440206b52f424c1e513406d333d9723df2ad1751 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 22 Jun 2022 12:34:23 -0500 Subject: [PATCH 5/6] fix(form): add missing accent colors for core MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mimicing frontera accent colors, because CMS button design¹ show those: https://xd.adobe.com/view/b37b291a-7798-4814-90f3-7ac63c48a3e0-e628/screen/d7a72466-4ae8-43fd-9531-44e033245ddb/ Using "Color Button" style² cuz it has more contrast than CMS¹ designs.³ ¹ The left two columns ("On Light", "On Dark") are for CMS. ² I.e. .c-button--primary ³ Designer says his CMS designs lack contrast, and he will redesign. Fixes: https://jira.tacc.utexas.edu/browse/TUP-285 --- .../site_cms/css/src/_imports/settings/color.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/settings/color.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css new file mode 100644 index 000000000..a07f79142 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/color.css @@ -0,0 +1,13 @@ +@import url("@tacc/core-styles/source/_imports/settings/color.css"); + +:root { + /* Accent Hues */ + --global-color-accent--x-light: #F2DFBD; /* originally #e3d7fd */ + --global-color-accent--light: #BDA374; /* originally #a387ed */ + --global-color-accent--normal: #877453; /* originally #784fe8 */ + --global-color-accent--dark: #64563E; /* originally #6039cc */ + --global-color-accent--x-dark: #403014; /* originally #3d189b */ + + --global-color-accent--alt: #E0D8C9; /* originally #d2cce7 */ + --global-color-accent--weak: #9D702140; /* originally #6039cc40 */ +} From 5f63bdf09c1d546a2f6ac7930a4bd01d21e1d085 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 22 Jun 2022 13:58:37 -0500 Subject: [PATCH 6/6] chore(form): remove errant css import I was gonna use media query ranges, but I found a better media query to use. --- taccsite_cms/static/site_cms/css/src/_imports/elements/form.css | 1 - 1 file changed, 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css index 5491e6d73..c0c057771 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css @@ -13,7 +13,6 @@ Reference: Styleguide Elements.Forms */ -@import url("_imports/tools/media-queries.css"); form { font-family: var(--global-font-family--sans-alt);