Skip to content

Commit

Permalink
Fixed-Issue-PalisadoesFoundation#1266 Bug Report When a new post is a…
Browse files Browse the repository at this point in the history
…dded, the latest post section in the organization's dashboard becomes distorted Updated
  • Loading branch information
gauravsingh94 committed Jan 3, 2024
1 parent d48c001 commit e2d895a
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 50 deletions.
32 changes: 22 additions & 10 deletions src/components/OrganizationDashCards/CardItem.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@
position: relative;
display: flex;
align-items: center;
padding: 0.75rem 0;
background-color: #f1f3f68f;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}

.cardItem .iconWrapper {
position: relative;
height: 40px;
width: 40px;
height: 52px;
width: 52px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 18px;
}

.cardItem .iconWrapper .themeOverlay {
Expand All @@ -22,7 +26,7 @@
bottom: 0;
left: 0;
opacity: 0.12;
border-radius: 50%;
border-radius: 4px;
}

.cardItem .iconWrapper .dangerOverlay {
Expand All @@ -33,11 +37,12 @@
bottom: 0;
left: 0;
opacity: 0.12;
border-radius: 50%;
border-radius: 4px;
}

.cardItem .title {
font-size: 1rem;
font-size: 15px;
font-weight: 600;
flex: 1;
margin-right: 0.3rem;
word-wrap: break-word;
Expand All @@ -48,13 +53,14 @@
}

.cardItem .time {
font-size: 0.9rem;
color: var(--bs-secondary);
font-size: 0.8rem;
font-weight: 300;
color: #808080;
}

.cardItem .creator {
font-size: 1rem;
color: rgb(33, 208, 21);
font-size: 0.8rem;
color: black;
}

.rightCard {
Expand All @@ -64,3 +70,9 @@
justify-content: center;
flex-direction: column;
}

.content {
display: flex;
flex-direction: column;
max-width: 60%;
}
67 changes: 27 additions & 40 deletions src/components/OrganizationDashCards/CardItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React from 'react';
import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
import { ReactComponent as MarkerIcon } from 'assets/svgs/location.svg';
import { ReactComponent as DateIcon } from 'assets/svgs/date.svg';
import { ReactComponent as UserIcon } from 'assets/svgs/user.svg';
import dayjs from 'dayjs';
import styles from './CardItem.module.css';
import { PersonAddAlt1Rounded } from '@mui/icons-material';
Expand Down Expand Up @@ -37,48 +35,37 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
)
)}
</div>
<span className={styles.title}>{`${title}`}</span>
<div className={styles.content}>
<span className={styles.title}>{`${title}`}</span>

<div className={styles.rightCard}>
{creator && (
<small className={styles.creator}>
<UserIcon
title="Post Creator"
fill="var(--bs-primary)"
width={20}
height={20}
/>{' '}
{' '}
<a>
{creator.firstName} {creator.lastName}
</a>
</small>
)}
<div className={styles.rightCard}>
{time && (
<span className={styles.time}>
<span>Posted on: </span>
{dayjs(time).format('D MMM YYYY')}
</span>
)}
{creator && (
<small className={styles.creator}>
<span>Author: </span>
<a>
{creator.firstName} {creator.lastName}
</a>
</small>
)}

{location && (
<span className={styles.location}>
<MarkerIcon
title="Event Location"
fill="var(--bs-primary)"
width={20}
height={20}
/>{' '}
{location}
</span>
)}
{time && (
<span className={styles.time}>
{type === 'Event' && (
<DateIcon
title="Event Date"
fill="#4cd964"
{location && (
<span className={styles.location}>
<MarkerIcon
title="Event Location"
fill="var(--bs-primary)"
width={20}
height={20}
/>
)}{' '}
{dayjs(time).format('MMM D, YYYY')}
</span>
)}
/>{' '}
{location}
</span>
)}
</div>
</div>
</div>
</>
Expand Down

0 comments on commit e2d895a

Please sign in to comment.