Skip to content

Commit

Permalink
Merge pull request #141 from FCSCOpendata/fix/rwd
Browse files Browse the repository at this point in the history 
Responsive Web Design Fixes: Global Components and Home
  • Loading branch information
@demenech
demenech authored Dec 8, 2023
2 parents 3e99eb4 + 301628d commit 5b96b4e
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 129 deletions.
2 changes: 1 addition & 1 deletion components/home/HeroTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function Footer() {
>
{t(`description`)}
</p>
<div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0 mb-8">
<div className="mt-8 sm:max-w-lg sm:mx-auto flex sm:justify-center lg:justify-start sm:text-center lg:text-left lg:mx-0 mb-8">
<SearchForm />
</div>
<div className="pt-4 max-w-lg">
Expand Down
47 changes: 37 additions & 10 deletions components/home/NavTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MouseEvent, useEffect } from 'react';
import { MouseEvent, useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Disclosure } from '@headlessui/react';
Expand All @@ -9,31 +9,51 @@ const languages = ['ar', 'en'];

const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
const router = useRouter();
const navRef = useRef();
const [iseMenuScrollable, setIsMenuScrollable] = useState(false);

function handleLocale(e: MouseEvent<HTMLButtonElement>) {
router.push(router.asPath, null, {
locale: e.currentTarget.value.toLocaleLowerCase(),
});
}

function checkScrollableMenu() {
const navbar = navRef.current;
if (navbar) setIsMenuScrollable(navbar.scrollWidth > navbar.offsetWidth);
}

useEffect(() => {
const dir = router.locale.toLowerCase() == 'ar' ? 'rtl' : 'ltr';
document.querySelector('html').setAttribute('dir', dir);
document.querySelector('html').setAttribute('lang', router.locale);
}, [router.locale]);

useEffect(() => {
window.addEventListener('resize', checkScrollableMenu);
return () => window.removeEventListener('resize', checkScrollableMenu);
}, [navRef.current]);

useEffect(() => {
checkScrollableMenu();
}, [menu]);

