fixed project card styling

PrathamLalwani · Nov 27, 2023 · fb6ad8f · fb6ad8f
1 parent 7dd91a9
commit fb6ad8f
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/src/assets/ProjectPictures/Portfolio-min.png b/src/assets/ProjectPictures/Portfolio-min.png
diff --git a/src/components/Project.tsx b/src/components/Project.tsx
@@ -1,6 +1,6 @@
 /// <reference types="vite-plugin-svgr/client" />
 
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import SvgIcon from "./SvgIcon";
 type Props = {
   children?: React.ReactNode;
@@ -15,9 +15,30 @@ type Props = {
 const Project = (props: Props) => {
   const getImgUrl = (name: string) =>
     new URL(`../assets/ProjectPictures/${name}`, import.meta.url).href;
+  const [overflowActive, setOverflowActive] = useState<boolean>(false);
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const overflowingText = useRef<HTMLSpanElement | null>(null);
+  const checkOverflow = (textContainer: HTMLSpanElement | null): boolean => {
+    if (textContainer)
+      return (
+        textContainer.offsetHeight < textContainer.scrollHeight ||
+        textContainer.offsetWidth < textContainer.scrollWidth
+      );
+    return false;
+  };
+  const onShowMore = () => {
+    setShowMore((prev) => !prev);
+  };
+  useEffect(() => {
+    if (checkOverflow(overflowingText.current)) {
+      setOverflowActive(true);
+      return;
+    }
+    setOverflowActive(false);
+  }, [overflowActive]);
 
   return (
-    <div className="m-5 flex h-full w-fit flex-col items-center rounded-2xl border-2 border-slate-400/50 bg-background-50 bg-opacity-10 px-3 py-5 backdrop-blur-md transition-all ease-in-out sm:p-5 md:items-start">
+    <div className="m-5 flex h-full w-max flex-col items-center rounded-2xl border-2 border-slate-400/50 bg-background-50 bg-opacity-10 px-3 py-5 backdrop-blur-md transition-all ease-in-out sm:p-5 md:items-start">
       <div className="h-52 w-52 shrink-0 rounded-md sm:h-64 sm:w-64 md:h-96 md:w-96 ">
         <img
           src={getImgUrl(props.img_path)}
@@ -27,9 +48,27 @@ const Project = (props: Props) => {
       </div>
       <div className="flex w-52 flex-col sm:w-64 md:w-96">
         <h4 className="my-2 text-xl text-primary">{props.projectName}</h4>
-        <p className="py-2 text-sm text-text sm:text-base">
-          {props.description}
-        </p>
+        <div className="my-2 py-2">
+          {" "}
+          <span
+            ref={overflowingText}
+            className={`relative line-clamp-2 w-full overflow-hidden overflow-ellipsis text-sm leading-6 text-text sm:text-base ${
+              showMore
+                ? "line-clamp-none h-fit overflow-visible"
+                : overflowActive
+                ? "h-12"
+                : "h-16"
+            }`}
+          >
+            {props.description}
+          </span>
+          {!showMore && !overflowActive ? null : (
+            <button className="text-accent" onClick={onShowMore}>
+              {showMore ? "Show less" : "Show more"}
+            </button>
+          )}
+        </div>
+
         <h5 className="text-l text-primary">Tech Stack</h5>
         <ul className="flex flex-wrap">
           {props.techStack.map((tech) => (

diff --git a/src/components/ProjectSection.tsx b/src/components/ProjectSection.tsx
@@ -8,7 +8,7 @@ const ProjectSection = () => {
     <Element name="Projects">
       <section className="h-max">
         <h2 className="mb-12 text-5xl font-bold text-text">Projects</h2>
-        <div className="flex h-full flex-row flex-wrap">
+        <div className="flex h-max flex-row flex-wrap">
           {ProjectData.map((project) => {
             return (
               <Project