From a9181f15518a010a1c789d6332a81dcc1c7116bb Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Thu, 14 Nov 2024 11:40:26 -0500 Subject: [PATCH] Style Basic Attribute Collector and ensure that names and telephone numbers grow and shrink based on permitted fields. (CFM-426) --- .../BasicAttributeCollectors/dispatch.inc | 39 +++++++++++++----- app/templates/Standard/dispatch.php | 3 ++ app/webroot/css/co-base.css | 39 +++++++++++------- app/webroot/css/co-responsive.css | 40 +++++++++++++------ 4 files changed, 85 insertions(+), 36 deletions(-) diff --git a/app/plugins/CoreEnroller/templates/BasicAttributeCollectors/dispatch.inc b/app/plugins/CoreEnroller/templates/BasicAttributeCollectors/dispatch.inc index a89f5620..564c21b3 100644 --- a/app/plugins/CoreEnroller/templates/BasicAttributeCollectors/dispatch.inc +++ b/app/plugins/CoreEnroller/templates/BasicAttributeCollectors/dispatch.inc @@ -31,15 +31,36 @@ declare(strict_types = 1); if($vv_action == 'dispatch') { // Make the Form fields editable $this->Field->enableFormEditMode(); - - foreach(['honorific', 'given', 'middle', 'family', 'suffix'] as $n) { - print $this->element('form/listItem', [ - 'arguments' => [ - 'fieldName' => $n, - 'fieldLabel' => __d('field', $n) - ]]); - } - +?> + +
  • +
    + +
    + + + +
    + + element('form/requiredSpan') : ''?> + element('form/infoDiv/default', [ + 'vv_field_arguments' => [ + 'fieldName' => $n, + 'fieldLabel' => __d('field', $n), + 'fieldOptions' => [ + 'required' => in_array($n, $vv_required_name_fields) + ] + ]]); + ?> +
    + + + +
    +
    +
    • + +element('form/listItem', [ 'arguments' => [ 'fieldName' => 'mail', diff --git a/app/templates/Standard/dispatch.php b/app/templates/Standard/dispatch.php index 4fa9d546..be78db43 100644 --- a/app/templates/Standard/dispatch.php +++ b/app/templates/Standard/dispatch.php @@ -81,8 +81,11 @@ // By default, the form will POST to the current controller // Note we need to open the form for view so Cake will autopopulate values print $this->Form->create(); + // Form body +print '
    '; print $this->element('form/unorderedList'); +print '
    '; // Inject the Petition ID into the form, though it will most likely // still be available in the URL. diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 850fbea1..38865977 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -1782,49 +1782,58 @@ li[data-pc-section="emptymessage"] { background-color: unset; } /* ENROLLMENT FLOWS: ATTRIBUTE COLLECTOR */ -body.attributecollectors main { +body.attributecollectors main, +body.basicattributecollectors main { max-width: 800px; margin: 0 auto; } -body.attributecollectors form { +body.attributecollectors form, +body.basicattributecollectors form { margin-top: 1em; } -body.attributecollectors .submit { +body.attributecollectors .submit, +body.basicattributecollectors .submit { width: 100%; text-align: right; } -#dispatch_AttributeCollectors li { +#dispatch-list-container > ul { + border-top: none; +} +#dispatch-list-container li { border: none; } -#dispatch_AttributeCollectors .field, -#dispatch_AttributeCollectors fieldset { +#dispatch-list-container .field, +#dispatch-list-container fieldset { display: block; padding: 0.75em 1em 1.5em; } -#dispatch_AttributeCollectors .fieldset-info { +#dispatch-list-container .fieldset-info { display: flex; flex-direction: column; gap: 0.5em; padding: 1em; border: 1px solid var(--cmg-color-bg-006); } -#dispatch_AttributeCollectors li.fields-submit .field { +#dispatch-list-container .fieldset-info > div { + flex-grow: 1; +} +#dispatch-list-container li.fields-submit .field { display: grid; } -#dispatch_AttributeCollectors .field-name, -#dispatch_AttributeCollectors .field-desc { +#dispatch-list-container .field-name, +#dispatch-list-container .field-desc { padding: 0; } -#dispatch_AttributeCollectors .field-title, -#dispatch_AttributeCollectors legend { +#dispatch-list-container .field-title, +#dispatch-list-container legend { font-size: 1.05rem; margin-bottom: 0; } -#dispatch_AttributeCollectors .field-info { +#dispatch-list-container .field-info { padding-top: 0.5em; } -#dispatch_AttributeCollectors input[type='text'], -#dispatch_AttributeCollectors textarea { +#dispatch-list-container input[type='text'], +#dispatch-list-container textarea { padding: 0.5rem; } /* DIALOG BOX */ diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css index a3c284f2..ac115089 100644 --- a/app/webroot/css/co-responsive.css +++ b/app/webroot/css/co-responsive.css @@ -472,41 +472,55 @@ white-space: nowrap; } /* ENROLLMENT FLOWS: ATTRIBUTE COLLECTOR */ - #dispatch_AttributeCollectors .fieldset-info { + #dispatch-list-container .fieldset-info { flex-direction: row; padding: 0; border: none; } - #dispatch_AttributeCollectors .fieldset-subgroup { + #dispatch-list-container .fieldset-subgroup { display: flex; width: 100%; gap: 1em; } - #dispatch_AttributeCollectors .fieldset-subgroup .fieldset-field { + #dispatch-list-container .fieldset-subgroup .fieldset-field { flex-grow: 1; } /* Attribute Specific Styles */ /* addresses */ - #dispatch_AttributeCollectors .fields-address .fieldset-info { + #dispatch-list-container .fields-address .fieldset-info { /* Retain the mobile style for addresses */ flex-direction: column; padding: 1em; border: 1px solid var(--cmg-color-bg-006); } - #dispatch_AttributeCollectors .fields-address .fieldset-info .fieldset-subgroup:first-child .fieldset-field.fields-room { + #dispatch-list-container .fields-address .fieldset-info .fieldset-subgroup:first-child .fieldset-field.fields-room { flex-grow: 0; } - #dispatch_AttributeCollectors .fields-address .fieldset-info .fieldset-subgroup:first-child .fieldset-field.fields-room input { + #dispatch-list-container .fields-address .fieldset-info .fieldset-subgroup:first-child .fieldset-field.fields-room input { width: 12.4rem; } /* names */ - #dispatch_AttributeCollectors .fields-name .fieldset-info .fieldset-field.fields-honorific input, - #dispatch_AttributeCollectors .fields-name .fieldset-info .fieldset-field.fields-suffix input { + #dispatch-list-container .fields-name .fieldset-info .fieldset-field.fields-honorific, + #dispatch-list-container .fields-name .fieldset-info .fieldset-field.fields-suffix { + flex-shrink: 1; + flex-grow: 0; + } + #dispatch-list-container .fields-name .fieldset-info .fieldset-field.fields-honorific input, + #dispatch-list-container .fields-name .fieldset-info .fieldset-field.fields-suffix input { width: 5em; } /* telephone numbers */ - #dispatch_AttributeCollectors .fields-telephoneNumber .fieldset-info .fieldset-field.fields-number input { - width: 24em; + #dispatch-list-container .fields-telephoneNumber .fieldset-info .fieldset-field { + flex-shrink: 1; + flex-grow: 0; + } + #dispatch-list-container .fields-telephoneNumber .fieldset-info .fieldset-field.fields-number { + flex-grow: 1; + } + #dispatch-list-container .fields-telephoneNumber .fieldset-info .fieldset-field.fields-country_code input, + #dispatch-list-container .fields-telephoneNumber .fieldset-info .fieldset-field.fields-area_code input, + #dispatch-list-container .fields-telephoneNumber .fieldset-info .fieldset-field.fields-extension input { + width: 7em; } /* PETITIONS */ ul.form-list li.petition-enrollee-items .field-info { @@ -576,10 +590,12 @@ font-size: 1.7em; margin: 0.5em 0 0.25em; } - body.attributecollectors #main-wrapper { + body.attributecollectors #main-wrapper, + body.basicattributecollectors #main-wrapper { background-color: var(--cmg-color-bg-003); } - body.attributecollectors #main { + body.attributecollectors #main, + body.basicattributecollectors #main { background-color: var(--cmg-color-body-bg); margin: 4em auto; padding: 0 2em;