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

Dev joseph 234 heights widths #241

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Dev joseph 234 heights widths #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6ea5dd
fix the issues with height and width
josephshenq Nov 17, 2024
32e53b8
additional fix for onboarding page
josephshenq Nov 17, 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
2 changes: 1 addition & 1 deletion web/components/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function SideBar(props: any) {

return (
// TODO fix current tab highlight
<div className="fixed top-0 sm:top-auto sm:static h-full w-2/3 sm:w-[18%] bg-black text-white z-50 sm:z-0">
<div className="fixed top-0 sm:top-auto sm:static h-auto min-h-screen w-2/3 sm:w-[18%] bg-black text-white z-50 sm:z-0">
<div className="w-full flex-col justify-start z-50 sm:z-0">
{/* TODO populate name */}
<NavBarLogo isAdmin={props.isAdmin} caregiverName="Jane Care" />
Expand Down
2 changes: 1 addition & 1 deletion web/components/logos/HalfScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function HalfScreen({
}: Props) {
return (
<div
className={`${hiddenOnMobile ? "hidden sm:flex" : "flex"} flex-col bg-custom-background w-full h-[20%] justify-center items-center sm:w-1/2 sm:h-full`}
className={`${hiddenOnMobile ? "hidden sm:flex" : "flex"} flex-col bg-custom-background w-full h-[20%] justify-center items-center sm:w-1/2 sm:h-auto sm:min-h-screen`}
>
{backButtonFunction && (
<div className="flex sm:hidden flex-start w-[90%] mt-2 -mb-5">
Expand Down
2 changes: 1 addition & 1 deletion web/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function MyApp({ Component, pageProps }: AppProps) {

return (
<UserProvider>
<div className="flex flex-col sm:flex-row flex-no-wrap h-screen">
<div className="flex flex-col sm:flex-row flex-no-wrap">
{!hideNavBar &&
(isMobile ? (
<MobileNavBar isAdmin={isAdmin} items={SideBarItems} />
Expand Down
8 changes: 4 additions & 4 deletions web/pages/admin/caregivers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ export default function GenCaregiversTab() {
const [paginationSize, setPaginationSize] = useState(5);

useEffect(() => {
const tableHeight = window.innerHeight - (44 + 16 * 2) - (24 * 2) - (20 * 2) - (42) - (32) - 48.5;
// Header and its margin, margin of PaginatedTable, gaps within PaginatedTable, SearchBar height, Pagination height, Table Header row height
const tableHeight = window.innerHeight - (44 + 16 * 2) - (24 * 2) - (20 * 2) - (42) - (32) - 48.5 - 6;
// Header and its margin, margin of PaginatedTable, gaps within PaginatedTable, SearchBar height, Pagination height, Table Header row height, Table scroll bar height
// TODO check if better way than hardcoding
const entryHeight = 65;
const entryHeight = 71;
const numEntries = Math.max(Math.floor(tableHeight / entryHeight), 3);
setPaginationSize(numEntries);
})
Expand Down Expand Up @@ -93,7 +93,7 @@ export default function GenCaregiversTab() {
};

return (
<div>
<div className="h-auto">
<div className="flex flex-col border-t">
<div className="flex flex-row justify-between mx-9 my-4">
<div className="flex flex-row gap-6 items-center">
Expand Down
2 changes: 1 addition & 1 deletion web/pages/caregiver/book/[babyId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function BabyBook({
{showBabyModal ? (
babyPhoto && <BabyModal image={babyPhoto} edit={editBabyPhoto} babyId={baby.id} caregiverId={baby.caregiverId} showBabyModal={setShowBabyModal}/>
) : (
<div className="flex flex-col my-6 md:my-15 mx-4 md:mx-10 items-center gap-[1.125rem] w-full">
<div className="flex flex-col py-6 md:my-15 px-4 md:px-10 items-center gap-[1.125rem] w-full">
<div className="self-start">
<h1 className="text-2xl sm:text-3xl font-bold text-primary-text">
{baby.firstName} {baby.lastName}
Expand Down
4 changes: 2 additions & 2 deletions web/pages/caregiver/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ export default function CaregiverOnboarding({ waivers, items, authId }: Props) {
}

return (
<div className="flex flex-col sm:flex-row absolute items-center sm:justify-center w-screen h-screen">
<div className="flex flex-col sm:flex-row absolute items-center sm:items-stretch sm:justify-center w-screen">
<HalfScreen caregiver={true} hiddenOnMobile={page != 0} />
<div className="flex flex-col sm:w-1/2 items-center sm:justify-center h-screen grow">
<div className="flex flex-col sm:w-1/2 items-center sm:justify-center h-auto grow">
{page > 0 && (
<div className="flex bg-white w-full sm:w-[60%] sticky top-0 items-center justify-between px-7 py-[1.125rem] sm:mt-6">
<BackButton
Expand Down
4 changes: 2 additions & 2 deletions web/pages/forgotPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export default function ForgotPasswordScreen() {
<>
<div className="flex absolute bg-white">
<div className="h-screen w-screen">
<div className="flex flex-col h-full sm:flex-row">
<div className="flex flex-col sm:flex-row">
<HalfScreen />
<div className="flex flex-col justify-center mx-6 mt-8 gap-10 sm:w-1/2 sm:items-center sm:mx-0">
<div className="flex flex-col justify-center mx-6 mt-8 gap-10 sm:w-1/2 sm:items-center sm:mx-0 h-auto">
<div className="flex flex-col gap-3 justify-center sm:items-center">
<div className="text-2xl font-bold">Forgot Password?</div>
<div>No problem, we&apos;ll send you reset instructions.</div>
Expand Down
4 changes: 2 additions & 2 deletions web/pages/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ export default function LoginScreen() {
return (
<div className="flex absolute bg-white">
<div className="h-screen w-screen">
<div className="flex flex-col w-full h-full sm:flex-row">
<div className="flex flex-col w-full sm:flex-row">
<HalfScreen />
<div className="flex flex-col w-full h-full justify-center items-center mt-8 sm:mt-0 sm:w-1/2">
<div className="flex flex-col w-full h-auto justify-center items-center mt-8 sm:mt-0 sm:w-1/2">
<div className={`flex flex-col w-[90%] sm:w-[60%] sm:items-center`}>
{errorBannerMsg && (
<div className="hidden sm:inline">
Expand Down
4 changes: 2 additions & 2 deletions web/pages/resetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ export default function ForgotPasswordScreen() {

return (
<div className="flex absolute bg-white w-screen h-screen">
<div className="flex flex-col h-full sm:flex-row w-full">
<div className="flex flex-col sm:flex-row w-full">
<HalfScreen />
<form
className="flex flex-col justify-center mx-6 mt-8 gap-10 sm:w-1/2 sm:items-center sm:mx-0"
className="flex flex-col justify-center mx-6 mt-8 gap-10 sm:w-1/2 sm:items-center sm:mx-0 h-auto"
onSubmit={handleSubmit}
>
<div className="flex flex-col gap-2">
Expand Down
4 changes: 2 additions & 2 deletions web/pages/signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,12 @@ export default function SignUpScreen() {
return (
<div className="flex absolute bg-white">
<div className="h-screen w-screen">
<div className="flex flex-col w-full h-full sm:flex-row">
<div className="flex flex-col w-full sm:flex-row">
<HalfScreen
caregiver={true}
backButtonFunction={page == 2 ? () => setPage(1) : undefined}
/>
<div className="flex flex-col w-full h-full justify-center items-center mt-6 sm:mt-0 sm:w-1/2">
<div className="flex flex-col w-full h-auto justify-center items-center mt-6 sm:mt-0 sm:w-1/2">
<div className="flex flex-col w-[90%] sm:w-[60%] sm:items-center">
<div className="hidden sm:flex w-full justify-start sm:mb-8">
{page === 2 && <BackButton onClick={() => setPage(1)} />}
Expand Down