diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx index 7e19f479d..5cec87544 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx @@ -11,12 +11,11 @@ import { selectWildlifeComplaintOutcome, } from "../../../../../store/reducers/code-table"; import { from } from "linq-to-typescript"; -import { BsTrash3, BsPencil, BsExclamationCircleFill } from "react-icons/bs"; -import { getAvatarInitials, formatDate, pad } from "../../../../../common/methods"; -import { CompTextIconButton } from "../../../../common/comp-text-icon-button"; +import { BsExclamationCircleFill } from "react-icons/bs"; +import { formatDate, pad } from "../../../../../common/methods"; import { selectOfficersByAgencyDropdown } from "../../../../../store/reducers/officer"; import { DrugItem } from "./drug-item"; -import { Card } from "react-bootstrap"; +import { Button, Card, Col, ListGroup, Row } from "react-bootstrap"; type props = { index: number; @@ -129,191 +128,134 @@ export const AnimalOutcome: FC = ({ index, data, agency, edit, remove }) className="comp-animal-card comp-outcome-report-block" border={showSectionErrors ? "danger" : "default"} > - - {showSectionErrors && ( -
- - Complete or delete section before closing the complaint. -
- )} -
-
-
-
-
Animal {pad(animalNumber.toString(), 2)}
-
-
- handleDeleteItem()} - /> - hendleEnableEditMode()} - /> -
-
+ {showSectionErrors && ( +
+ + Complete or delete section before closing the complaint. +
+ )} + + +
+

Animal {pad(animalNumber.toString(), 2)}

