Skip to content

Commit

Permalink
bug/CE-481-Fix css alignment of coordinate fields with error msg (#284)
Browse files Browse the repository at this point in the history 
Co-authored-by: afwilcox <[email protected]>
  • Loading branch information
@Scarlett-Truong @afwilcox
Scarlett-Truong and afwilcox authored Feb 14, 2024
1 parent 83ba057 commit 5917c22
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 40 deletions.
79 changes: 40 additions & 39 deletions frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useAppDispatch, useAppSelector } from "../../../../../hooks/hooks";
import { selectOfficersByAgency } from "../../../../../store/reducers/officer";
import { getComplaintById, selectComplaint, selectComplaintCallerInformation, selectComplaintHeader } from "../../../../../store/reducers/complaints";
import { CompSelect } from "../../../../common/comp-select";
import { CompInput } from "../../../../common/comp-input";
import { ToggleError } from "../../../../../common/toast";
import { getSelectedOfficer, bcBoundaries } from "../../../../../common/methods";

Expand Down Expand Up @@ -228,9 +227,9 @@ export const EquipmentForm: FC<EquipmentForm> = ({
return (
<div className="comp-outcome-report-complaint-assessment">
<ToastContainer />
<div className="comp-details-edit-container">
<div className="equipment-form-edit-container" style={{ marginTop: '10px'}}>
<div className="comp-details-edit-column">
<div className="comp-details-label-input-pair">
<div className="equipment-form-label-input-pair">
<label htmlFor="equipment-type-select">Equipment type</label>
<CompSelect
id="equipment-type-select"
Expand All @@ -246,10 +245,10 @@ export const EquipmentForm: FC<EquipmentForm> = ({
</div>
<div className="comp-details-edit-column comp-details-right-column"></div>
</div>
<div className="comp-details-edit-container">
<div className="equipment-form-edit-container">
<div className="comp-details-edit-column">
<div className="comp-details-label-input-pair">
<label htmlFor="equipment-address" style={{ marginTop: complaintData?.locationSummary? '-21px' : '0px' }}>Address</label>
<div className="equipment-form-label-input-pair">
<label htmlFor="equipment-address">Address</label>
<div className="edit-input">
<input
type="text"
Expand All @@ -270,21 +269,22 @@ export const EquipmentForm: FC<EquipmentForm> = ({
</div>
<div className="comp-details-edit-column comp-details-right-column"></div>
</div>
<div className="comp-details-edit-container">
<div className="equipment-form-edit-container">
<div className="comp-details-edit-column">
<CompInput
id="comp-details-edit-x-coordinate-input"
divid="comp-details-edit-x-coordinate-input-div"
type="input"
label="X Coordinate"
containerClass="comp-details-edit-input"
formClass="comp-details-label-input-pair"
inputClass="comp-form-control"
value={xCoordinate ?? ''}
error={xCoordinateErrorMsg}
step="any"
onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Longitude)}
/>
<div className="equipment-form-label-input-pair">
<label htmlFor="equipment-x-coordinate">X Coordinate</label>
<div className="edit-input">
<input
type="text"
id="equipment-x-coordinate"
className={xCoordinateErrorMsg? "comp-form-control error-border" : "comp-form-control"}
onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Longitude)}
value={xCoordinate?? ''}
maxLength={120}
/>
</div>
</div>
<div className="equipment-form-error-msg">{xCoordinateErrorMsg}</div>
{hasCoordinates &&
<button
className="button-text copy-text"
Expand All @@ -301,24 +301,25 @@ export const EquipmentForm: FC<EquipmentForm> = ({
}
</div>
<div className="comp-details-edit-column comp-details-right-column">
<CompInput
id="comp-details-edit-y-coordinate-input"
divid="comp-details-edit-y-coordinate-input-div"
type="input"
label="Y Coordinate"
containerClass="comp-details-edit-input"
formClass="comp-details-label-input-pair"
inputClass="comp-form-control"
value={yCoordinate ?? ''}
error={yCoordinateErrorMsg}
step="any"
onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Latitude)}
/>
<div className="equipment-form-label-input-pair">
<label htmlFor="equipment-y-coordinate">Y Coordinate</label>
<div className="edit-input">
<input
type="text"
id="equipment-y-coordinate"
className={yCoordinateErrorMsg? "comp-form-control error-border" : "comp-form-control"}
onChange={(evt: any) => handleCoordinateChange(evt.target.value, Coordinates.Latitude)}
value={yCoordinate ?? ''}
maxLength={120}
/>
</div>
</div>
<div className="equipment-form-error-msg">{yCoordinateErrorMsg}</div>
</div>
</div>
<div className="comp-details-edit-container">
<div className="equipment-form-edit-container">
<div className="comp-details-edit-column">
<div className="comp-details-label-input-pair" id="reported-pair-id">
<div className="equipment-form-label-input-pair" id="reported-pair-id">
<label htmlFor="equipment-officer-set-select">Set by</label>
<CompSelect
id="equipment-officer-set-select"
Expand All @@ -333,7 +334,7 @@ export const EquipmentForm: FC<EquipmentForm> = ({
</div>
</div>
<div className="comp-details-edit-column comp-details-right-column">
<div className="comp-details-label-input-pair" id="reported-pair-id">
<div className="equipment-form-label-input-pair" id="reported-pair-id">
<label htmlFor="equipment-day-set">Set date</label>
<DatePicker
id="equipment-day-set"
Expand All @@ -348,9 +349,9 @@ export const EquipmentForm: FC<EquipmentForm> = ({
</div>
</div>
{officerSet && dateSet &&
<div className="comp-details-edit-container">
<div className="equipment-form-edit-container">
<div className="comp-details-edit-column">
<div className="comp-details-label-input-pair" id="reported-pair-id">
<div className="equipment-form-label-input-pair" id="reported-pair-id">
<label htmlFor="equipment-officer-removed-select">Removed by</label>
<CompSelect
id="equipment-officer-removed-select"
Expand All @@ -365,7 +366,7 @@ export const EquipmentForm: FC<EquipmentForm> = ({
</div>
</div>
<div className="comp-details-edit-column comp-details-right-column">
<div className="comp-details-label-input-pair" id="reported-pair-id">
<div className="equipment-form-label-input-pair" id="reported-pair-id">
<label htmlFor="equipment-date-removed">Removed date</label>
<DatePicker
id="equipment-date-removed"
Expand Down
32 changes: 31 additions & 1 deletion frontend/src/assets/sass/hwcr-equipment.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,39 @@
margin-left: 191px;
}

.equipment-form-edit-container {
display: flex;
margin: 30px 0px;
}

.equipment-form-label-input-pair {
display: flex;
align-items: center;

label {
color: $gray-500;
min-width: 191px;
max-width: 191px;
}

.comp-details-input {
flex-basis: 100%;
color: $gray-900;

i.bi {
color: $gray-500;
}
}
}

.edit-input {
flex: 1;
margin: 14px 0px;
}

.equipment-form-error-msg {
color: $bc-gov-danger;
font-size: 14px;
margin: 2px 0px 2px 191px;
}

.equipment-item {
Expand Down

0 comments on commit 5917c22

Please sign in to comment.