Skip to content

Commit

Permalink
fix(lc): UI issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@aswanthabam
aswanthabam committed Nov 5, 2024
1 parent 398f8b0 commit 43c6ca5
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 108 deletions.
Binary file added src/modules/Dashboard/modules/LearningCircleV2/assets/images/LC3.webp
View file
Binary file not shown.
11 changes: 8 additions & 3 deletions ...modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,15 +222,20 @@
font-size: 0.65rem;
margin-right: 0.5rem;
}
.learningCircleLandingPage .learningCircleLandingPageButton {
.learningCircleLandingPage .learningCircleLandingPageButton {
flex-direction: column;
justify-content: center;
align-items: center;
}
.learningCircleLandingPage .middleContainer {
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
gap: 10px;
button {
width: 100%;
}
}
}

Expand All @@ -255,7 +260,7 @@
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
justify-content: start;
}
.card div:nth-child(1) {
display: flex;
Expand Down Expand Up @@ -368,7 +373,7 @@

@media screen and (max-width: 1920px) {
.cardContainer {
justify-content: space-between;
justify-content: start;
}
.card {
width: calc(33% - 20px);
Expand Down
238 changes: 133 additions & 105 deletions src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
joinMeetup,
unsaveMeetup
} from "../../services/LearningCircleAPIs";
import imageBottom from "../../assets/images/LC3.webp";
import { color } from "framer-motion";
import MuModal from "@/MuLearnComponents/MuModal/MuModal";
import { Input } from "@chakra-ui/react";
Expand Down Expand Up @@ -181,9 +182,7 @@ const LearningCircleLanding = () => {
</div>
</div>
</div>
<div
className={styles.middleContainer}
>
<div className={styles.middleContainer}>
<SelectTab
placeholder={"Select Role"}
options={INITIAL_INTERESTS}
Expand Down Expand Up @@ -223,118 +222,147 @@ const LearningCircleLanding = () => {
</svg>
</PowerfulButton>
</div>
<div className={styles.cardContainer}>
{meetups.map((event, index) => (
<div
style={{
border: "2px solid #FFFFFF",
borderColor: event.is_started
? event.attendee &&
event.attendee.is_joined &&
!event.attendee.is_report_submitted
? "#DF4141"
: "rgba(255, 198, 40, 1)"
: "#FFFFFF"
}}
className={styles.card}
key={index}
>
{event.is_started ? (
<div
style={{
borderColor:
event.attendee &&
event.attendee.is_joined &&
!event.attendee
.is_report_submitted
? "#DF4141"
: "rgba(255, 198, 40, 1)",
color:
event.attendee &&
{meetups.length === 0 ? (
<div
style={{
background: "#fff",
padding: 10,
borderRadius: 10
}}
className={styles.learningCircleLandingPageMiddle}
>
<img
src={imageBottom}
alt="No meetups"
loading="eager"
className={styles.desaturate}
/>
<b>No Meetups!</b>
<p>No meetups are currently running now</p>
</div>
) : (
<div className={styles.cardContainer}>
{meetups.map((event, index) => (
<div
style={{
border: "2px solid #FFFFFF",
borderColor: event.is_started
? event.attendee &&
event.attendee.is_joined &&
!event.attendee
.is_report_submitted
? "#DF4141"
: "rgba(255, 198, 40, 1)"
: "#FFFFFF"
}}
className={styles.card}
key={index}
>
{event.is_started ? (
<div
style={{
borderColor:
event.attendee &&
event.attendee.is_joined &&
!event.attendee
.is_report_submitted
? "#DF4141"
: "rgba(255, 198, 40, 1)",
color:
event.attendee &&
event.attendee.is_joined &&
!event.attendee
.is_report_submitted
? "#DF4141"
: "rgba(255, 198, 40, 1)"
}}
>
<span>
{event.attendee &&
event.attendee.is_joined &&
!event.attendee
.is_report_submitted
? "#DF4141"
: "rgba(255, 198, 40, 1)"
}}
>
<span>
{event.attendee &&
event.attendee.is_joined &&
!event.attendee.is_report_submitted
? "Report Submission Pending"
: "Happening Now"}
</span>
? "Report Submission Pending"
: "Happening Now"}
</span>
</div>
) : null}
<h2 className={styles.title}>
{event.title}
</h2>
<div className={styles.location}>
<FaMapMarkerAlt
className={styles.icon}
/>
<span>{event.meet_place}</span>
</div>
) : null}
<h2 className={styles.title}>{event.title}</h2>
<div className={styles.location}>
<FaMapMarkerAlt className={styles.icon} />
<span>{event.meet_place}</span>
</div>
<div className={styles.details}>
<span className={styles.date}>
{new Date(
event.meet_time
).toLocaleString()}
</span>
<span className={styles.duration}>
{event.duration} Hours
</span>
{/* <span className={styles.karmaPoints}>
<div className={styles.details}>
<span className={styles.date}>
{new Date(
event.meet_time
).toLocaleString()}
</span>
<span className={styles.duration}>
{event.duration} Hours
</span>
{/* <span className={styles.karmaPoints}>
Earn Karma Points
</span> */}
</div>
<div className={styles.footer}>
{!event.attendee ||
(event.attendee &&
!event.attendee.is_joined) ? (
<PowerfulButton
variant={
event.attendee
? "primary"
: "outline"
}
</div>
<div className={styles.footer}>
{!event.attendee ||
(event.attendee &&
!event.attendee.is_joined) ? (
<PowerfulButton
variant={
event.attendee
? "primary"
: "outline"
}
onClick={() => {
saveMeetup(event.id);
}}
>
<FaBookmark
style={{
color: event.attendee
? "white"
: "blue"
}}
className={
styles.bookmarkIcon
}
/>
</PowerfulButton>
) : null}
<button
className={styles.joinButton}
onClick={() => {
saveMeetup(event.id);
handleMainButton(event);
}}
disabled={
(event.attendee &&
event.attendee.is_joined &&
event.attendee
.is_report_submitted) ??
false
}
>
<FaBookmark
style={{
color: event.attendee
? "white"
: "blue"
}}
className={styles.bookmarkIcon}
/>
</PowerfulButton>
) : null}
<button
className={styles.joinButton}
onClick={() => {
handleMainButton(event);
}}
disabled={
(event.attendee &&
event.attendee.is_joined &&
event.attendee
.is_report_submitted) ??
false
}
>
{!event.is_started
? "More Info"
: event.attendee &&
event.attendee.is_joined
? event.attendee.is_report_submitted
? "Report Submitted"
: "Submit Report"
: "Join Now"}
</button>
{!event.is_started
? "More Info"
: event.attendee &&
event.attendee.is_joined
? event.attendee
.is_report_submitted
? "Report Submitted"
: "Submit Report"
: "Join Now"}
</button>
</div>
</div>
</div>
))}
</div>
))}
</div>
)}
</div>
)}
</>
Expand Down

0 comments on commit 43c6ca5

Please sign in to comment.