fix(Commons): text truncation improvements

LibreTexts · May 31, 2024 · fbb7a30 · fbb7a30
1 parent 177fcfb
commit fbb7a30
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 71 deletions.
diff --git a/client/src/components/commons/Commons.css b/client/src/components/commons/Commons.css
@@ -248,7 +248,7 @@
 }
 
 .commons-author-card {
-    height: 175px;
+    height: 200px;
     width: 250px;
     margin: 0 !important;
     text-overflow: ellipsis;

diff --git a/client/src/components/commons/CommonsCatalog/CatalogCard/AuthorCardContent.tsx b/client/src/components/commons/CommonsCatalog/CatalogCard/AuthorCardContent.tsx
@@ -1,11 +1,5 @@
-import {
-  Card,
-  CardContentProps,
-  CardHeader,
-  CardMeta,
-  Icon,
-} from "semantic-ui-react";
-import { Author, ConductorSearchResponseAuthor } from "../../../../types";
+import { Card, CardContentProps, CardHeader } from "semantic-ui-react";
+import { ConductorSearchResponseAuthor } from "../../../../types";
 import { truncateString } from "../../../util/HelperFunctions";
 import { useMemo } from "react";
 import CardMetaWIcon from "../../../util/CardMetaWIcon";
@@ -37,7 +31,7 @@ const AuthorCardContent: React.FC<AuthorCardContentProps> = ({
       </CardHeader>
       {author.primaryInstitution && (
         <CardMetaWIcon icon="university">
-          {author.primaryInstitution ?? ""}
+          <div className="line-clamp-1">{author.primaryInstitution ?? ""}</div>
         </CardMetaWIcon>
       )}
       {author.email && (
@@ -49,27 +43,36 @@ const AuthorCardContent: React.FC<AuthorCardContentProps> = ({
       )}
       {author.projects?.length > 0 && (
         <CardMetaWIcon icon="wrench">
-          {author.projects.map((p, idx) => (
-            <a
-              href={`/commons-project/${p.projectID}`}
-              key={p.projectID}
-              className="hover:underline cursor-pointer !text-blue-500 !hover:text-blue-500"
-            >
-              {`${p.title}${author.projects.length > 1 && idx !== author.projects.length - 1 ? ", " : ""}`}
-            </a>
-          ))}
+          <div className="line-clamp-2">
+            {author.projects.map((p, idx) => (
+              <a
+                href={`/commons-project/${p.projectID}`}
+                key={p.projectID}
+                className="hover:underline cursor-pointer !text-blue-500 !hover:text-blue-500"
+              >
+                {`${p.title}${
+                  author.projects.length > 1 &&
+                  idx !== author.projects.length - 1
+                    ? ", "
+                    : ""
+                }`}
+              </a>
+            ))}
+          </div>
         </CardMetaWIcon>
       )}
       {author.url && (
         <CardMetaWIcon icon="linkify">
-          <a
-            href={author.url}
-            target="_blank"
-            rel="noreferrer"
-            className="break-all !text-blue-500 !hover:text-blue-500"
-          >
-            {truncateString(author.url, 60)}
-          </a>
+          <div className="line-clamp-2">
+            <a
+              href={author.url}
+              target="_blank"
+              rel="noreferrer"
+              className="break-all !text-blue-500 !hover:text-blue-500"
+            >
+              {author.url}
+            </a>
+          </div>
         </CardMetaWIcon>
       )}
     </Card.Content>

diff --git a/client/src/components/commons/CommonsCatalog/CatalogCard/FileCardContent.tsx b/client/src/components/commons/CommonsCatalog/CatalogCard/FileCardContent.tsx
@@ -67,14 +67,14 @@ const FileCardContent: React.FC<FileCardContentProps> = ({ file, ...rest }) => {
         className="commons-content-card-header !mt-1 !mb-1 text-left hover:underline cursor-pointer hover:!text-blue-500 break-all"
         onClick={() => handleFileDownload(file)}
       >
-        {truncateString(file.name, 50)}
+        <div className="line-clamp-2">{file.name}</div>
       </Card.Header>
       <CardMetaWIcon icon="user">
         <Popup
           disabled={!prettyAuthors || prettyAuthors === "Unknown"} // Disable popup if no authors
           trigger={<div>{truncateString(prettyAuthors, 50)}</div>}
           content={
-            <div>
+            <div className="line-clamp-2">
               <p>{allAuthors}</p>
             </div>
           }
@@ -121,10 +121,10 @@ const FileCardContent: React.FC<FileCardContentProps> = ({ file, ...rest }) => {
       <CardMetaWIcon icon="clipboard list">
         <Popup
           trigger={
-            <div>
+            <div className="line-clamp-1">
               {file.projectInfo.title ? (
                 <a href={`/commons-project/${file.projectID}`} target="_blank">
-                  {truncateString(file.projectInfo.title, 30)}
+                  {file.projectInfo.title}
                 </a>
               ) : (
                 "Unknown Project"
@@ -148,29 +148,29 @@ const FileCardContent: React.FC<FileCardContentProps> = ({ file, ...rest }) => {
       </CardMetaWIcon>
       {!file.isURL && file.storageType === "file" && (
         <CardMetaWIcon icon={getFileTypeIcon(file)}>
-          {truncateString(file.mimeType ?? "", 30)}
+          <div className="line-clamp-1">{file.mimeType ?? ""}</div>
         </CardMetaWIcon>
       )}
       <Card.Description className="overflow-hidden !mt-1">
-        <p className="commons-content-card-author !mb-0">
-          {file.description
-            ? truncateString(file.description, 50)
-            : "No description provided"}
-        </p>
-        <div className="max-h-14 overflow-hidden mt-1">
-          <RenderAssetTags
-            file={file}
-            max={4}
-            showNoTagsMessage={false}
-            size="small"
-            basic={true}
-            spreadArray
-          />
-        </div>
-        <div className="absolute bottom-0 right-0 pb-3 pr-2">
-          {loading && <Icon loading name="spinner" size="large" />}
+        <div className="line-clamp-3">
+          <p className="commons-content-card-author !mb-0">
+            {file.description ? file.description : "No description provided"}
+          </p>
         </div>
       </Card.Description>
+      <div className="max-h-20 overflow-hidden mt-1">
+        <RenderAssetTags
+          file={file}
+          max={4}
+          showNoTagsMessage={false}
+          size="small"
+          basic={true}
+          spreadArray
+        />
+      </div>
+      <div className="absolute bottom-0 right-0 pb-3 pr-2">
+        {loading && <Icon loading name="spinner" size="large" />}
+      </div>
     </Card.Content>
   );
 };

diff --git a/client/src/components/commons/CommonsCatalog/CatalogCard/ProjectCardContent.tsx b/client/src/components/commons/CommonsCatalog/CatalogCard/ProjectCardContent.tsx
@@ -62,34 +62,40 @@ const ProjectCardContent: React.FC<ProjectCardContentProps> = ({
         </div>
       )}
       <Card.Header as="h3" className="commons-content-card-header !mt-4">
-        {truncateString(project.title, 50)}
+        <div className="line-clamp-2">{project.title}</div>
       </Card.Header>
-      <p className="text-black">
-        <strong>Description: </strong>
-        {project?.description
-          ? truncateString(project.description, 150)
-          : "No description available."}
-      </p>
-      <CardMetaWIcon icon="user">{truncateString(piText, 85)}</CardMetaWIcon>
+      <div className="line-clamp-5 mb-1">
+        <p className="text-black">
+          <strong>Description: </strong>
+          {project?.description
+            ? project.description
+            : "No description available."}
+        </p>
+      </div>
+      <CardMetaWIcon icon="user">
+        <div className="line-clamp-1">{piText}</div>
+      </CardMetaWIcon>
       <CardMetaWIcon icon="user plus">
-        {truncateString(coPIText, 75)}
+        <div className="line-clamp-2">{coPIText}</div>
       </CardMetaWIcon>
       <CardMetaWIcon icon="university">
-        {truncateString(associatedOrgText, 60)}
+        <div className="line-clamp-1">{associatedOrgText}</div>
       </CardMetaWIcon>
       <CardMetaWIcon icon="linkify">
-        {project.projectURL ? (
-          <a
-            href={project.projectURL}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="!text-blue-500 break-all"
-          >
-            {truncateString(project.projectURL, 50)}
-          </a>
-        ) : (
-          "No URL Specified"
-        )}
+        <div className="line-clamp-2">
+          {project.projectURL ? (
+            <a
+              href={project.projectURL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="!text-blue-500 break-all"
+            >
+              {project.projectURL}
+            </a>
+          ) : (
+            "No URL Specified"
+          )}
+        </div>
       </CardMetaWIcon>
       {project.contentArea && org.orgID == "calearninglab" && (
         <CardMetaWIcon icon="content">