Merge pull request #107 from FCSCOpendata/bugix/minor-issues

2022-09-15 - UI Fixes
FCSCOpendata · Sep 16, 2022 · e784666 · e784666
2 parents 6fd1811 + b096402
commit e784666
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 53 deletions.
diff --git a/components/_shared/carousel/card/Carousel.tsx b/components/_shared/carousel/card/Carousel.tsx
@@ -25,10 +25,19 @@ interface Item {
 const Carousel: React.FC<{
   items: Item[];
   itemOnClick: (item: any) => any;
-}> = ({ items, itemOnClick }) => {
+  color?: string;
+}> = ({ items, itemOnClick, color }) => {
   const prevEl = '.nav-prev-button';
   const nextEl = '.nav-next-button';
 
+  let css;
+  if (color) {
+    css = `
+    .swiper-bullet-active {
+      background: ${color} !important;
+    }`;
+  }
+
   return (
     <>
       <div className="relative">
@@ -86,6 +95,7 @@ const Carousel: React.FC<{
             </SwiperSlide>
           ))}
         </Swiper>
+        <style>{css}</style>
         <div className="pagination text-center" />
       </div>
     </>

diff --git a/components/_shared/carousel/icon_card/Carousel.tsx b/components/_shared/carousel/icon_card/Carousel.tsx
@@ -22,18 +22,22 @@ interface CarouselProps {
   active: { name: string };
   itemOnClick: (item: any) => any;
   identifier: string;
+  maxItems?: number;
 }
 
 const Carousel: React.FC<CarouselProps> = ({
   items,
   active,
   itemOnClick,
   identifier,
+  maxItems,
 }) => {
   const prevEl = `.nav-prev-button${identifier ? '--' + identifier : ''}`;
   const nextEl = `.nav-next-button${identifier ? '--' + identifier : ''}`;
   const [swiper, setSwiper] = useState(null);
 
+  if (!maxItems || maxItems < 8) maxItems = 10;
+
   return (
     <div className="group relative">
       {items.length > 10 && (
@@ -60,20 +64,20 @@ const Carousel: React.FC<CarouselProps> = ({
         onSwiper={(instance) => setSwiper(instance)}
         breakpoints={{
           1: {
-            slidesPerView: 3,
-            slidesPerGroup: 3,
+            slidesPerView: maxItems - 7,
+            slidesPerGroup: maxItems - 7,
           },
           460: {
-            slidesPerView: 4,
-            slidesPerGroup: 4,
+            slidesPerView: maxItems - 6,
+            slidesPerGroup: maxItems - 6,
           },
           720: {
-            slidesPerView: 6,
-            slidesPerGroup: 6,
+            slidesPerView: maxItems - 4,
+            slidesPerGroup: maxItems - 4,
           },
           1200: {
-            slidesPerView: 10,
-            slidesPerGroup: 10,
+            slidesPerView: maxItems,
+            slidesPerGroup: maxItems,
           },
         }}
         initialSlide={items.findIndex((item) => item.name == active.name)}
@@ -88,6 +92,7 @@ const Carousel: React.FC<CarouselProps> = ({
         {items.map((item, index) => (
           <SwiperSlide key={index}>
             <a
+              title={item.title}
               href={item.link}
               onClick={(e) => {
                 const slidesPerView = swiper.params.slidesPerView;

diff --git a/components/_shared/carousel/icon_card/IconCard.tsx b/components/_shared/carousel/icon_card/IconCard.tsx
@@ -39,7 +39,7 @@ const IconCard: React.FC<IconCardProps> = ({
           />
         </div>
         <h3
-          className="font-avenir font-medium text-md text-center mt-4"
+          className="font-avenir font-medium text-md text-center mt-4 line-clamp-2"
           style={style}
         >
           {title}

diff --git a/components/_shared/image_header/Badge.tsx b/components/_shared/image_header/Badge.tsx
@@ -1,7 +1,17 @@
-const Badge: React.FC<{ text: string }> = ({ text }) => {
+const Badge: React.FC<{ text: string; color?: string }> = ({
+  text,
+  color,
+}) => {
   return (
     <>
-      <span className="bg-[#80E47E]  px-6  py-2  rounded-full">{text}</span>
+      <span
+        className={`px-6  py-2  rounded-full font-medium ${
+          color ? 'text-white' : ''
+        }`}
+        style={{ backgroundColor: color || '#80E47E' }}
+      >
+        {text}
+      </span>
     </>
   );
 };

diff --git a/components/_shared/image_header/ImageHeader.tsx b/components/_shared/image_header/ImageHeader.tsx
@@ -70,15 +70,17 @@ const ImageHeader: React.FC<ImageHeaderProps> = ({
              w-[calc(100%+5rem)] xl:w-[calc(100%+10rem)]
            `}
             >
-              <div className="pt-[3rem] flex flex-col h-full">
-                <Title icon={icon} color={color}>
-                  {title}
-                </Title>
-                <p className="mb-8 w-full 2xl:w-[85%] text-[#7C7C7C] line-clamp-5 ">
-                  {children}
-                </p>
-                <div className="mb-8">
-                  <Badge text={badgeText} />
+              <div className="pt-[3rem] flex flex-col h-full justify-between">
+                <div className="h-[13em]">
+                  <Title icon={icon} color={color}>
+                    {title}
+                  </Title>
+                  <p className="w-full 2xl:w-[85%] text-[#7C7C7C] line-clamp-5 ">
+                    {children}
+                  </p>
+                </div>
+                <div className="pb-[3rem]">
+                  <Badge text={badgeText} color={color} />
                 </div>
               </div>
             </div>

diff --git a/components/_shared/image_header/Title.tsx b/components/_shared/image_header/Title.tsx
@@ -4,7 +4,7 @@ const Title: React.FC<any> = ({ icon, color, children }) => {
   return (
     <>
       <h1
-        className="text-2xl sm:text-3xl font-avenir font-extrabold flex mb-6 h-[2em]"
+        className="text-2xl sm:text-3xl font-avenir font-extrabold flex mb-6"
         style={{ color: color || '#22B373' }}
       >
         {icon?.url && (

diff --git a/components/dataset/SimilarDatasets.tsx b/components/dataset/SimilarDatasets.tsx
@@ -104,7 +104,7 @@ export default function SimilarDatasets({ variables }) {
                   className="group"
                 >
                   <div className="relative w-full bg-gray-200 rounded-lg overflow-hidden w-4/5">
-                    <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
+                    <span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-l z-10" />
                     <div className="min-h-[12vw]">
                       <img
                         src={
@@ -118,7 +118,7 @@ export default function SimilarDatasets({ variables }) {
                         className="w-full h-full object-center object-scale-down rounded-xl"
                       />
                     </div>
-                    <p className="absolute bottom-0 left-0 transition-all w-full p-4 text-sm text-white leading-4 font-avenir font-semibold group-hover:bg-slate-200 group-hover:opacity-75  group-hover:text-black">
+                    <p className="absolute bottom-0 left-0 transition-all w-full p-4 text-sm text-white leading-4 font-avenir font-semibold bg-slate-200 opacity-75 text-black group-hover:opacity-90">
                       {item.title}
                     </p>
                   </div>

diff --git a/components/home/main/News.tsx b/components/home/main/News.tsx
@@ -21,10 +21,21 @@ export default function News() {
 
   const { posts } = data.posts;
 
-  //  TODO: ideally it would display the latest  posts
-  //  or the best rated ones. Also, the error handling
-  //  was done quickly just to get  the  page  working
-  //  and could be better written.
+  const headline = (text) => {
+    return (
+      <p
+        className="absolute bottom-0 
+        p-8 py-2 inset-x-0 line-clamp-2 
+        text-lg font-avenir font-medium text-[#464646] group-hover:text-black
+        bg-slate-200 opacity-75 group-hover:opacity-90 
+        transition-all leading-snug
+      "
+      >
+        {text}
+      </p>
+    );
+  };
+
   return (
     <>
       <h2 className="block text-3xl text-center font-avenir font-extrabold">
@@ -40,9 +51,10 @@ export default function News() {
               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-full">
-                <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
+                <span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
                 {posts[0] ? (
                   <img
                     alt={posts[0]?.title}
@@ -52,9 +64,7 @@ export default function News() {
                 ) : (
                   <div className="w-full h-full" />
                 )}
-                <p className="absolute p-8 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
-                  {posts[0]?.title}
-                </p>
+                {headline(posts[0]?.title)}
               </div>
             </a>
           </div>
@@ -63,10 +73,11 @@ export default function News() {
               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">
                 <span
-                  className={`absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 ${
+                  className={`absolute left-0 bottom-0 w-full h-full border-b-4 ${
                     posts[1] ? 'border-[#22B373]' : ''
                   } rounded-b-lg z-10`}
                 />
@@ -79,18 +90,17 @@ export default function News() {
                 ) : (
                   <div className="w-full h-36" />
                 )}
-                <p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
-                  {posts[1]?.title}
-                </p>
+                {headline(posts[1]?.title)}
               </div>
             </a>
             <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">
-                <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
+                <span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
                 {posts[2] ? (
                   <img
                     alt={posts[2]?.title}
@@ -100,9 +110,7 @@ export default function News() {
                 ) : (
                   <div className="w-full h-60" />
                 )}
-                <p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
-                  {posts[2]?.title}
-                </p>
+                {headline(posts[2]?.title)}
               </div>
             </a>
           </div>
@@ -111,9 +119,10 @@ export default function News() {
               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">
-                <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
+                <span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
                 {posts[3] ? (
                   <img
                     alt={posts[3]?.title}
@@ -123,18 +132,17 @@ export default function News() {
                 ) : (
                   <div className="w-full h-60" />
                 )}
-                <p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
-                  {posts[3]?.title}
-                </p>
+                {headline(posts[3]?.title)}
               </div>
             </a>
             <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">
-                <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-lg z-10" />
+                <span className="absolute left-0 bottom-0 w-full h-full border-b-4 border-[#22B373] rounded-b-lg z-10" />
                 {posts[4] ? (
                   <img
                     alt={posts[4]?.title}
@@ -144,9 +152,7 @@ export default function News() {
                 ) : (
                   <div className="w-full h-36" />
                 )}
-                <p className="absolute px-8 py-4 bottom-0 inset-x-0 text-white text-xl leading-9 font-avenir font-medium group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black">
-                  {posts[4]?.title}
-                </p>
+                {headline(posts[3]?.title)}
               </div>
             </a>
           </div>

diff --git a/components/organization/OrgsCarousel.tsx b/components/organization/OrgsCarousel.tsx
@@ -20,6 +20,7 @@ const OrgsCarousel: React.FC<any> = ({ orgs, active, orgOnClick }) => {
         active={active}
         itemOnClick={orgOnClick}
         identifier="orgs-carousel"
+        maxItems={9}
       />
     </>
   );

diff --git a/components/topic/MainOptions.tsx b/components/topic/MainOptions.tsx
@@ -152,13 +152,15 @@ const MainOptions: React.FC<any> = ({
   fixTranslations(activeTopic);
   subtopics.forEach((subtopic) => fixTranslations(subtopic));
 
+  const color = configs?.filter((el) => el.name == topic)[0]?.color;
+
   return (
     <>
       <div className="mb-20" id="header">
         <TopicHeader
           topic={activeTopic}
           datasetsCount={activeTopic.package_count}
-          color={configs?.filter((el) => el.name == topic)[0]?.color}
+          color={color}
         />
       </div>
       {subtopics?.length > 0 && (
@@ -167,6 +169,7 @@ const MainOptions: React.FC<any> = ({
           <SubtopicsCarousel
             subtopics={subtopics}
             subtopicOnClick={onSutopicClick}
+            color={color}
           />
         </div>
       )}

diff --git a/components/topic/SubtopicsCarousel.tsx b/components/topic/SubtopicsCarousel.tsx
@@ -1,6 +1,10 @@
 import Carousel from '../_shared/carousel/card/Carousel';
 
-const SubtopicsCarousel: React.FC<any> = ({ subtopics, subtopicOnClick }) => {
+const SubtopicsCarousel: React.FC<any> = ({
+  subtopics,
+  subtopicOnClick,
+  color,
+}) => {
   const items = subtopics.map((subtopic) => {
     return {
       name: subtopic.name,
@@ -22,7 +26,7 @@ const SubtopicsCarousel: React.FC<any> = ({ subtopics, subtopicOnClick }) => {
 
   return (
     <>
-      <Carousel items={items} itemOnClick={subtopicOnClick} />
+      <Carousel color={color} items={items} itemOnClick={subtopicOnClick} />
     </>
   );
 };

diff --git a/locales/ar/common.json b/locales/ar/common.json
@@ -11,7 +11,7 @@
   "opendata-h": "البيانات المفتوحة 101",
   "opendata-p": "تعرف على المزيد حول ماهية البيانات المفتوحة وكيفية استخدامها والأشياء الرئيسية الأخرى التي تحتاج إلى معرفتها.",
   "opendata-a": "عد إلى الأعلى",
-  "ds-h-sear": "بيانات البحث",
+  "ds-h-sear": "ابحث عن مجموعات البيانات",
   "ds-bt-searc": "البحث عن طريق الكلمات الرئيسية",
   "ds-p-filt": "مصنف بواسطة",
   "ds-bt-topi": "المواضيع",

diff --git a/locales/en/common.json b/locales/en/common.json
@@ -11,7 +11,7 @@
   "opendata-h": "Open Data 101",
   "opendata-p": "Learn more about what open data is, how to use it and other key things you need to know.",
   "opendata-a": "Go back to top",
-  "ds-h-sear": "Search Data",
+  "ds-h-sear": "Search Datasets",
   "ds-bt-searc": "Search by keyword",
   "ds-p-filt": "Filter By",
   "ds-bt-topi": "Topics",
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,7 @@ const IconCard: React.FC<IconCardProps> = ({ @@
               />
             </div>
             <h3
-              className="font-avenir font-medium text-md text-center mt-4"
+              className="font-avenir font-medium text-md text-center mt-4 line-clamp-2"
               style={style}
             >
               {title}
@@ Expand Down @@