Skip to content
Jump to bottom

Style Basic Attribute Collector (CFM-426) #249

Merged
merged 1 commit into from Nov 15, 2024
Merged

Style Basic Attribute Collector (CFM-426) #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 30 additions & 9 deletions app/plugins/CoreEnroller/templates/BasicAttributeCollectors/dispatch.inc
View file
Open in desktop
Expand Up @@ -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',
Expand Down
3 changes: 3 additions & 0 deletions app/templates/Standard/dispatch.php
View file
Open in desktop
Expand Up @@ -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.
Expand Down
39 changes: 24 additions & 15 deletions app/webroot/css/co-base.css
View file
Open in desktop
Expand Up @@ -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 */
Expand Down
40 changes: 28 additions & 12 deletions app/webroot/css/co-responsive.css
View file
Open in desktop
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down