Style Basic Attribute Collector (CFM-426)

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)
-    ]]);
-  }
-
+?>
+
+<li class="fields-name">
+  <fieldset>
+    <legend class="fieldset-name"><?=  __d('field','name') ?></legend>
+    <div class="fieldset-info">
+
+      <?php foreach(['honorific', 'given', 'middle', 'family', 'suffix'] as $n): ?>
+        <?php if(in_array($n, $vv_permitted_name_fields)): ?>
+          <div class="fieldset-field fields-<?= $n ?>">
+            <label for="<?= $n ?>"><?= __d('field', $n) ?></label>
+            <?= in_array($n, $vv_required_name_fields) ? $this->element('form/requiredSpan') : ''?>
+            <?= $this->element('form/infoDiv/default', [
+              'vv_field_arguments' => [
+                'fieldName' => $n,
+                'fieldLabel' => __d('field', $n),
+                'fieldOptions' => [
+                  'required' => in_array($n, $vv_required_name_fields)
+                ]
+              ]]);
+            ?>
+          </div>
+        <?php endif; ?>
+      <?php endforeach; ?>
+
+    </div>
+  </fieldset>
+</li>
+
+<?php
   print $this->element('form/listItem', [
     'arguments' => [
       'fieldName' => 'mail',

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 '<div id="dispatch-list-container">';
 print $this->element('form/unorderedList');
+print '</div>';
 
 // Inject the Petition ID into the form, though it will most likely
 // still be available in the URL.

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 */

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;