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

Fix spacing in user list, remove scrollbar on large screens, and adjust schedule appointment button #9864

Merged
merged 7 commits into from
Jan 11, 2025
Merged

Fix spacing in user list, remove scrollbar on large screens, and adjust schedule appointment button #9864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d699dea
User list spacing and files tab
Rishith25 Jan 9, 2025
f6345ab
i18n check
Rishith25 Jan 9, 2025
c3e57b7
i18n added
Rishith25 Jan 9, 2025
96acf9c
Merge branch 'develop' into user-list-#9862
Rishith25 Jan 9, 2025
6fa1849
Merge branch 'develop' into user-list-#9862
Rishith25 Jan 10, 2025
c26a9d5
appointment card ui fix
Rishith25 Jan 10, 2025
cd0b680
revert changes
Rishith25 Jan 10, 2025
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
9 changes: 6 additions & 3 deletions src/components/Patient/PatientDetailsTab/Appointments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,15 @@ export const Appointments = (props: PatientProps) => {

return (
<div className="mt-4 px-3 md:px-0">
<div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-semibold leading-tight">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 space-y-2 sm:space-y-0">
<h2 className="text-2xl font-semibold leading-tight text-center sm:text-left">
{t("appointments")}
</h2>
<Button variant="outline_primary" asChild>
<Link href={`/facility/${facilityId}/patient/${id}/book-appointment`}>
<Link
href={`/facility/${facilityId}/patient/${id}/book-appointment`}
className="flex items-center justify-center w-full sm:w-auto"
>
<CareIcon icon="l-plus" className="mr-2" />
{t("schedule_appointment")}
</Link>
Expand Down
23 changes: 15 additions & 8 deletions src/components/Users/UserListAndCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ import useWindowDimensions from "@/hooks/useWindowDimensions";

import { USER_TYPE_OPTIONS } from "@/common/constants";

import { formatName, isUserOnline, relativeTime } from "@/Utils/utils";
import {
formatName,
formatPhoneNumber,
isUserOnline,
relativeTime,
} from "@/Utils/utils";
import { UserBase } from "@/types/user/user";

export const GetUserTypes = () => {
Expand Down Expand Up @@ -191,13 +196,12 @@ const UserListHeader = ({
<th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left">
{t("name")}
</th>
<th className="w-32 px-4 py-3 text-left">{t("status")}</th>
<th className="px-4 py-3 text-left">{t("role")}</th>
<th className="px-4 py-3 text-left">{t("home_facility")}</th>
<th className="w-32 px-10 py-3 text-left">{t("status")}</th>
<th className="px-10 py-3 text-left">{t("role")}</th>
<th className="px-4 py-3 text-left">{t("contact_number")}</th>
{showDistrictColumn && (
<th className="px-4 py-3 text-left">{t("district")}</th>
)}
<th className="px-4 py-3"></th>
</tr>
</thead>
);
Expand All @@ -210,7 +214,7 @@ const UserListRow = ({ user }: { user: UserBase }) => {
id={`usr_${user.id}`}
className="hover:bg-gray-50"
>
<td className="sticky left-0 z-10 bg-white px-4 py-4">
<td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
<div className="flex items-center gap-3">
<Avatar
// TO do: adjust for facility users
Expand All @@ -233,12 +237,15 @@ const UserListRow = ({ user }: { user: UserBase }) => {
</div>
</div>
</td>
<td className="flex-0 py-4">
<td className="flex-0 px-6 py-4">
<UserStatusIndicator user={user} addPadding />
</td>
<td id="role" className="px-4 py-4 text-sm">
<td id="role" className="px-10 py-4 text-sm">
{user.user_type}
</td>
<td id="contact" className="px-4 py-4 text-sm whitespace-nowrap">
{formatPhoneNumber(user.phone_number)}
</td>
Jacobjeevan marked this conversation as resolved.
Show resolved Hide resolved
<td className="px-4 py-4">{GetDetailsButton(user.username)}</td>
</tr>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Encounters/tabs/EncounterFilesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ export const EncounterFilesTab = (props: EncounterTabProps) => {

const RenderTable = () => {
return (
<Table className="border-separate border-spacing-y-3 mx-2 min-w-[800px] lg:max-w-[calc(100%-12px)]">
<Table className="border-separate border-spacing-y-3 mx-2 min-w-[800px] lg:max-w-[calc(100%-16px)]">
<TableHeader>
<TableRow className="shadow rounded overflow-hidden">
<TableHead className="w-[30%] bg-white rounded-l">
Expand Down
Loading