bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styling changes to increase reactivity of CRM UI.

Browse source
This commit is contained in:
rocketdebris 2026-01-02 15:31:41 -05:00
parent 58e69596bb
commit 702e718431
3 changed files with 50 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/clientSubPages/AddressInformationForm.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="form-section"> <div class="form-section">
<h3>Address Information</h3> <h3>Property Address Information</h3>
<div class="form-grid"> <div class="form-grid">
<div class="form-field full-width"> <div class="form-field full-width">
<label for="address-line1"> Address Line 1 <span class="required">*</span> </label> <label for="address-line1"> Address Line 1 <span class="required">*</span> </label>
@ -151,8 +151,9 @@ const handleZipcodeInput = async (event) => {
} }
.form-grid { .form-grid {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); flex-direction: column;
flex-wrap: wrap;
gap: 1rem; gap: 1rem;
} }

62
frontend/src/components/clientSubPages/ContactInformationForm.vue
View file

@ -11,14 +11,30 @@
> >
<div class="contact-header"> <div class="contact-header">
<h4>Contact {{ index + 1 }}</h4> <h4>Contact {{ index + 1 }}</h4>
<Button <div class="interactables">
v-if="localFormData.contacts.length > 1" <div class="form-field header-row">
@click="removeContact(index)" <input
size="small" type="checkbox"
severity="danger" class="contact-checkbox"
label="Delete" :id="`check-${index}`"
class="remove-btn" v-model="contact.isPrimary"
/> label="Primary Contact"
:disabled="isSubmitting"
@change="setPrimary(index)"
/>
<label :for="`checkbox-${index}`">
Primary Contact
</label>
</div>
<Button
v-if="localFormData.contacts.length > 1"
@click="removeContact(index)"
size="small"
severity="danger"
label="Delete"
class="remove-btn"
/>
</div>
</div> </div>
<div class="form-rows"> <div class="form-rows">
<div class="form-row"> <div class="form-row">
@ -84,14 +100,6 @@
@keydown="handlePhoneKeydown($event, index)" @keydown="handlePhoneKeydown($event, index)"
/> />
</div> </div>
<div class="form-field">
<v-checkbox
v-model="contact.isPrimary"
label="Primary Contact"
:disabled="isSubmitting"
@change="setPrimary(index)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -287,6 +295,7 @@ defineExpose({});
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background: var(--surface-section); background: var(--surface-section);
min-width: 33%;
} }
.contact-header { .contact-header {
@ -303,13 +312,19 @@ defineExpose({});
font-weight: 600; font-weight: 600;
} }
.interactables {
display: flex;
align-items: center;
flex-direction: row;
gap: 1rem;
}
.remove-btn { .remove-btn {
margin-left: auto; margin-left: auto;
} }
.contact-item .form-grid { .contact-item .form-grid {
display: grid; display: flex;
grid-template-columns: 1fr;
gap: 1rem; gap: 1rem;
} }
@ -320,7 +335,7 @@ defineExpose({});
} }
.form-row { .form-row {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 1rem;
} }
@ -341,6 +356,15 @@ defineExpose({});
font-size: 0.9rem; font-size: 0.9rem;
} }
.form-field.header-row {
flex-direction: row;
align-items: baseline;
}
.contact-checkbox {
margin-top: 0px;
}
.required { .required {
color: var(--red-500); color: var(--red-500);
} }

6
frontend/src/components/clientSubPages/Overview.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="overview-container"> <div class="overview-container">
<template v-if="!editMode"> <template v-if="!editMode && !isNew">
<Button <Button
@click="toggleEditMode" @click="toggleEditMode"
icon="pi pi-pencil" icon="pi pi-pencil"
@ -713,8 +713,8 @@ const handleCancel = () => {
} }
.status-cards { .status-cards {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); flex-wrap: wrap;
gap: 1rem; gap: 1rem;
} }