Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rearranged facility home layout #7315

Merged
merged 13 commits into from
Apr 24, 2024
Merged

Rearranged facility home layout #7315

Changes from 3 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
25ee0e6
rearranged facility home layout
kshitijv256 Feb 29, 2024
b999a0e
Merge branch 'develop' into facility_ui
nihal467 Mar 4, 2024
9c3309d
Merge branch 'coronasafe:develop' into facility_ui
kshitijv256 Mar 20, 2024
801aa41
fixed side margins
kshitijv256 Mar 20, 2024
840d3b8
changed to justify-between
kshitijv256 Mar 21, 2024
4fbb75b
changed to div height
kshitijv256 Mar 22, 2024
f1a91b4
cover image rounded
kshitijv256 Mar 23, 2024
ebdf907
Merge branch 'develop' into facility_ui
kshitijv256 Apr 2, 2024
f2c88a2
Merge branch 'develop' into facility_ui
nihal467 Apr 16, 2024
66769f9
Merge branch 'develop' into facility_ui
kshitijv256 Apr 19, 2024
715557e
changed transition to transition-opacity
kshitijv256 Apr 19, 2024
e276e26
Merge branch 'develop' into facility_ui
kshitijv256 Apr 22, 2024
21345d4
Merge branch 'develop' into facility_ui
khavinshankar Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 56 additions & 53 deletions src/Components/Facility/FacilityHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,10 +186,10 @@ export const FacilityHome = (props: any) => {
>
<div className="justify-between gap-2 lg:flex">
<div className="flex-col justify-between md:flex">
<div className="flex flex-1 flex-col gap-10">
<div className="flex items-center gap-4">
<div className="flex flex-1 flex-col">
<div className="flex items-start gap-4">
<div
className={`group relative hidden h-[88px] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:flex ${
className={`group relative hidden h-[20rem] w-[88px] text-clip rounded transition-all duration-200 ease-in-out md:flex lg:h-[20rem] lg:w-[20rem] ${
hasPermissionToEditCoverImage && "cursor-pointer"
}`}
onClick={() =>
Expand All @@ -199,7 +199,7 @@ export const FacilityHome = (props: any) => {
{hasCoverImage ? (
<CoverImage />
) : (
<div className="flex h-[88px] w-full items-center justify-center bg-gray-200 font-medium text-gray-700">
<div className="flex h-[20rem] w-[88px] items-center justify-center bg-gray-200 font-medium text-gray-700 lg:h-[20rem] lg:w-[20rem]">
<svg
className="h-8 w-8 fill-current text-gray-500"
viewBox="0 0 40 32"
Expand All @@ -211,21 +211,21 @@ export const FacilityHome = (props: any) => {
)}
{editCoverImageTooltip}
</div>
<div id="facility-name">
<h1 className="text-3xl font-bold">{facilityData?.name}</h1>
{facilityData?.modified_date && (
<RecordMeta
className="mt-1 text-sm text-gray-700"
prefix={t("updated")}
time={facilityData?.modified_date}
/>
)}
</div>
</div>
<div className="flex flex-1 items-center">
<div className="mb-6 grid w-full gap-4 sm:grid-cols-2 md:mb-0 lg:grid-cols-2">
<div className="mb-6 grid gap-4 md:mb-0">
<div className="flex-col justify-between md:flex lg:flex-1 ">
<div className="mb-10" id="address-details-view">
<div className="mb-4" id="facility-name">
<h1 className="text-3xl font-bold">
{facilityData?.name}
</h1>
{facilityData?.modified_date && (
<RecordMeta
className="mt-1 text-sm text-gray-700"
prefix={t("updated")}
time={facilityData?.modified_date}
/>
)}
</div>
<div className="mb-4" id="address-details-view">
<h1 className="text-base font-semibold text-[#B9B9B9]">
Address
</h1>
Expand All @@ -234,47 +234,50 @@ export const FacilityHome = (props: any) => {
</p>
</div>

<div className="flex items-center gap-3">
<div id="phone-number-view">
<div className="flex-col md:flex lg:flex-1">
<div className="mb-4">
<h1 className="text-base font-semibold text-[#B9B9B9]">
Phone Number
Local Body
</h1>
<ContactLink tel={String(facilityData?.phone_number)} />
</div>
</div>
</div>
<div className="flex-col md:flex lg:flex-1">
<div className="mb-10">
<h1 className="text-base font-semibold text-[#B9B9B9]">
Local Body
</h1>
<p className="w-2/3 text-base font-medium md:w-full">
{facilityData?.local_body_object?.name}
</p>
</div>
<div className="flex flex-col flex-wrap gap-10 md:flex-row">
<div>
<h1 className="text-base font-semibold text-[#B9B9B9]">
Ward
</h1>
<p className="text-base font-medium">
{facilityData?.ward_object?.number +
", " +
facilityData?.ward_object?.name}
<p className="w-2/3 text-base font-medium md:w-full">
{facilityData?.local_body_object?.name}
</p>
</div>
<div>
<h1 className="text-base font-semibold text-[#B9B9B9]">
District
</h1>
<p className="text-base font-medium">
{facilityData?.district_object?.name}
</p>
<div className="mb-4 flex flex-col flex-wrap gap-4 md:flex-row">
<div>
<h1 className="text-base font-semibold text-[#B9B9B9]">
Ward
</h1>
<p className="text-base font-medium">
{facilityData?.ward_object?.number +
", " +
facilityData?.ward_object?.name}
</p>
</div>
<div>
<h1 className="text-base font-semibold text-[#B9B9B9]">
District
</h1>
<p className="text-base font-medium">
{facilityData?.district_object?.name}
</p>
</div>
</div>
<div className="flex items-center gap-3">
<div id="phone-number-view">
<h1 className="text-base font-semibold text-[#B9B9B9]">
Phone Number
</h1>
<ContactLink
tel={String(facilityData?.phone_number)}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-1 items-center"></div>
</div>
<div className="mt-10 flex items-center gap-3">
<div>
Expand Down Expand Up @@ -310,7 +313,7 @@ export const FacilityHome = (props: any) => {
</div>
</div>
</div>
<div className="mt-4 flex flex-col justify-between">
<div className="mt-4 flex flex-col justify-start">
<div className="w-full md:w-auto">
<DropdownMenu
id="manage-facility-dropdown"
Expand Down Expand Up @@ -445,6 +448,8 @@ export const FacilityHome = (props: any) => {
</div>
</div>
</div>
<FacilityBedCapacity facilityId={facilityId} />
<FacilityDoctorList facilityId={facilityId} />

<div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
<h1 className="mb-6 text-xl font-bold">Oxygen Information</h1>
Expand Down Expand Up @@ -480,8 +485,6 @@ export const FacilityHome = (props: any) => {
</div>
</div>

<FacilityBedCapacity facilityId={facilityId} />
<FacilityDoctorList facilityId={facilityId} />
<FacilityHomeTriage
facilityId={facilityId}
NonReadOnlyUsers={NonReadOnlyUsers}
Expand Down
Loading