+
+ {animal} + {data?.sex && {animalSex}} + {data?.age && {animalAge}}
-
-
-
-
-
- -
-
- {animal} -
- {data?.sex && ( - <> -
,
-
{animalSex}
- - )} - {data?.age && ( - <> -
,
-
{animalAge}
- - )} - {data?.threatLevel && ( -
- Category level: {animalThreatLevel} -
- )} - {data?.conflictHistory && ( -
- Conflict history: {animalHistory} -
- )} -
-
-
-
+
+
+ + +
+ - {data?.tags && from(data?.tags).any() && ( -
-
- + + + {data?.threatLevel && ( + +
Category level
+
{animalThreatLevel}
+ + )} + {data?.conflictHistory && ( + +
Conflict history
+
{animalHistory}
+ + )} -
-
    - {data?.tags.map(({ id, identifier, ear }) => ( -
  • - {identifier} {ear === "L" ? leftEar?.label : rightEar?.label} side -
    • - ))} -
-
-
-
- )} + {data?.tags && from(data?.tags).any() && ( + +
Ear Tag{data?.tags.length > 1 && "s"}
+
+
    + {data?.tags.map(({ id, identifier, ear }) => ( +
  • + ID: {identifier} ({ear === "L" ? leftEar?.label : rightEar?.label} side) +
    • + ))} +
+
+ + )} + - {data?.drugs && from(data?.drugs).any() && ( -
-
- -
- {data.drugs.map((item) => { - const { officer, date } = data?.drugAuthorization || {}; - return ( - - ); - })} -
-
-
- )} + {data?.drugs && from(data?.drugs).any() && ( +
+
+
Drugs
-
-
- -
- {data?.outcome ? ( - animalOutcome - ) : ( - Outcome pending - )} -
-
-
+ +
+ {data.drugs.map((item) => { + const { officer, date } = data?.drugAuthorization || {}; + return ( + + ); + })} + +
+ )} -
-
-
- -
- {data?.officer ? ( -
- - {outcomeOfficer} - -
- ) : ( - Officer pending - )} -
-
-
-
-
- -
- {data?.date ? ( - formatDate(data?.date?.toString()) - ) : ( - Date pending - )} -
-
-
-
-
-
-
-
+
+
+
Outcome Details
+ + +
Outcome
+
{data?.outcome ? animalOutcome : "Outcome pending"}
+ + +
Officer
+
{data?.officer ? outcomeOfficer : "Officer pending"}
+ + +
Date
+
{data?.date ? formatDate(data?.date?.toString()) : "Date pending"}
+ + +
); diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx index 2be24cd3c..637471a05 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx @@ -2,8 +2,7 @@ import { FC, useRef, useState } from "react"; import { Button, Card, Col, Row } from "react-bootstrap"; import { ValidationDatePicker } from "../../../../../common/validation-date-picker"; import { CompSelect } from "../../../../common/comp-select"; -import { BsExclamationCircleFill, BsPlusCircle } from "react-icons/bs"; -import { pad } from "../../../../../common/methods"; +import { BsExclamationCircleFill } from "react-icons/bs"; import { useAppSelector } from "../../../../../hooks/hooks"; import { selectAgeDropdown, @@ -69,9 +68,6 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer const isInEdit = useAppSelector((state) => state.cases.isInEdit); const showSectionErrors = isInEdit.showSectionErrors; - //-- misc - const [animalNumber] = useState(index); - //-- error handling const [speciesError, setSpeciesError] = useState(""); const [officerError, setOfficerError] = useState(""); @@ -157,7 +153,6 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer update={updateEarTag} remove={removeEarTag} ref={(el) => (earTagRefs.current[idx] = el)} - // ref={(el) => earTagRefs.current.push(el)} /> ); }); @@ -389,6 +384,12 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer className="comp-animal-card comp-outcome-report-block" border={showSectionErrors ? "danger" : "default"} > + +
+

Add animal

+
+ + {showSectionErrors && (
@@ -396,238 +397,335 @@ export const CreateAnimalOutcome: FC = ({ index, assignedOfficer: officer Save section before closing the complaint.
)} -
-
-
-
-
-
Animal {pad(animalNumber.toString(), 2)}
-
+ +
+
+ + Animal Information + + +
+ +
+
- -
Animal information
- -
- - - - - - - - { - updateModel("sex", evt?.value); - }} - /> - - - - { - updateModel("age", evt?.value); - }} - /> - - - - { - updateModel("threatLevel", evt?.value); - }} - /> - - - - { - updateModel("conflictHistory", evt?.value); - }} - /> - - +
+ +
+ {" "} + { + updateModel("sex", evt?.value); + }} + /> +
+
+
+ +
+ { + updateModel("age", evt?.value); + }} + /> +
+
+
+ + { + updateModel("threatLevel", evt?.value); + }} + /> +
+
+ + { + updateModel("conflictHistory", evt?.value); + }} + />
+ + +
+ +
+ Ear tags {renderEarTags()} {data.tags.length < 2 && ( )} +
+
+ Drugs {renderDrugsUsed()} + +
-
+ - Outcome -
-
- - + Outcome Details + + +
+
+ +
{ updateModel("outcome", evt?.value); }} /> - - -
- - { - handleOfficerChange(evt); - }} - value={getValue("officer")} - errorMessage={officerError} - /> -
- - - -
- - { - handleOutcomeDateChange(input); - }} - selectedDate={data?.date} - classNamePrefix="comp-details-edit-calendar-input" - className={"animal-outcome-details-input"} - placeholder={"Select"} - errMsg={outcomeDateError} - /> -
- - -
-
- -
+
- Save - + +
+ { + handleOfficerChange(evt); + }} + value={getValue("officer")} + errorMessage={officerError} + /> +
+
+
+ +
+ { + handleOutcomeDateChange(input); + }} + selectedDate={data?.date} + classNamePrefix="comp-details-edit-calendar-input" + className={"animal-outcome-details-input"} + placeholder={"Select"} + errMsg={outcomeDateError} + /> +
+
+ + +
+ +
diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-authorized-by.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-authorized-by.tsx index 480b299ae..562c06990 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-authorized-by.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-authorized-by.tsx @@ -1,6 +1,5 @@ import { forwardRef, useImperativeHandle, useState } from "react"; import { DrugAuthorizationV2 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-authorization"; -import { Col, Row } from "react-bootstrap"; import { CompSelect } from "../../../../common/comp-select"; import { useAppSelector } from "../../../../../hooks/hooks"; import { selectOfficersByAgencyDropdown } from "../../../../../store/reducers/officer"; @@ -87,19 +86,20 @@ export const DrugAuthorizedBy = forwardRef((props, ref) => { }; return ( -
- - -
+ Drugs authorized by +
+
+ +
((props, ref) => { errorMessage={officerError} />
- - - -
+
+ +
((props, ref) => { errMsg={authorizationDateError} />
- - - - -
+
+
+ ); }); DrugAuthorizedBy.displayName = "DrugAuthorizedBy"; diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx index e986b6d18..5ed55bd74 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx @@ -1,8 +1,8 @@ import { FC, useEffect, useState } from "react"; -import { Row, Col } from "react-bootstrap"; +import { Row, Col, ListGroup } from "react-bootstrap"; import { useAppSelector } from "../../../../../hooks/hooks"; import { selectDrugs, selectDrugUseMethods, selectRemainingDrugUse } from "../../../../../store/reducers/code-table"; -import { formatDate, getAvatarInitials } from "../../../../../common/methods"; +import { formatDate } from "../../../../../common/methods"; import { selectOfficersByAgencyDropdown } from "../../../../../store/reducers/officer"; import { from } from "linq-to-typescript"; import { selectComplaint } from "../../../../../store/reducers/complaints"; @@ -82,64 +82,76 @@ export const DrugItem: FC = ({ }; return ( -
- - - Vial #{vial} - - - {drugUsed} - - - - - Amount used {amountUsed}ml - - - Injection method {injectedMethod} - - - Adverse reactions {reactions} - - - - - Fate of remaining drug in vial {remaining} + +
+ Vial #{vial} - {drugUsed} +
+ + + +
Injection method
+
{injectedMethod}
- - {remainingUse === "DISC" && ( - <> - Amount discarded {amountDiscarded} {amountDiscarded ? "ml" : ""} - - )} + +
Amount used
+
{amountUsed}ml
- - {remainingUse === "DISC" && ( - <> - Discard method {discardMethod} - - )} + +
Fate of remaining drug in vial
+
{remaining}
- - - - Officer -
- + +
Amount discarded
+
+ {amountDiscarded} {amountDiscarded ? "ml" : ""} +
+ + - {assignedOfficer()} - -
+
Discard method
+
{discardMethod}
+ + + )} + +
Adverse Reactions
+
{reactions ? <>{reactions} : "None"}
+ + +
Officer
+
{assignedOfficer()}
- - Date {formatDate(date?.toString())} + +
Date
+
{formatDate(date?.toString())}
 -
+ ); }; diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-used.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-used.tsx index 32321028b..ea0a4a6cc 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-used.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-used.tsx @@ -1,10 +1,8 @@ import { forwardRef, useImperativeHandle, useState } from "react"; import { useAppSelector } from "../../../../../hooks/hooks"; -import { Col, Row } from "react-bootstrap"; +import { Button, Card } from "react-bootstrap"; import { CompInput } from "../../../../common/comp-input"; import { CompSelect } from "../../../../common/comp-select"; -import { CompIconButton } from "../../../../common/comp-icon-button"; -import { BsFillXCircleFill, BsXCircle } from "react-icons/bs"; import { selectDrugs, selectDrugUseMethods, selectRemainingDrugUse } from "../../../../../store/reducers/code-table"; import Option from "../../../../../types/app/option"; import { isPositiveNum } from "../../../../../common/methods"; @@ -217,215 +215,185 @@ export const DrugUsed = forwardRef((props, ref) => { }; return ( -
- - - - { - const { - target: { value }, - } = evt; - handleVialNumberChange(value); - }} - /> - - - - { - handleDrugNameChange(evt); - }} - value={getValue("drug")} - /> - - - - { - const { - target: { value }, - } = evt; - handleAmountUsedChange(value ?? ""); - }} - /> - - - - { - handleInjectionMethodChange(evt); - }} - value={getValue("injection-method")} - /> - - - - { - const { - target: { value }, - } = evt; - updateModel("reactions", value); - }} - /> - - - + +
+
{drug ? <>{drug} : <>Add Drug}
+
+
+ +
+ + +
+ +
+ { + const { + target: { value }, + } = evt; + handleVialNumberChange(value); + }} /> - +
+
+ +
+ { + handleDrugNameChange(evt); + }} + value={getValue("drug")} /> - - - - - - - { - handleRemainingUsed(evt?.value ?? ""); - }} - value={getValue("remaining")} - /> - - - {showDiscarded && ( - <> - - { - const { - target: { value }, - } = evt; - handleAmountDiscardedChange(value ?? ""); - }} - /> - - )} - - - {showDiscarded && ( - <> - - { - const { - target: { value }, - } = evt; - handleDiscardMethodChange(value ?? ""); - }} - /> - - )} - - - - -
-
+
+
+ +
+ +
+ { + handleInjectionMethodChange(evt); + }} + value={getValue("injection-method")} + /> +
+
+
+ +
+ { + const { + target: { value }, + } = evt; + handleAmountUsedChange(value ?? ""); + }} + /> +
+
+ +
+ +
+ { + handleRemainingUsed(evt?.value ?? ""); + }} + value={getValue("remaining")} + /> +
+
+ + {showDiscarded && ( + <> +
+ +
+ { + const { + target: { value }, + } = evt; + handleAmountDiscardedChange(value ?? ""); + }} + /> +
+
+
+ +
+ { + const { + target: { value }, + } = evt; + handleDiscardMethodChange(value ?? ""); + }} + /> +
+
+ + )} + +
+ +
+ { + const { + target: { value }, + } = evt; + updateModel("reactions", value); + }} + /> +
+
+ + ); }); diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/ear-tag.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/ear-tag.tsx index 7fe7c3a3a..bf19f6919 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/ear-tag.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/ear-tag.tsx @@ -1,7 +1,5 @@ import { forwardRef, useImperativeHandle, useState } from "react"; -import { Row, Col } from "react-bootstrap"; -import { BsXCircle, BsFillXCircleFill } from "react-icons/bs"; -import { CompIconButton } from "../../../../common/comp-icon-button"; +import { Button } from "react-bootstrap"; import { CompInput } from "../../../../common/comp-input"; import { CompSelect } from "../../../../common/comp-select"; import { useAppSelector } from "../../../../../hooks/hooks"; @@ -49,70 +47,53 @@ export const EarTag = forwardRef<{ isValid: Function }, props>((props, ref) => { }); return ( -
- - - - { - const { - target: { value }, - } = evt; +
+
+ + { + const { + target: { value }, + } = evt; - if (value.length <= 6) { - updateModel("identifier", value); - } - }} - /> - - - - { - updateModel("ear", evt?.value); - }} - value={selectedEar} - /> - - - remove(id)}> - - - - - - - + if (value.length <= 6) { + updateModel("identifier", value); + } + }} + /> +
+
+ + { + updateModel("ear", evt?.value); + }} + value={selectedEar} + /> +
+ +
); }); diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx index 760df1490..6f4acb00f 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx @@ -10,11 +10,10 @@ import { selectWildlifeComplaintOutcome, } from "../../../../../store/reducers/code-table"; import { selectOfficersByAgencyDropdown } from "../../../../../store/reducers/officer"; -import { Button, Card, Col, Row } from "react-bootstrap"; +import { Button, Card, ListGroup } from "react-bootstrap"; import { CompSelect } from "../../../../common/comp-select"; -import { BsExclamationCircleFill, BsPlusCircle } from "react-icons/bs"; +import { BsExclamationCircleFill } from "react-icons/bs"; import { ValidationDatePicker } from "../../../../../common/validation-date-picker"; -import { pad } from "../../../../../common/methods"; import Option from "../../../../../types/app/option"; import { AnimalTagV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-tag"; import { DrugUsedV2 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used"; @@ -66,9 +65,6 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of const drugRefs = useRef(Array(0)); const authorizationRef = useRef({ isValid: Function }); - //-- misc - const [animalNumber] = useState(index); - //-- error handling const [speciesError, setSpeciesError] = useState(""); const [officerError, setOfficerError] = useState(""); @@ -196,21 +192,23 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of return ( <> - {from(drugs) - .orderBy((item) => item.order) - .toArray() - .map((item, idx) => { - const { id } = item; - return ( - (drugRefs.current[idx] = el)} - /> - ); - })} + + {from(drugs) + .orderBy((item) => item.order) + .toArray() + .map((item, idx) => { + const { id } = item; + return ( + (drugRefs.current[idx] = el)} + /> + ); + })} + = ({ id, index, outcome, assignedOfficer: of className="comp-animal-card comp-outcome-report-block" border={showSectionErrors ? "danger" : "default"} > + +
+

Edit Animal

+
+ + {showSectionErrors && (
@@ -388,245 +392,211 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of Save section before closing the complaint.
)} -
-
-
-
-
-
Animal {pad(animalNumber.toString(), 2)}
-
-
-
-
Animal information
- -
- - - - - - - - { - updateModel("sex", evt?.value); - }} - defaultOption={getValue("sex")} - /> - - - - { - updateModel("age", evt?.value); - }} - defaultOption={getValue("age")} - /> - - - - { - updateModel("threatLevel", evt?.value); - }} - defaultOption={getValue("threatLevel")} - /> - - - - { - updateModel("conflictHistory", evt?.value); - }} - defaultOption={getValue("conflictHistory")} - /> - - +
+ {/* Animal Information */} +
+ + Animal Information + +
+ + + +
+
+ + { + updateModel("sex", evt?.value); + }} + defaultOption={getValue("sex")} + /> +
+
+ + { + updateModel("age", evt?.value); + }} + defaultOption={getValue("age")} + /> +
+
+ + { + updateModel("threatLevel", evt?.value); + }} + defaultOption={getValue("threatLevel")} + /> +
+
+ + { + updateModel("conflictHistory", evt?.value); + }} + defaultOption={getValue("conflictHistory")} + />
+
+ {/* Ear Tags */} +
+ Ear tags {renderEarTags()} {data.tags.length < 2 && ( )} +
+ {/* Drugs */} +
+ Drugs {renderDrugsUsed()} - +
+ +
+ Outcome +
+ +
+ { + updateModel("outcome", evt?.value); + }} + defaultOption={getValue("outcome")} + /> +
+
- Outcome -
-
- - - { - updateModel("outcome", evt?.value); - }} - defaultOption={getValue("outcome")} - /> - - -
- - { - handleOfficerChange(evt); - }} - defaultOption={getValue("officer")} - errorMessage={officerError} - /> -
- - - -
- - { - handleOutcomeDateChange(input); - }} - selectedDate={data?.date} - classNamePrefix="comp-details-edit-calendar-input" - className={"animal-outcome-details-input"} - placeholder={"Select"} - errMsg={outcomeDateError} - /> -
- - -
-
- -
+
+ + { + handleOutcomeDateChange(input); + }} + selectedDate={data?.date} + placeholder={"Select"} + errMsg={outcomeDateError} + />
+
+
+ +
diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss index 926f879d2..c20a167d9 100644 --- a/frontend/src/assets/sass/complaint.scss +++ b/frontend/src/assets/sass/complaint.scss @@ -439,7 +439,11 @@ } h4 { - font-size: 1.125rem; + font-size: 1.25rem; + } + + h5 { + font-size: 1rem; } section + section { @@ -467,7 +471,7 @@ dl { display: flex; flex-direction: column; - row-gap: 16px; + row-gap: 12px; margin-bottom: 0; > div { @@ -477,7 +481,7 @@ } + dl { - margin-top: 16px; + margin-top: 8px; } } @@ -656,8 +660,12 @@ color: $gray-500; } + .comp-select__control { + min-width: 221px; + } + + .comp-details-form-row { - margin-top: 24px; + margin-top: 16px; } } diff --git a/frontend/src/assets/sass/hwcr-animal-outcome.scss b/frontend/src/assets/sass/hwcr-animal-outcome.scss index d38e349fe..4cf1f1de6 100644 --- a/frontend/src/assets/sass/hwcr-animal-outcome.scss +++ b/frontend/src/assets/sass/hwcr-animal-outcome.scss @@ -1,271 +1,161 @@ .comp-animal-card { - margin-bottom: 24px; -} - -.comp-animal-outcome-report-block { - margin-left: 24px; - margin-right: 24px; - - h6 { - padding-top: 0px; - font-weight: 700; - margin-bottom: 0px; - } - - label { - color: $gray-500; - } + margin-bottom: 16px; - & .comp-details-label-input-pair { - min-height: inherit; + .comp-card-header { + padding-top: 16px; } - .comp-animal-outcome-report { - margin-top: 24px; - margin-bottom: 24px; - border: 1px solid $gray-300; - border-radius: 3px; - padding: 24px; - } + dl { + flex-direction: row; + flex-wrap: wrap; - .comp-animal-outcome-report-inner-spacing { - padding: 18px 0px 18px 0px; + > div { + flex-direction: column; + gap: 0; + } } - .comp-animal-outcome-report-button { - margin-top: 24px; - margin-bottom: 24px; + dl:empty { + display: none; } +} - .comp-animal-outcome-report-button span { - margin-right: 8px; - } +// EAR TAGS +.comp-ear-tag { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 16px; - .comp-animal-outcome-report-button button svg { - font-size: 18px; - vertical-align: text-top; - margin-top: 3px; + + .comp-ear-tag { + margin-top: 16px; } - .comp-animal-outcome-report-actions { - display: flex; - justify-content: flex-end; - align-items: flex-start; - gap: 8px; - flex: 1 0 0; + label { + color: $gray-500; } - .comp-animal-outcome-report-actions button { - border-radius: 4px; - font-size: 14px; + .btn { + margin-top: 24px; + min-height: 38px; } - .comp-animal-outcome-report-actions button span { - padding-right: 8px; + + .btn { + margin-top: 16px; } +} - .comp-animal-outcome-report-actions button svg { - font-size: 16px; - vertical-align: text-top; - margin-top: 1px; - } +.comp-ear-tag-form-item { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; +} - .comp-animal-outcome-cancel { - color: $bc-gov-primary-400; - border-color: $bc-gov-primary-400; - background-color: $white; +@include media-breakpoint-up(lg) { + .comp-ear-tag { + .btn { + margin-top: 0; + } } - .comp-animal-outcome-cancel:hover { - background-color: $bc-gov-primary-400; - color: $white; - } + .comp-ear-tag-form-item { + flex-direction: row; + gap: 8px; - .comp-animal-outcome-save { - color: $white; - background-color: $bc-gov-primary-400; + label { + margin-top: 6px; + } } +} - .comp-animal-outcome-save:hover { - background-color: $white; - color: $bc-gov-primary-400; - } +.comp-form-control.comp-ear-tag-id-input { + width: 120px; +} - .flex-container { - display: flex; - } +.comp-ear-tag-side-input { + min-width: 120px; +} - .flex-child:first-child { - margin-right: 20px; - } +.comp-ear-tag .comp-ear-tag-actions { + display: flex; + align-items: flex-end; - .comp-animal-outcome-add-button { - text-decoration: none; - margin-bottom: 24px; - padding: 0px; - border-width: 0px; - color: $bc-gov-primary; - display: block; + .btn { + min-height: 38px; } +} - .comp-animal-outcome { - margin-top: 24px; - margin-bottom: 24px; - border: 1px solid $gray-300; - border-radius: 3px; - padding: 24px; - - .animal-item-edit { - font-size: 14px; - - :hover { - text-decoration: underline; - } - span { - font-size: inherit; - padding-right: 0px; - } - - svg { - font-size: inherit; - } - } - - .animal-item-delete { - font-size: 14px; - padding-right: 10px; - :hover { - text-decoration: underline; - } - span { - font-size: inherit; - margin-right: 4px; - padding-right: 0px; - } - - svg { - font-size: 16px; - } - } - - .comp-ear-tag-list { - list-style: none; - padding-inline-start: 0px; - padding-left: 0px; - } - - .comp-animal-outcome-fill-space { - width: 100%; - } - - .comp-drug-item { - margin-bottom: 24px; - border: 1px solid $gray-300; - border-radius: 3px; - padding: 24px; - - .comp-orange-avatar-sm::before { - margin-left: 25px; - } - - .row { - margin-top: 5px; - margin-bottom: 5px; - } +// DRUG LIST AND FORM +.comp-drug-list { + list-style-type: none; + padding-left: 0 !important; +} - .animal-outcome-item-edit { - font-size: 14px; +.comp-drug-item { + border-radius: 0; + border-bottom: none; + border-left: none; + border-right: none; - span { - margin-right: 7px; - } - } - } + .card-body { + padding-left: 0; + padding-right: 0; } - .comp-details-inner-content-label { - &.top { - align-self: flex-start; - } + dl { + flex-direction: row; + flex-wrap: wrap; + row-gap: 8px; - &.center { - align-self: center; + > div { + flex-direction: column; + gap: 0; + width: 50%; } - } - - .comp-outcome-drug-label { - margin-right: 10px; - min-width: 10px !important; - max-width: inherit; - } - .comp-outcome-remove-botton { - color: $gray-500; - } - - .comp-outcome-remove-botton-hover { - color: $black; - } - - #comp-outcome-report-animal-information-heading { - margin-bottom: -12px; - } - - #comp-outcome-report-outcome-heading { - margin-bottom: -22px; + dd { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } - .comp-outcome-animal-seperator { - clear: both; - - margin-bottom: -20px; - margin-top: 16px; + + .comp-drug-item { + border-top-left-radius: 0; + border-top-right-radius: 0; } } -.animal-outcome-label-input-pair { +.comp-drug-form { display: flex; - min-height: 70px; - margin-top: 24px; + flex-direction: column; + border-radius: 0; + border-left: none; + border-right: none; - label { - color: $gray-500; - min-width: 191px; - max-width: 191px; - margin-top: 6px; + .card-body { + padding-right: 0; + padding-left: 0; } - .animal-outcome-details-input { - flex-basis: 100%; - color: $gray-900; - - i.bi { - color: $gray-500; - } + .comp-add-drug-btn { + order: 2; + align-self: flex-start; } -} - -.animal-drug-auth-label-input-pair { - display: flex; - min-height: 70px; - label { - color: $gray-500; - min-width: 191px; - max-width: 191px; - margin-top: 6px; + + .comp-drug-form { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; } - .animal-drug-auth-details-input { - flex-basis: 100%; - color: $gray-900; - - i.bi { - color: $gray-500; - } + &:last-of-type { + margin-bottom: 16px; } } -.mt-delete-button { - margin-top: 36px; +.comp-animal-drugs-authorized-by { + order: 3; + margin-top: 32px; } diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss index 3262a1f21..4f9bd1e33 100644 --- a/frontend/src/assets/sass/layout.scss +++ b/frontend/src/assets/sass/layout.scss @@ -650,8 +650,47 @@ p { } // CARD -.card-body { - padding: 24px; +.comp-card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; + padding-bottom: 0; + background: transparent; + border: none; + + h4, + h5 { + margin: 0; + font-weight: 700; + } +} + +.comp-card-header-title { + .badge { + margin-top: 2px; + } +} + +.comp-card-header-metadata { + display: flex; + flex-direction: row; + align-items: center; + position: relative; + + span + span { + &::before { + content: "•"; + display: inline-block; + width: 20px; + text-align: center; + } + } +} + +.comp-card-header-actions { + display: flex; + gap: 8px; } // DROPDOWN MENU @@ -660,6 +699,7 @@ p { display: none; } } + .dropdown-item { i { margin-right: 8px; diff --git a/frontend/src/assets/sass/outcome-report.scss b/frontend/src/assets/sass/outcome-report.scss index 29628919e..d10cf77f7 100644 --- a/frontend/src/assets/sass/outcome-report.scss +++ b/frontend/src/assets/sass/outcome-report.scss @@ -15,14 +15,6 @@ margin-bottom: 8px; } - label { - color: $gray-500; - } - - .label-margin-bottom { - margin-bottom: 8px; - } - .comp-outcome-spacing { margin-bottom: -22px; } @@ -463,9 +455,26 @@ .comp-equipment-item-header-actions { display: flex; gap: 8px; - margin: -4px 0; } .comp-outcome-supporting-notes { margin-bottom: 24px; } + +// OUTCOME REPORT - GENERIC +.comp-outcome-report-form { + fieldset + fieldset { + margin-top: 32px; + padding-top: 0; + border-top: none; + } + + legend { + font-size: 1rem; + font-weight: 700; + } + + .row + .row { + margin-top: 16px; + } +}