Skip to content

Commit

Permalink
Update cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevincharles
kevincharles committed Apr 12, 2023
1 parent 74e4ba3 commit 247daaa
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 186 deletions.
128 changes: 13 additions & 115 deletions src/Tools/_framework/Paths/Community.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React, { useState } from 'react';
import {
Avatar,
Badge,
Box,
Image,
Icon,
Tab,
TabList,
Expand All @@ -18,8 +16,10 @@ import { useLoaderData } from 'react-router';
import styled from 'styled-components';
import { Carousel } from '../../../_reactComponents/PanelHeaderComponents/Carousel';
import Searchbar from '../../../_reactComponents/PanelHeaderComponents/SearchBar';
import { Form, Link } from 'react-router-dom';
import { Form } from 'react-router-dom';
import { RiEmotionSadLine } from 'react-icons/ri';
import ActivityCard from '../../../_reactComponents/PanelHeaderComponents/ActivityCard';
import AuthorCard from '../../../_reactComponents/PanelHeaderComponents/AuthorCard';

export async function loader({ request }) {
const url = new URL(request.url);
Expand All @@ -36,114 +36,6 @@ export async function loader({ request }) {
}
}

function ActivityCard({ doenetId, imagePath, label, fullName }) {
if (!imagePath) {
imagePath = '/activity_default.jpg';
}
const activityLink = `/portfolioviewer/${doenetId}`;

return (
<Box
display="flex"
flexDirection="column"
height="180px"
width="180px"
background="black"
overflow="hidden"
margin="10px"
border="2px solid #949494"
borderRadius="6px"
>
<Box height="130px">
<Link to={activityLink}>
<Image
width="100%"
height="100%"
objectFit="contain"
src={imagePath}
alt="Activity Card"
/>
</Link>
</Box>
<Box
height="50px"
display="flex"
justifyContent="flex-start"
padding="2px"
color="black"
background="white"
>
<Box
width="40px"
display="flex"
alignContent="center"
justifyContent="center"
alignItems="center"
position="relative"
>
<Avatar size="sm" name={fullName} />
<Box position="absolute" width="100px" left="8px" bottom="0px">
<Text fontSize="10px">{fullName}</Text>
</Box>
</Box>
<Box>
<Text fontSize="sm" lineHeight="1" noOfLines={2}>
{label}
</Text>
</Box>
</Box>
</Box>
);
}

function AuthorCard({ fullName, portfolioCourseId }) {
// function AuthorCard({ doenetId, imagePath, label, fullName }) {

const authorLink = `/publicportfolio/${portfolioCourseId}`;

return (
<Box
display="flex"
flexDirection="column"
height="180px"
width="180px"
background="black"
overflow="hidden"
margin="10px"
border="2px solid #949494"
borderRadius="6px"
>
<Box
height="130px"
display="flex"
alignContent="center"
justifyContent="center"
alignItems="center"
>
<Link to={authorLink}>
<Avatar w="100px" h="100px" fontSize="60pt" name={fullName} />
</Link>
</Box>
<Box
height="50px"
display="flex"
padding="2px"
color="black"
background="white"
alignContent="center"
justifyContent="center"
alignItems="center"
>
<Box>
<Text fontSize="sm" lineHeight="1" noOfLines={2}>
{fullName}
</Text>
</Box>
</Box>
</Box>
);
}

function Heading(props) {
return (
<div
Expand Down Expand Up @@ -289,23 +181,26 @@ export function Community() {
{allMatches.map((itemObj) => {
if (itemObj?.type == 'activity') {
const { doenetId, imagePath, label, fullName } = itemObj;
const imageLink = `/portfolioviewer/${doenetId}`;

return (
<ActivityCard
key={doenetId}
doenetId={doenetId}
imageLink={imageLink}
imagePath={imagePath}
label={label}
fullName={fullName}
/>
);
} else if (itemObj?.type == 'author') {
const { courseId, firstName, lastName } = itemObj;
const imageLink = `/publicportfolio/${courseId}`;

return (
<AuthorCard
key={courseId}
fullName={`${firstName} ${lastName}`}
portfolioCourseId={courseId}
imageLink={imageLink}
/>
);
}
Expand Down Expand Up @@ -338,10 +233,12 @@ export function Community() {
{searchResults?.activities.map((activityObj) => {
const { doenetId, imagePath, label, fullName } = activityObj;
//{ activityLink, doenetId, imagePath, label, fullName }
const imageLink = `/portfolioviewer/${doenetId}`;

return (
<ActivityCard
key={doenetId}
doenetId={doenetId}
imageLink={imageLink}
imagePath={imagePath}
label={label}
fullName={fullName}
Expand Down Expand Up @@ -377,12 +274,13 @@ export function Community() {
{searchResults?.users.map((authorObj) => {
const { courseId, firstName, lastName } = authorObj;
// console.log("authorObj",authorObj)
const imageLink = `/publicportfolio/${courseId}`;

return (
<AuthorCard
key={courseId}
fullName={`${firstName} ${lastName}`}
portfolioCourseId={courseId}
imageLink={imageLink}
/>
);
})}
Expand Down
4 changes: 2 additions & 2 deletions src/Tools/_framework/Paths/PortfolioActivitySettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,8 @@ export function PortfolioActivitySettings() {

let image = await window.BrowserImageResizer.readAndCompressImage(file, {
quality: 0.9,
maxWidth: 176,
maxHeight: 127,
maxWidth: 350,
maxHeight: 253,
debug: true,
});
// const convertToBase64 = (blob) => {
Expand Down
128 changes: 67 additions & 61 deletions src/Tools/_framework/Paths/PublicPortfolio.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// import axios from 'axios';
import { Avatar, Box, Image, Text } from '@chakra-ui/react';
import { Avatar, Box, Image, Text, Wrap } from '@chakra-ui/react';
import React from 'react';
import {
redirect,
Expand All @@ -9,6 +9,7 @@ import {
Link,
} from 'react-router-dom';
import styled from 'styled-components';
import ActivityCard from '../../../_reactComponents/PanelHeaderComponents/ActivityCard';
// import Button from '../../../_reactComponents/PanelHeaderComponents/Button';

// export async function action() {
Expand Down Expand Up @@ -56,62 +57,62 @@ const CardsContainer = styled.div`
width: calc(100vw - 40px);
`;

function Card({ doenetId, imagePath, label, pageDoenetId, fullName }) {
const activityLink = `/portfolioviewer/${doenetId}`;
// function Card({ doenetId, imagePath, label, pageDoenetId, fullName }) {
// const activityLink = `/portfolioviewer/${doenetId}`;

return (
<Box
display="flex"
flexDirection="column"
height="180px"
width="180px"
background="black"
overflow="hidden"
margin="10px"
border="2px solid #949494"
borderRadius="6px"
>
<Box height="130px">
<Link to={activityLink}>
<Image
width="100%"
height="100%"
objectFit="contain"
src={imagePath}
alt="Activity Card"
/>
</Link>
</Box>
<Box
height="50px"
display="flex"
justifyContent="flex-start"
padding="2px"
color="black"
background="white"
>
<Box
width="40px"
display="flex"
alignContent="center"
justifyContent="center"
alignItems="center"
position="relative"
>
<Avatar size="sm" name={fullName} />
<Box position="absolute" width="100px" left="8px" bottom="0px">
<Text fontSize="10px">{fullName}</Text>
</Box>
</Box>
<Box>
<Text fontSize="sm" lineHeight="1" noOfLines={2}>
{label}
</Text>
</Box>
</Box>
</Box>
);
}
// return (
// <Box
// display="flex"
// flexDirection="column"
// height="180px"
// width="180px"
// background="black"
// overflow="hidden"
// margin="10px"
// border="2px solid #949494"
// borderRadius="6px"
// >
// <Box height="130px">
// <Link to={activityLink}>
// <Image
// width="100%"
// height="100%"
// objectFit="contain"
// src={imagePath}
// alt="Activity Card"
// />
// </Link>
// </Box>
// <Box
// height="50px"
// display="flex"
// justifyContent="flex-start"
// padding="2px"
// color="black"
// background="white"
// >
// <Box
// width="40px"
// display="flex"
// alignContent="center"
// justifyContent="center"
// alignItems="center"
// position="relative"
// >
// <Avatar size="sm" name={fullName} />
// <Box position="absolute" width="100px" left="8px" bottom="0px">
// <Text fontSize="10px">{fullName}</Text>
// </Box>
// </Box>
// <Box>
// <Text fontSize="sm" lineHeight="1" noOfLines={2}>
// {label}
// </Text>
// </Box>
// </Box>
// </Box>
// );
// }

const PortfolioGrid = styled.div`
display: grid;
Expand Down Expand Up @@ -150,23 +151,28 @@ export function PublicPortfolio() {
</Text>
</Box>
<PublicActivitiesSection>
<CardsContainer>
<Wrap p="10px">
{data.publicActivities.length < 1 ? (
<div>No Public Activities</div>
) : (
<>
{data.publicActivities.map((activity) => {
const { doenetId, label, imagePath } = activity;
const imageLink = `/portfolioviewer/${doenetId}`;

return (
<Card
key={`Card${activity.doenetId}`}
{...activity}
<ActivityCard
key={`ActivityCard${activity.doenetId}`}
imageLink={imageLink}
label={label}
imagePath={imagePath}
fullName={data.fullName}
/>
);
})}
</>
)}
</CardsContainer>
</Wrap>
</PublicActivitiesSection>
</PortfolioGrid>
</>
Expand Down
Loading

0 comments on commit 247daaa

Please sign in to comment.