Skip to content

Commit

Permalink
Merge pull request #147 from FCSCOpendata/fix/rwd-issues
Browse files Browse the repository at this point in the history 
Responsive Web Design Fixes: Dataset page
  • Loading branch information
@demenech
demenech authored Dec 13, 2023
2 parents f892673 + 11faee0 commit 81293b9
Show file tree
Hide file tree
Showing 15 changed files with 103 additions and 87 deletions.
1 change: 1 addition & 0 deletions components/_shared/ScrollIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const ScrollIndicator: React.FC<{
<div className="h-full absolute flex flex-col justify-evenly w-full items-center border-[#333333] border-t-[1px] border-b-[1px] w-1">
{stops.map((stop, index) => (
<button
aria-label="test"
className={`transition-all ease-in-out origin-center duration-100 rounded-full border-[1px] border-[#333333] w-[10px] h-[10px] bg-[#fff] ${
active == index ? 'scale-150' : ''
} flex justify-center items-center`}
Expand Down
43 changes: 24 additions & 19 deletions components/_shared/image_header/ImageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,20 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({

return (
<>
<div className={image?.url ? `xl:grid xl:grid-cols-2` : ''}>
<div className={image?.url ? `lg:grid lg:grid-cols-2` : ''}>
<div className={`${image?.url ? 'w-full 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
${
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}`}
Expand All @@ -59,25 +60,29 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
</div>
</div>
</div>
<div className="w-full">
<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] pb-[40px] ${AR(
'ml-[10rem]',
'mr-[10rem]'
)} z-0 overflow-visible`}
className={`h-full w-full xl:pt-[40px] pb-[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 @@ -89,15 +94,15 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
<style>{scrollbarCss}</style>
<Scrollbar
rtl={AR(true, false) as boolean}
style={{ height: '7.5em' }}
style={{ height: '9em' }}
>
<p className="text-[#7C7C7C] w-[99%] line-clamp-5 group-hover:line-clamp-none transition-all">
{children}
</p>
</Scrollbar>
</div>
</div>
<div className="pb-[3rem]">
<div className="pb-[3rem] mt-5">
<Badge
text={badgeText}
color={color}
Expand Down
4 changes: 2 additions & 2 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 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 @@ -153,7 +153,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-[#808080] 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 @@ -54,7 +54,7 @@ const SearchForm: React.FC<{
<h1 className="text-3xl text-center font-extrabold !mt-0 mb-8 capitalize z-10">
{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 @@ -77,7 +77,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 @@ -129,7 +129,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 81293b9

Please sign in to comment.