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;
} }

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

@ -11,6 +11,21 @@
> >
<div class="contact-header"> <div class="contact-header">
<h4>Contact {{ index + 1 }}</h4> <h4>Contact {{ index + 1 }}</h4>
<div class="interactables">
<div class="form-field header-row">
<input
type="checkbox"
class="contact-checkbox"
:id="`check-${index}`"
v-model="contact.isPrimary"
label="Primary Contact"
:disabled="isSubmitting"
@change="setPrimary(index)"
/>
<label :for="`checkbox-${index}`">
Primary Contact
</label>
</div>
<Button <Button
v-if="localFormData.contacts.length > 1" v-if="localFormData.contacts.length > 1"
@click="removeContact(index)" @click="removeContact(index)"
@ -20,6 +35,7 @@
class="remove-btn" class="remove-btn"
/> />
</div> </div>
</div>
<div class="form-rows"> <div class="form-rows">
<div class="form-row"> <div class="form-row">
<div class="form-field"> <div class="form-field">
@ -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;
} }