Merge pull request #150 from FCSCOpendata/fix/rwd

Responseive Web Design
FCSCOpendata · Dec 18, 2023 · 7b6ba11 · 7b6ba11
2 parents 81293b9 + e64ff68
commit 7b6ba11
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/components/_shared/image_header/ImageHeader.tsx b/components/_shared/image_header/ImageHeader.tsx
@@ -32,8 +32,16 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
 
   return (
     <>
-      <div className={image?.url ? `lg:grid lg:grid-cols-2` : ''}>
-        <div className={`${image?.url ? 'w-full z-10' : 'hidden'}`}>
+      <div
+        className={`${
+          image?.url ? `lg:grid lg:grid-cols-2` : ''
+        } items-center`}
+      >
+        <div
+          className={`lg:-mx-20 ${
+            image?.url ? 'lg:w-[calc(100%+5rem)] z-10' : 'hidden'
+          }`}
+        >
           <div
             className={`h-full flex items-center
               ${
@@ -42,7 +50,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                 // 'md:ml-[-7rem] md:mr-[-7rem] xl:mr-0'
               }
               w-[calc(100%]  md:w-auto
-              bg-center bg-no-repeat bg-cover"
+              bg-center bg-no-repeat bg-cover
             `}
           >
             <div className="w-full  relative h-full">
@@ -53,7 +61,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                 priority={true}
                 width={909}
                 height={655}
-                className={`xl:object-contain
+                className={`lg:object-cover
                 ${AR('xl:rounded-l-[40px]', 'xl:rounded-r-[40px]')}
               `}
               />
@@ -67,9 +75,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
             //'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
           }`}
         >
-          <div
-            className={`h-full w-full xl:pt-[40px] pb-[40px] z-0 overflow-visible`}
-          >
+          <div className={`h-full w-full xl:pt-[40px] z-0 overflow-visible`}>
             {/* 5rem (ml) + 5rem (body padding) = 10rem*/}
             <div
               className={`bg-[#F7FAFC] pb-5 xl:pb-0 h-full
@@ -94,7 +100,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                     <style>{scrollbarCss}</style>
                     <Scrollbar
                       rtl={AR(true, false) as boolean}
-                      style={{ height: '9em' }}
+                      style={{ height: '7.5em' }}
                     >
                       <p className="text-[#7C7C7C] w-[99%] line-clamp-5 group-hover:line-clamp-none transition-all">
                         {children}

diff --git a/components/home/NavTemplate.tsx b/components/home/NavTemplate.tsx
@@ -40,7 +40,7 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
 
   return (
     <Disclosure as="nav" className={`bg-white`}>
-      {({ open }) => (
+      {({ open, close }) => (
         <>
           <div className="mx-auto px-2 sm:px-4 2xl:px-14">
             <div className="flex h-24 lg:container lg:mx-auto">
@@ -53,7 +53,7 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
                   <Link href="/">
                     <a href="/">
                       <img
-                        className="block lg:hidden w-[155px] sm:w-auto sm:h-10"
+                        className="block lg:hidden w-[140px] sm:w-[155px] sm:w-auto sm:h-10"
                         src={logo}
                         alt="bayanat.ae"
                       />
@@ -140,6 +140,9 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
                 <Link key={'mobile-menu-link' + index} href={item.path}>
                   <a
                     href={item.href}
+                    onClick={() => {
+                      close();
+                    }}
                     className="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
                   >
                     {item.title}