Skip to content

Commit

Permalink
Merge branch 'main' into fix/accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@willy1989cv
willy1989cv authored Dec 18, 2023
2 parents 17f2def + 7b6ba11 commit 84197a9
Show file tree
Hide file tree
Showing 14 changed files with 117 additions and 93 deletions.
57 changes: 34 additions & 23 deletions components/_shared/image_header/ImageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,52 +32,63 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({

return (
<>
<div className={image?.url ? `xl:grid xl: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
${AR(
'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:ml-0',
'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:mr-0'
)}
w-[calc(100%+5rem)] xl:w-[calc(100%+4rem)] md:w-auto
bg-center bg-no-repeat bg-cover"
${
AR()
//'md:mr-[-7rem] md:ml-[-7rem] xl:ml-0',
// 'md:ml-[-7rem] md:mr-[-7rem] xl:mr-0'
}
w-[calc(100%] md:w-auto
bg-center bg-no-repeat bg-cover
`}
>
<div className="w-[100vw] xl:w-[calc(100%+10rem)] relative h-full">
<div className="w-full relative h-full">
<Image
src={image.url}
alt={`${title}`}
layout="responsive"
priority={true}
width={909}
height={655}
className={`xl:object-contain
className={`lg:object-cover
${AR('xl:rounded-l-[40px]', 'xl:rounded-r-[40px]')}
`}
/>
</div>
</div>
</div>
<div className="w-full">
<div
className={`h-full w-full xl:pt-[40px] pb-[40px] ${AR(
'ml-[10rem]',
'mr-[10rem]'
)} z-0 overflow-visible`}
>
<div
className={`w-auto -mx-5 md:-mx-20 ${
AR(' lg:mr-0', 'lg:ml-0')
//'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:mr-[-3.0rem]',
//'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
}`}
>
<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
${AR(
'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:mr-[-3.0rem]',
'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
)}
${
AR()
//'mr-[-2.5rem] md:mr-[-7rem] md:ml-[-7rem] xl:mr-[-3.0rem]',
//'ml-[-2.5rem] md:ml-[-7rem] md:mr-[-7rem] xl:ml-[-3.0rem]'
}
${AR(
'px-10 md:pl-[4rem] xl:pl-[7rem]',
'px-10 md:pl-[4rem] xl:pr-[7rem]'
)}
w-[calc(100%+5rem)] xl:w-[calc(100%+10rem)] md:w-auto
w-full
`}
>
<div className="pt-[3rem] flex flex-col h-full justify-between">
Expand All @@ -97,7 +108,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
</Scrollbar>
</div>
</div>
<div className="pb-[3rem]">
<div className="pb-[3rem] mt-5">
<Badge
text={badgeText}
color={color}
Expand Down
11 changes: 7 additions & 4 deletions components/home/NavTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const languages = ['ar', 'en'];

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

function handleLocale(e: MouseEvent<HTMLButtonElement>) {
Expand All @@ -19,7 +19,7 @@ const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
}

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

Expand All @@ -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">
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 3 additions & 1 deletion components/organization/MainOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,9 @@ const MainOptions: React.FC<any> = ({
</div>
{children?.length > 0 && (
<div className="mb-20">
<h1 className="font-semibold text-3xl mb-6">{t('og-h-sub')}</h1>
<h1 className="font-semibold text-2xl sm:text-3xl mb-6">
{t('og-h-sub')}
</h1>
<SubOrgsCarousel orgs={subOrgs} orgOnClick={onSubOrgClick} />
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/resource/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
return (
<>
<div className="flex flex-col mb-10">
<div className="flex xl:flex-row flex-col mb-4 text-[#4D4D4D] font-avenir font-extrabold text-[36px] items-baseline">
<div className="flex xl:flex-row flex-col mb-4 text-[#4D4D4D] font-avenir font-extrabold text-2xl lg:text-[36px] lg:leading-[56px] items-baseline">
{resource.format === 'CSV' ? (
<img
src="/images/csv-icon.svg"
Expand Down
10 changes: 5 additions & 5 deletions components/resource/NavBreadCrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ export default function NavBreadCrumbs({ navInfo }) {
return (
<div className=" mt--2 mb-8 font-avenir">
<div className="flex flex-1 bg-[#F7FAFC] bg-waves pl-2">
<ol className="flex text-[13px] items-center font-[500] tracking-widest uppercase text-[#464646] px-12 py-8 space-x-2">
<ol className="hoverable-scroll overflow-auto flex text-[13px] items-center font-[500] md:tracking-widest uppercase text-[#464646] px-5 lg:px-12 py-8 space-x-2">
<li>
<Link href="/search">
<a className="group relative">
<a className="group relative whitespace-nowrap">
{t('datasets')}
<span
className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
Expand All @@ -23,7 +23,7 @@ export default function NavBreadCrumbs({ navInfo }) {
</li>
<li>
<Link href={`/@${navInfo.orgName}`}>
<a className="group relative">
<a className="group relative whitespace-nowrap">
{navInfo.orgTitle}
<span
className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
Expand All @@ -37,7 +37,7 @@ export default function NavBreadCrumbs({ navInfo }) {
</li>
<li>
<Link href={`/@${navInfo.orgName}/${navInfo.datasetName}`}>
<a className="group relative">
<a className="group relative whitespace-nowrap">
{navInfo.datasetTitle}
<span
className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
Expand All @@ -49,7 +49,7 @@ export default function NavBreadCrumbs({ navInfo }) {
<li>
<span>&gt;</span>
</li>
<li>{navInfo.resourceTitle}</li>
<li className="whitespace-nowrap">{navInfo.resourceTitle}</li>
</ol>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/resource/ResourceExplorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
return (
<div className="grid xl:grid-cols-12 grid-cols-1 pl-0 w-full">
{/* Preview: show Data Explorer if tabular data + datastore active */}
<div className="col-span-12 p-10 bg-[#F7FAFC] rounded-2xl">
<div className="col-span-12 p-5 md:p-10 bg-[#F7FAFC] rounded-2xl">
<div className="flex xl:flex-row flex-col justify-between mb-4">
<div className="flex font-avenir text-[20px] text-[#545454] font-normal pl-4 w-2/3 xl:flex-row flex-col">
<div className="flex xl:mr-3 items-baseline mb-2">
Expand Down
54 changes: 28 additions & 26 deletions components/search/FiltersBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,11 +261,11 @@ export default function FiltersBar({
sideFilter.organization.forEach((el) => fixTranslations(el));

return (
<div className="">
<div className="w-full">
{filters === t('topics') && (
<>
<div className="w-100 max-w-6xl bg-white">
<div id="topics">
<div className="">
<div id="topics" className="mx-5 bg-white rounded-xl py-2">
<TopicsCarousel
items={topics}
active={{ name: null }}
Expand All @@ -276,15 +276,15 @@ export default function FiltersBar({
</div>
</div>

<div className="w-100 max-w-6xl mt-2">
<div className="w-100 max-w-6xl mt-2 mx-auto px-5">
<div className="relative">
<div className="peer">
<FilterCarousel identifier="sub-topics-carousel">
{topics[currentIndex].children.map((sub, index) => (
<SwiperSlide key={index} className="p-1">
<button
key={sub.id}
className="group relative flex flex-wrap bg-gray-200 h-full w-full rounded-xl overflow-hidden"
className="group relative flex flex-wrap bg-gray-200 h-40 w-full rounded-xl overflow-hidden"
onClick={(e) => filterSearch(e, 'groups', sub)}
>
<img
Expand All @@ -294,7 +294,7 @@ export default function FiltersBar({
}
alt={sub.title}
width="100%"
className="top-0 w-full h-full object-scale-down z-0"
className="top-0 w-full h-full object-cover z-0"
/>
<span
className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 transition-all border-[#22B373] rounded-b-l z-10"
Expand Down Expand Up @@ -336,21 +336,21 @@ export default function FiltersBar({
</>
)}
{filters === t('organization') && (
<div className="w-100 max-w-6xl mt-2">
<div className="w-100 lg:max-w-6xl mx-5 mt-2">
<div className="relative">
<div className="peer">
<FilterCarousel identifier="orgs-carousel">
{orgsResults.map((org, index) => (
<SwiperSlide key={index} className="p-1">
<button
key={org.id}
className="group relative flex flex-wrap bg-gray-200 w-40 h-40 rounded-xl overflow-hidden"
className="group relative flex flex-wrap bg-gray-200 w-full h-40 rounded-xl overflow-hidden"
onClick={(e) => filterSearch(e, 'organization', org)}
>
<img
src={org.image || '/images/org-default.png'}
alt={org.name}
className="absolute left-0 top-0 w-full object-scale-down z-0 rounded-xl"
className="absolute left-0 top-0 w-full h-full object-cover z-0 rounded-xl"
/>
<span
className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 transition-all border-[#22B373] rounded-b-l z-10"
Expand Down Expand Up @@ -392,26 +392,28 @@ export default function FiltersBar({
)}

{filters === t('ds-bt-time') && (
<div className="w-full can mt-2 bg-white">
{Object.keys(timeFrames).map((timeframe, index) => (
<button
key={index}
className={`py-2 px-4 rounded-xl font-avenir ${
currentTimeIndex === index
? 'bg-button-gradient text-white'
: 'text-black'
}`}
onClick={() => setTimeSearchValue(timeframe, index)}
>
{timeframe}
</button>
))}
<div className="min-w-full px-5">
<div className="w-full rounded-xl mt-2 can mt-2 bg-white flex flex-col sm:flex-row">
{Object.keys(timeFrames).map((timeframe, index) => (
<button
key={index}
className={`py-2 px-4 rounded-xl font-avenir ${
currentTimeIndex === index
? 'bg-button-gradient text-white'
: 'text-black'
}`}
onClick={() => setTimeSearchValue(timeframe, index)}
>
{timeframe}
</button>
))}
</div>
</div>
)}

{currentTimeIndex === 0 && filters === t('ds-bt-time') && (
<div className="w-full mt-4">
<div className="flex flex-col w-1/2 pt-6 px-8 font-[Raleway] bg-white relative rounded-xl triangle">
<div className="w-full mt-4 px-5">
<div className="flex flex-col w-full lg:w-1/2 pt-6 px-8 font-[Raleway] bg-white relative rounded-xl triangle">
<div>
<MultiRangeSlider
min={0}
Expand Down Expand Up @@ -456,7 +458,7 @@ export default function FiltersBar({
)}
{(sideFilter.groups.length > 0 ||
sideFilter.organization.length > 0) && (
<div className="flex flex-col">
<div className="flex flex-col mx-5 mt-5">
<span className="font-bold">{t('active-filters')}</span>
{sideFilter.groups.length > 0 && (
<div className="flex w-100 max-w-6xl items-between">
Expand Down
6 changes: 3 additions & 3 deletions components/search/NewForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const SearchForm: React.FC<{
>
{t('ds-h-sear')}
</h1>
<div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-xl xl:max-w-none xl:w-9/12 px-4 sm:px-0 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
<div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-3xl xl:max-w-none xl:w-9/12 px-4 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
<form
className="flex flex-1 relative xl:w-1/2 bg-white rounded-xl px-4 py-2 items-center"
onSubmit={(e) => e.preventDefault()}
Expand All @@ -81,7 +81,7 @@ const SearchForm: React.FC<{
<p className="text-lg text-center xl:text-left bg-button-gradient bg-clip-text text-transparent">
{t('ds-p-filt')}
</p>
<div className="flex flex-wrap xl:flex-nowrap justify-start sm:justify-center xl:justify-between bg-white w-full sm:w-fit !mx-auto xl:!ml-4 p-2 h-[56px] rounded-xl overflow-auto scrollbar-invisible">
<div className="flex w-auto flex-wrap xl:flex-nowrap justify-start sm:justify-center xl:justify-between bg-white w-full !mx-auto xl:!ml-4 p-2 h-[56px] rounded-xl overflow-auto scrollbar-invisible">
<div className="flex text-sm">
<div
className={`flex space-x-1 ${
Expand Down Expand Up @@ -133,7 +133,7 @@ const SearchForm: React.FC<{
</div>
</div>
</div>
<div className="mt-4 z-10">
<div className="mt-4 z-10 xl:flex xl:flex-wrap items-center w-full sm:max-w-3xl xl:max-w-none xl:w-9/12 px-4 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
<FiltersBar
qvariables={variables}
setQvariables={setQvariables}
Expand Down
16 changes: 8 additions & 8 deletions components/search/filters/FilterCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,20 @@ const FilterCarousel: React.FC<{ identifier: string }> = ({
onSwiper={(instance) => setSwiper(instance)}
breakpoints={{
1: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerView: 1,
slidesPerGroup: 1,
},
460: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerView: 2,
slidesPerGroup: 2,
},
720: {
slidesPerView: 5,
slidesPerGroup: 5,
slidesPerView: 3,
slidesPerGroup: 3,
},
1200: {
slidesPerView: 5,
slidesPerGroup: 5,
slidesPerView: 4,
slidesPerGroup: 4,
},
1280: {
slidesPerView: 6,
Expand Down
Loading

0 comments on commit 84197a9

Please sign in to comment.