From cdc347481527ab444e8d35eb788721a56811e699 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=F0=9F=A6=92?= Date: Sat, 2 Apr 2022 07:26:31 -0500 Subject: [PATCH 1/5] Add component for dashboard project thumbnails --- components/thumbnail-image.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 components/thumbnail-image.js diff --git a/components/thumbnail-image.js b/components/thumbnail-image.js new file mode 100644 index 0000000..0a4b8eb --- /dev/null +++ b/components/thumbnail-image.js @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +const ThumbnailImage = styled.img` + max-height: 200px; + display: block; +`; + +export default ThumbnailImage; From bb2b7b709900604f2c1adc0feb3ee589ed094308 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=F0=9F=A6=92?= Date: Sat, 2 Apr 2022 07:27:50 -0500 Subject: [PATCH 2/5] Add project thumbnails --- pages/projects.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/pages/projects.js b/pages/projects.js index f3eabfe..129a987 100644 --- a/pages/projects.js +++ b/pages/projects.js @@ -3,8 +3,9 @@ import Router from "next/router"; import styled from "styled-components"; import { useEffect, useState } from "react"; import { PageTitle } from "../lib/common-style"; -import { makeApiRequest } from "../lib/api"; +import { makeApiRequest, API_BASE } from "../lib/api"; import SubmitButton from "../components/submit-button"; +import ThumbnailImage from "../components/thumbnail-image"; const ProjectsContainer = styled.div` display: grid; @@ -34,6 +35,7 @@ class MembershipStatus { const ProjectPreview = ({ project }) => { + const initialMembershipStatus = () => { if (typeof project.joined === "boolean") { return project.joined ? MembershipStatus.Joined : MembershipStatus.NotJoined; @@ -80,10 +82,18 @@ const ProjectPreview = ({ project }) => { } } + const [removeImage, setRemoveImage] = useState(false); + return (

{project.name || "Unnamed Project"}

- {typeof membershipStatus === "object" && ( + {!removeImage && ( + setRemoveImage(true)} + /> + )} + {typeof membershipStatus !== MembershipStatus.Unknown && (

Membership Status: {`${membershipStatus.text}`}

)} {typeof project.members === "number" && ( From 9f055327b1d37cc1344af7c552dd0e4b7cac6d5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=F0=9F=A6=92?= Date: Sat, 2 Apr 2022 08:58:36 -0500 Subject: [PATCH 3/5] Rearrange join/leave button UI --- components/submit-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/submit-button.js b/components/submit-button.js index 5f33601..ae0903c 100644 --- a/components/submit-button.js +++ b/components/submit-button.js @@ -3,9 +3,9 @@ import styled from "styled-components"; const StyledInput = styled.input` border: 1px solid ${(props) => props.theme.colors.primary}; border-radius: 2px; - margin: 10px 0; padding: 10px; display: block; + float: right; `; const SubmitButton = styled(StyledInput)` From 947807605b5311190ca7ae31bb6d99fd9a13fbdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=F0=9F=A6=92?= Date: Sat, 2 Apr 2022 08:59:04 -0500 Subject: [PATCH 4/5] Make thumbnail component more responsive --- components/thumbnail-image.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/thumbnail-image.js b/components/thumbnail-image.js index 0a4b8eb..f4620fe 100644 --- a/components/thumbnail-image.js +++ b/components/thumbnail-image.js @@ -1,8 +1,14 @@ import styled from "styled-components"; const ThumbnailImage = styled.img` - max-height: 200px; display: block; + margin-bottom: 10px; + + width: 100%; + height: 300px; + object-fit: contain; + + image-rendering: pixelated; `; export default ThumbnailImage; From e524242821159df6fa7bcc3b2711c0167e830c9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=F0=9F=A6=92?= Date: Sat, 2 Apr 2022 08:59:44 -0500 Subject: [PATCH 5/5] Make project layout much more responsive --- pages/projects.js | 66 +++++++++++++++++++++++++++++------------------ 1 file changed, 41 insertions(+), 25 deletions(-) diff --git a/pages/projects.js b/pages/projects.js index 129a987..a26fbf5 100644 --- a/pages/projects.js +++ b/pages/projects.js @@ -9,11 +9,14 @@ import ThumbnailImage from "../components/thumbnail-image"; const ProjectsContainer = styled.div` display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; `; const ProjectCard = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; padding: 12px; font-size: 1.1em; @@ -21,15 +24,22 @@ const ProjectCard = styled.div` border-radius: 8px; `; +const ProjectDetails = styled.div` + width: 50%; + float: left; + margin-top: auto; +`; + class MembershipStatus { - static Joining = new MembershipStatus("Joining..."); - static Joined = new MembershipStatus("Joined"); - static Leaving = new MembershipStatus("Leaving..."); - static NotJoined = new MembershipStatus("Not Joined"); - static Unknown = new MembershipStatus("Unknown"); + static Joining = new MembershipStatus("Joining...", "🔃"); + static Joined = new MembershipStatus("Joined", "✅"); + static Leaving = new MembershipStatus("Leaving...", "🔃"); + static NotJoined = new MembershipStatus("Not Joined", "❌"); + static Unknown = new MembershipStatus("Unknown", "❔"); - constructor(text) { + constructor(text, emoji) { this.text = text; + this.emoji = emoji; } } @@ -93,24 +103,30 @@ const ProjectPreview = ({ project }) => { onError={() => setRemoveImage(true)} /> )} - {typeof membershipStatus !== MembershipStatus.Unknown && ( -

Membership Status: {`${membershipStatus.text}`}

- )} - {typeof project.members === "number" && ( -

{project.members} members

- )} - {typeof membershipStatus !== MembershipStatus.Unknown && ( -
- - - )} +
+ + {typeof membershipStatus !== MembershipStatus.Unknown && ( +

Joined: {`${membershipStatus.emoji}`}

+ )} + {typeof project.members === "number" && ( +

{project.members} members

+ )} + + {typeof membershipStatus !== MembershipStatus.Unknown && ( +
+ + + )} +
); };