return (
<Disclosure as="nav" className={`bg-white`}>
{({ open }) => (
<>
<div className="mx-auto px-2 sm:px-4 2xl:px-14">
<div className="flex justify-between h-24">
<div className="flex px-2 lg:px-0">
<div className="flex h-24">
<div
className={`flex px-2 lg:px-0 lg:w-[calc(100%-84px)] ${
iseMenuScrollable ? 'is-scrollable relative' : ''
}`}
>
<div className="flex-shrink-0 flex items-center">
<Link href="/">
<a href="/">
<img
className="block lg:hidden h-10 w-auto"
className="block lg:hidden w-[155px] sm:w-auto sm:h-10"
src={logo}
alt="bayanat.ae"
/>
Expand All @@ -46,15 +66,16 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
</Link>
</div>
<div
className={`hidden lg:flex lg:space-x-1 2xl:space-x-4 text-center ${
AR() ? 'mr-4 xl:mr-8' : 'ml-4 xl:ml-8 '
ref={navRef}
className={`header-menu hidden lg:flex lg:space-x-1 2xl:space-x-4 text-center overflow-auto ${
AR() ? 'mr-4 ml-4 xl:mr-8' : 'ml-4 mr-4 xl:ml-8 '
}`}
>
{menu.map((item, index) => (
<Link key={'menu-link' + index} href={item.path}>
<a
href={item.path}
className="group relative self-center h-fit text-black inline-flex items-center px-2 pt-1 leading--[0] tracking-widest uppercase font-poppins text-[13px]"
className="whitespace-nowrap group relative self-center h-fit text-black inline-flex items-center px-2 pt-1 leading--[0] tracking-widest uppercase font-poppins text-[13px]"
>
{item.title}
<span
Expand All @@ -71,9 +92,15 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
</Link>
))}
</div>
{iseMenuScrollable && (
<div className="menu-scrollable-indicator"></div>
)}
</div>
<div className="flex items-center space-x-8">
<div className="space-x-2 text-[#525252]">
<div className="flex items-center space-x-8 ml-auto">
<div
className="space-x-2 text-[#525252] "
style={{ minWidth: 83 }}
>
{languages.map((name) => (
<input
key={name}
Expand All @@ -93,7 +120,7 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
))}
</div>
</div>
<div className="flex items-center lg:hidden">
<div className="ml-4 flex items-center lg:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
Expand Down
119 changes: 65 additions & 54 deletions components/home/main/News.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,146 +45,157 @@ export default function News() {
<p className="mt-3 mb-6 text-center text-base text-gray font-normal">
{t('hm-p-news-text')}
</p>
<div className="container mx-auto flex flex-wrap h-96">

<div className="grid grid-cols-1 md:grid-rows-2 lg:grid-rows-1 lg:grid-cols-3 gap-4 container mx-auto ">
<div className="flex flex-wrap w-full">
<div className="flex flex-wrap w-1/3 px-1">
<a
href={posts[0] ? `${AR('/ar')}/news/${posts[0]?.slug}` : ''}
onClick={(e) => (!posts[0] ? e.preventDefault() : null)}
className={`${posts[0] ? 'group' : 'cursor-auto'} h-full w-full`}
title={posts[0]?.title}
>
<div className="relative w-full h-[24.5rem]">
<span
className={`absolute left-0 bottom-0 w-full h-full z-10
<a
href={posts[0] ? `${AR('/ar')}/news/${posts[0]?.slug}` : ''}
onClick={(e) => (!posts[0] ? e.preventDefault() : null)}
className={`${posts[0] ? 'group' : 'cursor-auto'} h-full w-full`}
title={posts[0]?.title}
>
<div className="relative w-full h-60 lg:h-[24.5rem]">
<span
className={`absolute left-0 bottom-0 w-full h-full z-10
${
posts[0] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
/>
{posts[0] ? (
<img
alt={posts[0]?.title}
className="object-cover w-full h-full object-center block rounded-lg"
src={posts[0]?.image}
/>
{posts[0] ? (
<img
alt={posts[0]?.title}
className="object-cover w-full h-full object-center block rounded-lg"
src={posts[0]?.image}
/>
) : (
<div className="w-full h-full" />
)}
{headline(posts[0]?.title)}
</div>
</a>
</div>
<div className="flex flex-wrap w-1/3 px-1">
) : (
<div className="w-full h-full" />
)}
{headline(posts[0]?.title)}
</div>
</a>
</div>

<div className="md:grid md:grid-cols-2 md:gap-4 lg:block lg:grid-cols-none lg:gap-4">
<div className="flex flex-wrap w-full mb-4 lg:mb-0">
<a
href={posts[1] ? `${AR('/ar')}/news/${posts[1]?.slug}` : ''}
onClick={(e) => (!posts[1] ? e.preventDefault() : null)}
className={`${posts[1] ? 'group' : 'cursor-auto'} w-full`}
title={posts[1]?.title}
>
<div className="relative w-full pb-1">
<div className="relative w-full lg:pb-1">
<span
className={`absolute left-0 bottom-0 w-full h-full z-10
${
posts[1] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
${
posts[1] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
/>
{posts[1] ? (
<img
alt={posts[1]?.title}
className="w-full object-cover w-full h-36 object-center block rounded-lg"
className="w-full object-cover w-full h-60 lg:h-36 object-center block rounded-lg"
src={posts[1]?.image}
/>
) : (
<div className="w-full h-36" />
<div className="w-full h-60 lg:h-36" />
)}
{headline(posts[1]?.title)}
</div>
</a>
</div>

<div className="flex flex-wrap w-full mb-4 lg:mb-0">
<a
href={posts[2] ? `${AR('/ar')}/news/${posts[2]?.slug}` : ''}
onClick={(e) => (!posts[2] ? e.preventDefault() : null)}
className={`${posts[2] ? 'group' : 'cursor-auto'} w-full`}
title={posts[2]?.title}
>
<div className="relative w-full pt-1">
<div className="relative w-full lg:pt-1">
<span
className={`absolute left-0 bottom-0 w-full h-full z-10
${
posts[2] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
${
posts[2] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
/>
{posts[2] ? (
<img
alt={posts[2]?.title}
className="w-full object-cover w-full h-60 object-center block rounded-lg"
className="w-full object-cover w-full h-60 object-center block rounded-lg"
src={posts[2]?.image}
/>
) : (
<div className="w-full h-60" />
<div className="w-full h-60 " />
)}
{headline(posts[2]?.title)}
</div>
</a>
</div>
<div className="flex flex-wrap w-1/3 px-1">
</div>

<div className="md:grid md:grid-cols-2 md:gap-4 lg:block lg:grid-cols-none lg:gap-4">
<div className="flex flex-wrap w-full mb-4 lg:mb-0">
<a
href={posts[3] ? `${AR('/ar')}/news/${posts[3]?.slug}` : ''}
onClick={(e) => (!posts[3] ? e.preventDefault() : null)}
className={`${posts[3] ? 'group' : 'cursor-auto'} w-full`}
title={posts[3]?.title}
>
<div className="relative w-full pb-1">
<div className="relative w-full lg:pb-1">
<span
className={`absolute left-0 bottom-0 w-full h-full z-10
${
posts[3] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
${
posts[3] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
/>
{posts[3] ? (
<img
alt={posts[3]?.title}
className="w-full object-cover w-full h-60 object-center block rounded-lg"
className="w-full object-cover w-full h-60 object-center block rounded-lg"
src={posts[3]?.image}
/>
) : (
<div className="w-full h-60" />
<div className="w-full h-60 " />
)}
{headline(posts[3]?.title)}
</div>
</a>
</div>
<div className="flex flex-wrap w-full">
<a
href={posts[4] ? `${AR('/ar')}/news/${posts[4]?.slug}` : ''}
onClick={(e) => (!posts[4] ? e.preventDefault() : null)}
className={`${posts[4] ? 'group' : 'cursor-auto'} w-full`}
title={posts[4]?.title}
>
<div className="relative w-full pt-1">
<div className="relative w-full lg:pt-1">
<span
className={`absolute left-0 bottom-0 w-full h-full z-10
${
posts[4] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
${
posts[4] ? 'border-b-4 border-[#22B373]' : ''
} rounded-b-lg
`}
/>
{posts[4] ? (
<img
alt={posts[4]?.title}
className="w-full object-cover w-full h-36 object-center block rounded-lg"
className="w-full object-cover w-full h-60 lg:h-36 object-center block rounded-lg"
src={posts[4]?.image}
/>
) : (
<div className="w-full h-36" />
<div className="w-full h-60 lg:h-36" />
)}
{headline(posts[4]?.title)}
</div>
</a>
</div>
</div>
</div>

<div className="mt-12 font-avenir text-lg text-center">
<a href={`${AR('/ar')}/news`}>
{t('hm-a-see')} <ArrowRightIcon className="inline w-4 ml-4" />
Expand Down
12 changes: 8 additions & 4 deletions components/home/main/OpenData101.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,22 @@ export default function OpenData101(props) {
}

return (
<div className="relative h-fit">
<div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto ">
<img
src="/images/open-data-101.svg"
alt="Open Data 101"
className="w-full"
/>
<div className="absolute w-1/2 inset-x-1/4 inset-y-1/3 text-center">
<div className="absolute w-full lg:w-1/2 lg:inset-x-1/4 top-0 sm:top-auto sm:bottom-1/2 text-center">
<p className="text-[#54CA59] font-semibold">- {t('hm-p-next')} -</p>
<a href={`${AR('/ar')}/p/open-data-101`}>
<h2 className="font-avenir font-extrabold text-4xl mb-2">{text}</h2>
<h2 className="font-avenir font-extrabold text-2xl lg:text-4xl mb-2">
{text}
</h2>
</a>
<p className="text-center px-28 text-sm mb-4">{t('opendata-p')}</p>
<p className="text-center px-12 md:px-28 my-4 text-sm mb-4">
{t('opendata-p')}
</p>
<a
href="#"
className="text-[#54CA59] font-medium"
Expand Down
6 changes: 3 additions & 3 deletions components/request/RequestData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@ const RequestData: React.FC = () => {
};

return (
<div className="bg-contact">
<div className="relative mx-auto pt-20 xl:px-20 w-1/2">
<div className="bg-contact px-4 mb-[70px] md:mb-0">
<div className="relative pt-20 xl:px-20 mx-10 md:mx-auto md:w-1/2">
{status.enabled && (
<div
className={`-mt-20 absolute mx-auto text-center ${AR(
Expand All @@ -151,7 +151,7 @@ const RequestData: React.FC = () => {
{status.message}
</div>
)}
<div className="xl:w-4/5">
<div className="xl:w-full">
<div className="text-center font-avenir text-[36px] font-extrabold text-[#4D4D4D]">
<h1>{t('request-header')}</h1>
</div>
Expand Down
Loading

0 comments on commit 5b96b4e

Please sign in to comment.