Skip to content
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

Updated the Upcoming Events list UI on the Organization dashboard. #1366

Merged
merged 17 commits into from
Jan 15, 2024
Merged

Updated the Upcoming Events list UI on the Organization dashboard. #1366

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6f55b51
Updated the Upcoming Events list UI of the Organization Dashboard.
AmitSharma512 Jan 3, 2024
7f30d18
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 3, 2024
68f0359
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 5, 2024
6f2ed65
Updated the logo on the dashboard
AmitSharma512 Jan 5, 2024
8e8f67b
Updated the CSS and the logo styling.
AmitSharma512 Jan 6, 2024
1b4eeb1
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 6, 2024
0cefba9
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 6, 2024
ff3d0d7
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 7, 2024
a4033cb
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 7, 2024
492ba6a
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 8, 2024
e73a825
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 10, 2024
6941ad1
Updated the location logo on the Organization Dashboard.
AmitSharma512 Jan 10, 2024
0b40f69
Fixed the Failing tests.
AmitSharma512 Jan 10, 2024
b1778c1
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 13, 2024
25cd687
Updated the names of the svgs.
AmitSharma512 Jan 13, 2024
63fc6ed
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 14, 2024
d36bb9e
Merge branch 'develop' of https://github.com/AmitSharma512/talawa-adm…
AmitSharma512 Jan 15, 2024
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
3 changes: 3 additions & 0 deletions src/assets/svgs/datenew.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/svgs/eventsnew.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/svgs/locationnew.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 34 additions & 2 deletions src/components/OrganizationDashCards/CardItem.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@
position: relative;
display: flex;
align-items: center;
padding: 0.75rem 0;
padding-top: 1rem;
padding-bottom: 1rem;
rishav-jha-mech marked this conversation as resolved.
Show resolved Hide resolved
padding-left: 1.5rem;
padding-right: 3rem;
border: 1px solid #dddddd;
Copy link
Contributor

Choose a reason for hiding this comment

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

use css variable here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@rishav-jha-mech can you give me some idea about how to use the CSS variables ?

Copy link
Contributor

Choose a reason for hiding this comment

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

like this,

border: 1px solid var(--bs-gray-200);

--bs-gray-200 this variable is from bootstrap

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@rishav-jha-mech, can I write inline bootstrap CSS variables in the classname? Is that ok to write ??

border-radius: 8px;
margin-top: 20px;
}

.cardItem .iconWrapper {
Expand Down Expand Up @@ -39,11 +45,36 @@
.cardItem .title {
font-size: 1rem;
flex: 1;
font-style: normal;
font-weight: 600;
line-height: 18px;
color: #000000;
Copy link
Contributor

Choose a reason for hiding this comment

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

Use css variable from bootstrap here too

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
margin-left: 3px;
}

.cardItem .location {
font-style: normal;
font-weight: 600;
font-size: 0.9rem;
color: #31bb6b;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}

.cardItem .time {
font-size: 0.9rem;
color: var(--bs-secondary);
font-style: normal;
font-weight: 600;
color: #737373;
}

.cardItem .creator {
Expand All @@ -53,8 +84,9 @@

.rightCard {
display: flex;
gap: 5px;
gap: 7px;
min-width: 170px;
justify-content: center;
flex-direction: column;
margin-left: 10px;
}
8 changes: 6 additions & 2 deletions src/components/OrganizationDashCards/CardItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,19 @@ describe('Testing the Organization Card', () => {
const props: InterfaceCardItem = {
type: 'Event',
title: 'Event Title',
time: '2023-09-03',
startdate: '2023-09-03',
enddate: '2023-09-04',
location: 'Event Location',
};

render(<CardItem {...props} />);

expect(screen.getByText(/Event Title/i)).toBeInTheDocument();
expect(
screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
screen.getByText(dayjs(props.startdate).format('MMM D, YYYY'))
).toBeInTheDocument();
expect(
screen.getByText(dayjs(props.enddate).format('MMM D, YYYY'))
).toBeInTheDocument();
expect(screen.getByText(/Event Location/i)).toBeInTheDocument();
});
Expand Down
38 changes: 25 additions & 13 deletions src/components/OrganizationDashCards/CardItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
import { ReactComponent as EventsIcon } from 'assets/svgs/eventsnew.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 MarkerIcon } from 'assets/svgs/locationnew.svg';
import { ReactComponent as DateIcon } from 'assets/svgs/datenew.svg';
import { ReactComponent as UserIcon } from 'assets/svgs/user.svg';
import dayjs from 'dayjs';
import styles from './CardItem.module.css';
Expand All @@ -12,19 +12,21 @@ export interface InterfaceCardItem {
type: 'Event' | 'Post' | 'MembershipRequest';
title: string;
time?: string;
startdate?: string;
enddate?: string;
creator?: any;
location?: string;
}

const cardItem = (props: InterfaceCardItem): JSX.Element => {
const { creator, type, title, time, location } = props;
const { creator, type, title, startdate, time, enddate, location } = props;
return (
<>
<div className={`${styles.cardItem} border-bottom`}>
<div className={`${styles.iconWrapper} me-3`}>
<div className={styles.themeOverlay} />
{type == 'Event' ? (
<EventsIcon fill="var(--bs-primary)" width={20} height={20} />
<EventsIcon width={40} height={40} />
) : type == 'Post' ? (
<PostsIcon fill="var(--bs-primary)" width={20} height={20} />
) : (
Expand All @@ -37,7 +39,6 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
)
)}
</div>
<span className={styles.title}>{`${title}`}</span>

<div className={styles.rightCard}>
{creator && (
Expand All @@ -55,18 +56,15 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
</small>
)}

{title && <span className={styles.title}>{title}</span>}

{location && (
<span className={styles.location}>
<MarkerIcon
title="Event Location"
fill="var(--bs-primary)"
width={20}
height={20}
/>{' '}
<MarkerIcon title="Event Location" width={22} height={22} />{' '}
{location}
</span>
)}
{time && (
{type == 'Event' && startdate && (
<span className={styles.time}>
{type === 'Event' && (
<DateIcon
Expand All @@ -76,6 +74,20 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
height={20}
/>
)}{' '}
{dayjs(startdate).format('MMM D, YYYY')} -{' '}
{dayjs(enddate).format('MMM D, YYYY')}
</span>
)}
{type == 'Post' && time && (
<span className={styles.time}>
{type === 'Post' && (
<DateIcon
title="Event Date"
fill="#4cd964"
width={20}
height={20}
/>
)}{' '}
{dayjs(time).format('MMM D, YYYY')}
</span>
)}
Expand Down
1 change: 1 addition & 0 deletions src/screens/OrganizationDashboard/OrganizationDashboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.cardHeader .cardTitle {
Expand Down
3 changes: 2 additions & 1 deletion src/screens/OrganizationDashboard/OrganizationDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,8 @@ function organizationDashboard(): JSX.Element {
<CardItem
type="Event"
key={event._id}
time={event.startDate}
startdate={event.startDate}
enddate={event.endDate}
title={event.title}
location={event.location}
/>
Expand Down