Skip to content

Commit

Permalink
Merge pull request #452 from Ekta29yadav/ui
Browse files Browse the repository at this point in the history 
Task #0000 - UI for voting card fixes
  • Loading branch information
@ManojNathIC
ManojNathIC authored Aug 7, 2024
2 parents f5fe00b + 043a8d9 commit d7d4325
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 114 deletions.
82 changes: 67 additions & 15 deletions packages/nulp_elite/src/components/VotingCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,67 @@ export default function VotingCard({ items, index, onClick }) {
>
<CardContent className="d-flex jc-bw">
<Box>
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
style={{ height: "inherit" }}
>
{items.title}
</Typography>
)}
<Box className="d-flex jc-bw">
<Box>
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
style={{ height: "inherit" }}
>
{items.title}
</Typography>
)}
</Box>
<Box>
<Box className="xs-hide">
<FacebookShareButton
url={shareUrl}
className="pr-5"
quote={`Check out this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<FacebookIcon url={shareUrl} size={32} round={true} />
</FacebookShareButton>
<WhatsappShareButton
url={shareUrl}
title={`Check out this poll: ${items.title}`}
separator=":: "
className="pr-5"
onClick={(event) => openSocialMediaLink(event, shareUrl)}
>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
<LinkedinShareButton
url={shareUrl}
className="pr-5"
title={items.title}
summary={`Participate in this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<LinkedinIcon size={32} round={true} />
</LinkedinShareButton>
<TwitterShareButton
url={shareUrl}
className="pr-5"
title={`Check out this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<img
src={require("../assets/twitter.png")}
alt="Twitter"
style={{ width: 32, height: 32 }}
/>
</TwitterShareButton>
</Box>
</Box>
</Box>
<Box className="d-flex h6-title mt-30" style={{ color: "#484848" }}>
<Box className="d-flex jc-bw alignItems-center">
<TodayOutlinedIcon className="fs-12 pr-5" />
Expand All @@ -152,17 +204,17 @@ export default function VotingCard({ items, index, onClick }) {
)}
</Box>
</Box>
<Box className="d-flex jc-bw alignItems-center fs-14">
<Box className="fs-14">
{items?.poll_keywords && (
<>
{items.poll_keywords.slice(0, 3).map((keyword, index) => (
<Tooltip
key={index}
title={keyword}
placement="right"
className="labeltwo cardLabelEllips"
className="customlabeltwo cardLabelEllips"
>
<Button>
<Button className="d-inline-block">
{index < 2
? keyword
: `${keyword} + ${items.poll_keywords.length - 3}`}
Expand All @@ -173,7 +225,7 @@ export default function VotingCard({ items, index, onClick }) {
<Tooltip
title={items.poll_keywords.slice(3).join(", ")}
placement="right"
className="labeltwo cardLabelEllips"
className="customlabeltwo cardLabelEllips"
>
<Button>
{items.poll_keywords[2]} +{" "}
Expand All @@ -193,7 +245,7 @@ export default function VotingCard({ items, index, onClick }) {
/>
</Box> */}
</CardContent>
<Box className="voting-text lg-mt-30">
<Box className="voting-text lg-mt-20">
<Box>
{!isVotingEnded && (
<Button type="button" className="custom-btn-primary ml-20 lg-mt-20">
Expand All @@ -210,7 +262,7 @@ export default function VotingCard({ items, index, onClick }) {
</Button>
)}
</Box>
<Box className="xs-hide">
<Box className="lg-hide xs-m">
<FacebookShareButton
url={shareUrl}
className="pr-5"
Expand Down
1 change: 0 additions & 1 deletion packages/nulp_elite/src/pages/content/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ const Player = () => {
contentId: contentId,
courseId: courseId,
batchId: batchId,

status: status,
},
],
Expand Down
209 changes: 115 additions & 94 deletions packages/nulp_elite/src/pages/voting/votingDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,52 +396,60 @@ const votingDashboard = () => {
onClick={() => handleCardClick(items.poll_id)}
>
<CardContent className="d-flex jc-bw">
<Box>
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
<Grid
item
xs={12}
md={8}
lg={8}
style={{ marginBottom: "10px" }}
key={items.poll_id}
>
<Box>
{items.title && (
<Typography
gutterBottom
className="mt-10 event-title"
>
{items.title}
</Typography>
)}
<Box
className="d-flex h6-title mt-30"
style={{ color: "#484848" }}
>
{items.title}
</Typography>
)}
<Box
className="d-flex h6-title mt-30"
style={{ color: "#484848" }}
>
<Box className="d-flex jc-bw alignItems-center fs-14">
<TodayOutlinedIcon className="fs-14 pr-5" />
{moment(items?.start_date).format(
"dddd, MMMM Do YYYY, h:mm:ss a"
)}
<Box className="d-flex jc-bw alignItems-center fs-14">
<TodayOutlinedIcon className="fs-14 pr-5" />
{moment(items?.start_date).format(
"dddd, MMMM Do YYYY, h:mm:ss a"
)}
</Box>
</Box>
{items?.poll_keywords && (
<Box className="d-flex jc-bw alignItems-center fs-14">
<Tooltip
title={
Array.isArray(items?.poll_keywords) &&
items?.poll_keywords?.length > 1
? items?.poll_keywords.join(", ")
: items?.poll_keywords?.[0]
}
placement="right"
className="labeltwo cardLabelEllips"
>
<Button className="ml-0">
{Array.isArray(items?.poll_keywords) &&
items?.poll_keywords.length === 1
? items?.poll_keywords[0]
: Array.isArray(items?.poll_keywords) &&
`${items?.poll_keywords[0]} + ${
items?.poll_keywords.length - 1
}`}
</Button>
</Tooltip>
</Box>
)}
</Box>
{items?.poll_keywords && (
<Box className="d-flex jc-bw alignItems-center fs-14">
<Tooltip
title={
Array.isArray(items?.poll_keywords) &&
items?.poll_keywords?.length > 1
? items?.poll_keywords.join(", ")
: items?.poll_keywords?.[0]
}
placement="right"
className="labeltwo cardLabelEllips"
>
<Button>
{Array.isArray(items?.poll_keywords) &&
items?.poll_keywords.length === 1
? items?.poll_keywords[0]
: Array.isArray(items?.poll_keywords) &&
`${items?.poll_keywords[0]} + ${
items?.poll_keywords.length - 1
}`}
</Button>
</Tooltip>
</Box>
)}
</Box>
{/* <Box
{/* <Box
className="card-img-container"
style={{ position: "inherit" }}
>
Expand All @@ -455,6 +463,68 @@ const votingDashboard = () => {
alt="App Icon"
/>
</Box> */}
</Grid>
<Grid
item
xs={12}
md={4}
lg={4}
style={{ marginBottom: "10px" }}
key={items.poll_id}
>
<Box className="xs-hide">
<FacebookShareButton
url={shareUrl}
className="pr-4"
quote={`Check out this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<FacebookIcon
url={shareUrl}
size={32}
round={true}
/>
</FacebookShareButton>
<WhatsappShareButton
url={shareUrl}
title={`Check out this poll: ${items.title}`}
separator=":: "
className="pr-4"
onClick={(event) =>
openSocialMediaLink(event, shareUrl)
}
>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
<LinkedinShareButton
url={shareUrl}
className="pr-4"
title={items.title}
summary={`Participate in this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<LinkedinIcon size={32} round={true} />
</LinkedinShareButton>
<TwitterShareButton
url={shareUrl}
className="pr-4"
title={`Check out this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<img
src={require("../../assets/twitter.png")}
alt="Twitter"
style={{ width: 32, height: 32 }}
/>
</TwitterShareButton>
</Box>
</Grid>
</CardContent>
<Box className="voting-text lg-mt-30">
<Box>
Expand Down Expand Up @@ -489,55 +559,6 @@ const votingDashboard = () => {
</Button>
))}
</Box>

<Box className="xs-hide">
<FacebookShareButton
url={shareUrl}
className="pr-5"
quote={`Check out this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<FacebookIcon url={shareUrl} size={32} round={true} />
</FacebookShareButton>
<WhatsappShareButton
url={shareUrl}
title={`Check out this poll: ${items.title}`}
separator=":: "
className="pr-5"
onClick={(event) =>
openSocialMediaLink(event, shareUrl)
}
>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
<LinkedinShareButton
url={shareUrl}
className="pr-5"
title={items.title}
summary={`Participate in this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<LinkedinIcon size={32} round={true} />
</LinkedinShareButton>
<TwitterShareButton
url={shareUrl}
className="pr-5"
title={`Check out this poll: ${items.title}`}
onClick={(event) => {
openSocialMediaLink(event, shareUrl);
}}
>
<img
src={require("../../assets/twitter.png")}
alt="Twitter"
style={{ width: 32, height: 32 }}
/>
</TwitterShareButton>
</Box>
</Box>
</Card>
</Grid>
Expand Down Expand Up @@ -807,15 +828,15 @@ const votingDashboard = () => {
className="d-flex h6-title mt-30"
style={{ color: "#484848" }}
>
<Box className="d-flex jc-bw alignItems-center fs-14">
<Box className="d-flex jc-bw alignItems-start fs-14">
<TodayOutlinedIcon className="fs-14 pr-5" />
{moment(items?.start_date).format(
"dddd, MMMM Do YYYY, h:mm:ss a"
)}
</Box>
</Box>
{items?.poll_keywords && (
<Box className="d-flex jc-bw alignItems-center fs-14">
<Box className="d-flex jc-bw alignItems-start fs-14">
<Tooltip
title={
Array.isArray(items?.poll_keywords) &&
Expand Down
2 changes: 1 addition & 1 deletion packages/nulp_elite/src/pages/voting/votingDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ const VotingDetails = () => {
{/* </Grid> */}
{(userVote && userVote?.length > 0 && timeDifference > 15) ||
isVotingEnded ? (
<Grid item xs={9} md={6} lg={6} className="lg-pl-60 xs-pl-30">
<Grid item xs={9} md={6} lg={6}>
<Box width="100%"></Box>
<Typography
gutterBottom
Expand Down
Loading

0 comments on commit d7d4325

Please sign in to comment.