Skip to content

Commit

Permalink
Merge pull request #330 from ertush/hotfix
Browse files Browse the repository at this point in the history 
Updated facilities page UI for small screen view port
  • Loading branch information
@ertush
ertush authored Feb 27, 2024
2 parents b741104 + 73f3f90 commit e59eed4
Show file tree
Hide file tree
Showing 8 changed files with 291 additions and 286 deletions.
5 changes: 4 additions & 1 deletion components/FacilitySideMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,11 +193,14 @@ function FacilitySideMenu({ states, stateSetters, filters }) {

return (

<div className='col-span-1 flex flex-col gap-3 md:col-start-1 md:mb-12 py-0 h-full bg-gray-50 shadow-md'>
<div className='col-span-1 flex flex-col gap-3 md:col-start-1 md:mb-12 pt-0 h-full rounded bg-gray-50 shadow-md'>
<List
className='p-0 m-0'
component="nav"
aria-labelledby="nested-list-subheader"
style={{
paddingTop: "0px !important"
}}

>
{/* All Facilities */}
Expand Down
42 changes: 21 additions & 21 deletions components/HeaderLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default function HeaderLayout({
{/* Logo And Title */}
<div className='w-full fixed z-20 max-h-min bg-gray-100 flex'>
{/* Heading */}
<div className="max-h-min md:w-[80%] w-full container flex md:mx-auto">
<div className="max-h-min md:w-[90%] w-full container flex md:mx-auto">
{/* Heading */}
<div className='w-full flex md:justify-between md:items-center justify-center py-4 max-h-min '>
{/* Logo */}
Expand All @@ -208,16 +208,16 @@ export default function HeaderLayout({

{/* Login / Logout button */}
{isLoggedIn ? (
<div className="text-lg group hidden duration-200 hover:rounded ease-in-out hover:border hover:border-blue-800 hover:text-blue-800 md:h-[40px] max-h-min px-3 md:flex gap-x-2 items-center text-blue-800 capitalize font-semibold">
<div className="text-lg group hidden duration-200 hover:rounded ease-in-out hover:border hover:border-gray-800 hover:text-gray-800 md:h-[40px] max-h-min px-3 md:flex gap-x-2 items-center text-blue-800 capitalize font-semibold">
<Menu as="div" className="relative p-2" >
<Menu.Button
as="div"
className="flex items-center justify-center gap-1 cursor-pointer"
>
<span className="leading-none p-0 inline sm:hidden">
<UserCircleIcon className="h-6 w-6 text-blue-800" />
<UserCircleIcon className="h-6 w-6 text-gray-800" />
</span>
<span className="leading-none p-0 hidden sm:inline">
<span className="leading-none text-gray-800 p-0 hidden sm:inline">
{user.full_name || "My account"}
</span>
<span className="leading-none p-0">
Expand All @@ -234,7 +234,7 @@ export default function HeaderLayout({
<Menu.Item as="li" className="flex items-center w-full gap-1">
{({ active }) => (
<button
className={`w-full text-blue-800 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
className={`w-full text-gray-800 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
}`}
onClick={() => router.push('/account')}
>
Expand All @@ -253,7 +253,7 @@ export default function HeaderLayout({
<button
onClick={() => router.push('/logout')}
data-testid="logout"
className={`w-full cursor-pointer flex text-blue-800 font-medium ${active && "text-blue-400"
className={`w-full cursor-pointer flex items-center text-gray-800 font-medium ${active && "text-blue-400"
}`}

>
Expand Down Expand Up @@ -411,10 +411,10 @@ export default function HeaderLayout({
className="list-none rounded outline-none text-black bg-gray-100 shadow-md flex flex-col items-center justify-start gap-2 md:p-3 py-3 absolute mt-3 right-0 w-40 "
>

<Menu.Item as="li" className="flex items-center w-full gap-1">
<Menu.Item as="li" className="flex items-center px-3 w-full gap-1">
{({ active }) => (
<button
className={`w-full text-blue-600 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
className={`w-full text-gray-800 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
}`}
onClick={() => router.push('/account')}
>
Expand All @@ -427,13 +427,13 @@ export default function HeaderLayout({

<Menu.Item
as="li"
className={"flex items-center w-full gap-1 mt-2 border-t border-gray-300 py-2"}
className={"flex items-center w-full px-3 gap-1 mt-2 border-t border-gray-300 py-2"}
>
{({ active }) => (
<button
onClick={() => router.push('/logout')}
data-testid="logout"
className={`w-full cursor-pointer flex text-blue-600 font-medium ${active && "text-blue-400"
className={`w-full cursor-pointer flex items-center text-gray-800 font-medium ${active && "text-blue-400"
}`}

>
Expand Down Expand Up @@ -467,12 +467,12 @@ export default function HeaderLayout({
currentPath !== '/logout' &&
<div style={{ backgroundColor: '#1651b6' }} className='w-full hidden top-[97px] fixed z-10 max-h-min md:flex justify-center'>
{/* Wide view Port Nav bar */}
<nav className="hidden max-h-min md:w-full lg:w-[60%] container md:flex mx-auto ">
<nav className="hidden max-h-min md:w-full lg:w-[90%] container md:flex mx-auto ">
<ul className='list-none w-full flex items-center justify-between '>
{
userID == 6 &&
!isLoggedIn &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 `}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 `}>
<Link href='/'>Home</Link>
</li>
}
Expand All @@ -481,37 +481,37 @@ export default function HeaderLayout({
userID !== 6 &&
isLoggedIn &&

<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} `}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} `}>
<Link href='/dashboard'>Dashboard</Link>
</li>
}

{
userID &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href={`${userID !== 6 && isLoggedIn ? '/facilities' : '/public/facilities'}`}>Facilities</Link>
</li>
}

{
userID &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/community-units" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/community-units" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href={`${userID !== 6 && isLoggedIn ? '/community-units' : '/public/chu'}`}>Community Units</Link>
</li>
}

{
userID == 6 &&
!isLoggedIn &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/about" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/about" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='/public/about'>About</Link>
</li>
}


{
userID == 6 &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/faqs" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/faqs" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='/public/faqs'>FAQs</Link>

</li>
Expand All @@ -522,7 +522,7 @@ export default function HeaderLayout({
groupID == 1) &&
userID !== 6 &&
isLoggedIn &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/user" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/user" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='/user'>Users</Link>
</li>
}
Expand All @@ -536,7 +536,7 @@ export default function HeaderLayout({
groupID == 5)
) &&
isLoggedIn &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='/system_setup'>System Setup</Link>
</li>
}
Expand All @@ -545,7 +545,7 @@ export default function HeaderLayout({
userID !== 6 &&
groupID !== 3 &&
isLoggedIn &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='/reports'>Reports</Link>
</li>
}
Expand All @@ -556,7 +556,7 @@ export default function HeaderLayout({
(groupID == 7 ||
groupID == 5) &&
isLoggedIn &&
<li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/admin_offices" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/admin_offices" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
<Link href='/admin_offices'>Admin Offices</Link>
</li>
}
Expand Down
12 changes: 7 additions & 5 deletions components/MainLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,10 @@ export default function MainLayout({ children, isLoading, searchTerm, isFullWidt
</div> */}
<HeaderLayout {...searchTerm} />
{/*
+ (isFullWidth ? "" : "max-w-screen-2xl") + (classes && classes.length > 0 ? classes.join(" ") : "") */}

<div className={"h-full w-full flex flex-col py-5 items-center " + (isFullWidth ? "" : "max-w-screen-2xl") + (classes && classes.length > 0 ? classes.join(" ") : "")}>
<div className={"h-full w-full flex flex-col py-5 items-center " }>

{ children }
<Analytics />
Expand All @@ -99,7 +101,7 @@ export default function MainLayout({ children, isLoading, searchTerm, isFullWidt
<div className="w-full flex flex-col mt-12 h-auto">
<div className="w-full max-h-min py-8 bg-gray-500">
<div className="flex flex-col gap-4 items-between">
<div className="md:w-[60%] w-full md:mx-auto flex justify-between p-4 md:p-0">
<div className="md:w-[90%] w-full md:mx-auto flex justify-between p-4 md:p-0">
<div className="flex flex-col text-gray-200 md:gap-2 gap-1">
<h2 className='text-blue-50 font-semibold mb-2 '>Contacts</h2>
<Link href="tel:+254 20 2717077" className="t">+254-20-2717077</Link>
Expand Down Expand Up @@ -159,10 +161,10 @@ export default function MainLayout({ children, isLoading, searchTerm, isFullWidt

</div>

<div className="w-full max-h-min py-5 bg-gray-700">
<div className='md:w-[60%] w-full md:mx-auto max-h-min flex flex-col justify-center md:flex md:justify-between items-center md:py-4 md:px-0 text-center p-2'>
<div className="w-full max-h-min py-5 md:py-2 bg-gray-700">
<div className='md:w-[90%] w-full md:mx-auto max-h-min flex flex-col justify-center md:flex md:justify-between items-center md:py-4 md:px-0 text-center p-2'>
<p className='text-gray-400'>&copy; Copyright {new Date().getFullYear()}. All Rights Reserved. Republic of Kenya, Ministry of Health</p>
<p className='text-gray-400'>Version 3.0.1</p>
<p className='text-gray-400'>Version 3.0.0</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "kmhfr",
"version": "1.0.0",
"version": "3.0.0",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
Loading

0 comments on commit e59eed4

Please sign in to comment.