From 8517a0692c7bb0e563209cb2ad7a5c3bae10e77d Mon Sep 17 00:00:00 2001
From: William Lima <william.lima@nosi.cv>
Date: Wed, 13 Dec 2023 11:40:18 -0100
Subject: [PATCH] #139 fix PR issues filters and alignment

---
 .../_shared/image_header/ImageHeader.tsx      | 43 +++++++++++--------
 components/organization/MainOptions.tsx       |  4 +-
 components/search/FiltersBar.tsx              |  8 ++--
 components/search/NewForm.tsx                 |  2 +-
 components/search/filters/FilterCarousel.tsx  | 14 +++---
 pages/[org]/index.tsx                         |  2 +-
 pages/search.tsx                              |  4 +-
 styles/globals.css                            | 13 +++++-
 8 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/components/_shared/image_header/ImageHeader.tsx b/components/_shared/image_header/ImageHeader.tsx
index c22b547..e21afc9 100644
--- a/components/_shared/image_header/ImageHeader.tsx
+++ b/components/_shared/image_header/ImageHeader.tsx
@@ -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}`}
@@ -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">
@@ -89,7 +94,7 @@ 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}
@@ -97,7 +102,7 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
                     </Scrollbar>
                   </div>
                 </div>
-                <div className="pb-[3rem]">
+                <div className="pb-[3rem] mt-5">
                   <Badge
                     text={badgeText}
                     color={color}
diff --git a/components/organization/MainOptions.tsx b/components/organization/MainOptions.tsx
index cc3b14a..7e7a536 100644
--- a/components/organization/MainOptions.tsx
+++ b/components/organization/MainOptions.tsx
@@ -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>
       )}
diff --git a/components/search/FiltersBar.tsx b/components/search/FiltersBar.tsx
index dc0c93f..53c8cb3 100644
--- a/components/search/FiltersBar.tsx
+++ b/components/search/FiltersBar.tsx
@@ -284,7 +284,7 @@ export default function FiltersBar({
                     <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
@@ -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"
@@ -344,13 +344,13 @@ export default function FiltersBar({
                   <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"
diff --git a/components/search/NewForm.tsx b/components/search/NewForm.tsx
index 1655efa..32da8cf 100644
--- a/components/search/NewForm.tsx
+++ b/components/search/NewForm.tsx
@@ -129,7 +129,7 @@ const SearchForm: React.FC<{
           </div>
         </div>
       </div>
-      <div className="mt-4 z-10 w-full sm:max-w-3xl xl:max-w-none xl:w-9/12  mx-auto">
+      <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}
diff --git a/components/search/filters/FilterCarousel.tsx b/components/search/filters/FilterCarousel.tsx
index 5ac6d2d..f0acc80 100644
--- a/components/search/filters/FilterCarousel.tsx
+++ b/components/search/filters/FilterCarousel.tsx
@@ -22,20 +22,20 @@ const FilterCarousel: React.FC<{ identifier: string }> = ({
         onSwiper={(instance) => setSwiper(instance)}
         breakpoints={{
           1: {
+            slidesPerView: 1,
+            slidesPerGroup: 1,
+          },
+          460: {
             slidesPerView: 2,
             slidesPerGroup: 2,
           },
-          460: {
+          720: {
             slidesPerView: 3,
             slidesPerGroup: 3,
           },
-          720: {
-            slidesPerView: 5,
-            slidesPerGroup: 5,
-          },
           1200: {
-            slidesPerView: 5,
-            slidesPerGroup: 5,
+            slidesPerView: 4,
+            slidesPerGroup: 4,
           },
           1280: {
             slidesPerView: 6,
diff --git a/pages/[org]/index.tsx b/pages/[org]/index.tsx
index 76fb762..a8c7d96 100644
--- a/pages/[org]/index.tsx
+++ b/pages/[org]/index.tsx
@@ -72,7 +72,7 @@ const Organization: React.FC<any> = ({ variables }) => {
         <title>{`${t('organization')} | ${t('title')}`}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="py-12 mx-10 md:mx-28 pb-20 text-[#4D4D4D]">
+      <main className="py-12 mx-5 md:mx-20 pb-20 text-[#4D4D4D]">
         <ScrollIndicator
           firstImage={{
             url: activeOrg?.org?.icon?.url || '/images/no_icon_org.svg',
diff --git a/pages/search.tsx b/pages/search.tsx
index 680e92a..13802fe 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -78,7 +78,7 @@ const Search: React.FC<Props> = ({ variables }) => {
           }}
         />
         <div className="container mx-auto">
-          <div className="mb-12 mx-5 md:mx-16 lg:mx-28 mt-12">
+          <div className="mb-12 mx-5 md:mx-12 lg:mx-28 mt-12">
             <div className="px-4">
               <h1 className="font-semibold text-xl sm:text-2xl">
                 {amount}{' '}
@@ -103,7 +103,7 @@ const Search: React.FC<Props> = ({ variables }) => {
               />
             </div>
           </div>
-          <div className="mx-10 md:mx-28" id="dev-exp">
+          <div className="mx-10 md:mx-12 lg:mx-28" id="dev-exp">
             <DeveloperExperience
               api={
                 typeof window !== 'undefined'
diff --git a/styles/globals.css b/styles/globals.css
index 2833597..d2604a9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -175,7 +175,8 @@ div.MuiDataGrid-filterFormDeleteIcon {
 
 .slider {
   position: relative;
-  width: 250px;
+  width: 100%;
+  max-width: 100%;
 }
 
 .slider__track,
@@ -289,7 +290,7 @@ div.MuiDataGrid-filterFormDeleteIcon {
   pointer-events: none;
   position: absolute;
   height: 0;
-  width: 250px;
+  width: calc(100% - 3rem - 16px);
   outline: none;
 }
 
@@ -420,6 +421,14 @@ svg.star-svg {
     z-index: 1;
     pointer-events: none; /* Allows clicks to pass through the transparent area */
   }
+
+  [lang="ar"] .menu-scrollable-indicator{
+    left:0;
+    right:auto;
+    height: calc(100% - 6px);
+  }
+
+  
 }
 
 .scrollbar-invisible::-webkit-scrollbar{