zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-03 08:22:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Polishing touches

Browse source
This commit is contained in:
zandercymatics 2024-05-14 10:03:10 -06:00
parent aaa9047478
commit b741540bdf
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
6 changed files with 59 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/registrar/assets/js/get-gov.js
View file

@ -842,6 +842,14 @@ function hideDeletedForms() {
*/
(function finishUserSetupListener() {
function getInputFieldId(fieldName){
return `#id_${fieldName}`
}
function getReadonlyFieldId(fieldName){
return `#${fieldName}__edit-button-readonly`
}
// Shows the hidden input field and hides the readonly one
function showInputFieldHideReadonlyField(fieldName, button) {
let inputId = getInputFieldId(fieldName)
@ -854,29 +862,19 @@ function hideDeletedForms() {
inputField.classList.toggle('display-none');
// Toggle the bold style on the grid row
let formGroup = button.closest(".usa-form-group")
if (formGroup){
gridRow = button.querySelector(".grid-row")
if (gridRow){
gridRow.toggle("bold-usa-label")
}
let gridRow = button.closest(".grid-col-2").closest(".grid-row")
if (gridRow){
gridRow.classList.toggle("bold-usa-label")
}
}
function getInputFieldId(fieldName){
return `#id_${fieldName}`
}
function getReadonlyFieldId(fieldName){
return `#${fieldName}__edit-button-readonly`
}
function handleFullNameField(fieldName, nameFields) {
// Remove the display-none class from the nearest parent div
let fieldId = getInputFieldId(fieldName)
let inputField = document.querySelector(fieldId);
if (inputField) {
// Show each name field
nameFields.forEach(function(fieldName) {
let nameId = getInputFieldId(fieldName)
let nameField = document.querySelector(nameId);
@ -887,7 +885,14 @@ function hideDeletedForms() {
}
}
});
// Remove the "full_name" field
inputFieldParentDiv = inputField.closest("div");
if (inputFieldParentDiv) {
inputFieldParentDiv.remove();
}
}
}
function handleEditButtonClick(fieldName, button){
@ -895,8 +900,14 @@ function hideDeletedForms() {
// Lock the edit button while this operation occurs
button.disabled = true
showInputFieldHideReadonlyField(fieldName, button);
button.classList.add('display-none');
if (fieldName == "full_name"){
let nameFields = ["first_name", "middle_name", "last_name"]
handleFullNameField(fieldName, nameFields);
}else {
showInputFieldHideReadonlyField(fieldName, button);
}
button.classList.add("display-none");
// Unlock after it completes
button.disabled = false
@ -925,10 +936,16 @@ function hideDeletedForms() {
let errorMessage = document.querySelector(`#id_${fieldName}__error-message`);
if (errorMessage) {
let nameFields = ["first_name", "middle_name", "last_name"]
// If either the full_name field errors out,
// or if any of its associated fields do - show all name related fields.
// Otherwise, just show the problematic field.
if (fieldName == "full_name"){
let nameFields = ["first_name", "middle_name", "last_name"]
handleFullNameField(fieldName, nameFields);
}else {
}else if (nameFields.includes(fieldName)){
handleFullNameField("full_name", nameFields);
}
else {
button.click()
}
}

11
src/registrar/assets/sass/_theme/_forms.scss
View file

@ -38,6 +38,10 @@
font-weight: bold;
}
&.bold-usa-label label.usa-label{
font-weight: bold;
}
}
.usa-form-readonly:first-of-type {
@ -62,6 +66,13 @@ legend.float-left-tablet + button.float-right-tablet {
}
}
@media (min-width: 35em) {
.usa-form--largest {
max-width: 35rem;
}
}
// Custom style for disabled inputs
@media (prefers-color-scheme: light) {
.usa-input:disabled, .usa-select:disabled, .usa-textarea:disabled {

22
src/registrar/forms/contact.py
View file

@ -9,23 +9,10 @@ class ContactForm(forms.Form):
cleaned_data = super().clean()
# Remove the full name property
if "full_name" in cleaned_data:
full_name: str = cleaned_data["full_name"]
if full_name:
name_fields = full_name.split(" ")
cleaned_data["first_name"] = name_fields[0]
if len(name_fields) == 2:
cleaned_data["last_name"] = " ".join(name_fields[1:])
elif len(name_fields) > 2:
cleaned_data["middle_name"] = name_fields[1]
cleaned_data["last_name"] = " ".join(name_fields[2:])
else:
cleaned_data["middle_name"] = None
cleaned_data["last_name"] = None
# Delete the full name element as we don't need it anymore
del cleaned_data["full_name"]
# Delete the full name element as its purely decorative.
# We include it as a normal Charfield for all the advantages
# and utility that it brings, but we're playing pretend.
del cleaned_data["full_name"]
return cleaned_data
full_name = forms.CharField(
@ -53,6 +40,7 @@ class ContactForm(forms.Form):
email = forms.EmailField(
label="Organization email",
required=False,
max_length=None,
)
phone = PhoneNumberField(
label="Phone",

10
src/registrar/templates/finish_contact_setup.html
View file

@ -34,9 +34,9 @@
Review the details below and update any required information.
Note that editing this information won’t affect your Login.gov account information.
</p>
{# TODO: maybe remove this? #}
<p>Required information is marked with an asterisk (*).</p>
<form id="step__{{steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
{# We use a var called 'remove_margin_top' rather than 'add_margin_top' because most fields use this #}
{% include "includes/required_fields.html" with remove_margin_top=True %}
<form id="step__{{steps.current}}" class="usa-form usa-form--largest" method="post" novalidate>
{% csrf_token %}
<fieldset class="usa-fieldset">
<legend class="usa-sr-only">
@ -61,8 +61,8 @@
{% input_with_errors form.last_name %}
{% endwith %}
{# TODO: I shouldnt need to do add_class here #}
{% with show_readonly=True add_class="display-none" group_classes="usa-form-readonly padding-top-2" sublabel_text=email_sublabel_text %}
{# This field doesn't have the readonly button but it has common design elements from it #}
{% with show_readonly=True add_class="display-none" group_classes="usa-form-readonly padding-top-2 bold-usa-label" sublabel_text=email_sublabel_text %}
{% input_with_errors form.email %}
{% endwith %}

4
src/registrar/templates/includes/readonly_input.html
View file

@ -1,6 +1,6 @@
{% load static field_helpers url_helpers %}
<div id="{{field.name}}__edit-button-readonly" class="margin-top-1 margin-bottom-1 input-with-edit-button {%if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
<div id="{{field.name}}__edit-button-readonly" class="margin-top-2 margin-bottom-1 input-with-edit-button {% if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
{% if field.value or not field.field.required %}
<use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
@ -8,7 +8,7 @@
<use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
{%endif %}
</svg>
<div class="display-inline padding-left-05 margin-left-3 readonly-field">
<div class="display-inline padding-left-05 margin-left-3 readonly-field {% if not field.field.required %}text-base{% endif %}">
{{ field.value }}
</div>
</div>

2
src/registrar/templates/includes/required_fields.html
View file

@ -1,3 +1,3 @@
<p class="margin-top-3">
<p class="{% if not remove_margin_top %}margin-top-3 {% endif %}">
<em>Required fields are marked with an asterisk (<abbr class="usa-hint usa-hint--required" title="required">*</abbr>).</em>
</p>