Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive Web Design Fixes: Dataset page #147

Merged
merged 4 commits into from
Dec 13, 2023
Merged

Responsive Web Design Fixes: Dataset page #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b03c8b
#139 fix dataset rwd issues
Dec 12, 2023
8517a06
#139 fix PR issues filters and alignment
Dec 13, 2023
4640f42
#139 fix ts build errors
Dec 13, 2023
11faee0
build: fix linting error
demenech Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/_shared/ScrollIndicator.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading