forgot the project name

reearth · Oct 2, 2024 · 3a44c31 · 3a44c31
1 parent f121442
commit 3a44c31
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectGridViewItem.tsx
@@ -33,6 +33,9 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
       />
       <CardFooter>
         {hasMapOrStoryPublished && <PublishStatus />}
+        <CardTitleWrapper>
+          <CardTitle>{project.name}</CardTitle>
+        </CardTitleWrapper>
         <PopupMenu
           menu={popupMenu}
           label={
@@ -84,3 +87,21 @@ const PublishStatus = styled("div")(({ theme }) => ({
   borderRadius: "50%",
   background: theme.publish.main
 }));
+
+const CardTitleWrapper = styled("div")(() => ({
+  flex: 1
+}));
+
+const CardTitle = styled("div")(({ theme }) => ({
+  flex: "1",
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  cursor: "pointer"
+}));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectListViewItem.tsx
@@ -45,6 +45,9 @@ const ProjectListViewItem: FC<ProjectProps> = ({
           <ProjectImage backgroundImage={project.imageUrl} />
         </ActionWrapper>
       </ThumbnailCol>
+      <ProjectNameCol>
+        <TitleWrapper>{project.name}</TitleWrapper>
+      </ProjectNameCol>
       <TimeCol>
         <Typography size="body">{UpdatedAt}</Typography>
       </TimeCol>
@@ -114,3 +117,24 @@ const ActionCol = styled("div")(() => ({
   flex: "0 0 10%",
   flexShrink: 0
 }));
+
+const ProjectNameCol = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  flex: 1,
+  flexShrink: 0
+}));
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  cursor: "pointer",
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));