Skip to content

Add dashboard thumbnails #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Add dashboard thumbnails #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cdc3474
Add component for dashboard project thumbnails
Melissa0x1f992 Apr 2, 2022
bb2b7b7
Add project thumbnails
Melissa0x1f992 Apr 2, 2022
9f05532
Rearrange join/leave button UI
Melissa0x1f992 Apr 2, 2022
9478076
Make thumbnail component more responsive
Melissa0x1f992 Apr 2, 2022
e524242
Make project layout much more responsive
Melissa0x1f992 Apr 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/submit-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand Down
14 changes: 14 additions & 0 deletions components/thumbnail-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import styled from "styled-components";

const ThumbnailImage = styled.img`
display: block;
margin-bottom: 10px;

width: 100%;
height: 300px;
object-fit: contain;

image-rendering: pixelated;
`;

export default ThumbnailImage;
76 changes: 51 additions & 25 deletions pages/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,49 @@ 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;
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;

background: ${(props) => props.theme.colors.backgroundMuted};
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", "❔");
Comment on lines +34 to +38
Copy link
Member

@haykam821 haykam821 Apr 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could Font Awesome icons be used instead of emojis here?


constructor(text) {
constructor(text, emoji) {
this.text = text;
this.emoji = emoji;
}
}

const ProjectPreview = ({ project }) => {


const initialMembershipStatus = () => {
if (typeof project.joined === "boolean") {
return project.joined ? MembershipStatus.Joined : MembershipStatus.NotJoined;
Expand Down Expand Up @@ -80,27 +92,41 @@ const ProjectPreview = ({ project }) => {
}
}

const [removeImage, setRemoveImage] = useState(false);

return (
<ProjectCard>
<h3>{project.name || "Unnamed Project"}</h3>
{typeof membershipStatus === "object" && (
<p>Membership Status: {`${membershipStatus.text}`}</p>
)}
{typeof project.members === "number" && (
<p>{project.members} members</p>
)}
{typeof membershipStatus !== MembershipStatus.Unknown && (
<form onSubmit={membershipStatus === MembershipStatus.Joined ? leaveProject : joinProject}>
<SubmitButton
type="submit"
value={
membershipStatus === MembershipStatus.Joined ? "Leave" :
membershipStatus === MembershipStatus.NotJoined ? "Join" :
"Error"
}
/>
</form>
{!removeImage && (
<ThumbnailImage
src={`${API_BASE}/y22/projects/${project.uuid}/bitmap`}
onError={() => setRemoveImage(true)}
/>
)}
<div>
<ProjectDetails>
{typeof membershipStatus !== MembershipStatus.Unknown && (
<p>Joined: {`${membershipStatus.emoji}`}</p>
)}
{typeof project.members === "number" && (
<p>{project.members} members</p>
)}
</ProjectDetails>
{typeof membershipStatus !== MembershipStatus.Unknown && (
<form onSubmit={membershipStatus === MembershipStatus.Joined ? leaveProject : joinProject}>
<SubmitButton
type="submit"
value={
membershipStatus === MembershipStatus.Joined ? "➖ Leave" :
membershipStatus === MembershipStatus.Joining ? "➕ Joining..." :
membershipStatus === MembershipStatus.NotJoined ? "➕ Join" :
membershipStatus === MembershipStatus.Leaving ? "➖ Leaving..." :
"Error"
Comment on lines +120 to +124
Copy link
Member

@haykam821 haykam821 Apr 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These values could be stored in the MembershipStatus instances.

}
/>
</form>
)}
</div>
</ProjectCard>
);
};
Expand Down