We Vote's javascript (client-side) mobile website built with React/Flux. Twitter: @WeVote Apple Store: https://itunes.apple.com/us/app/we-vote-voter-guide/id1347335726 Android: https://play.google.com/store/apps/details?id=org.wevote.cordova&hl=en_US
94
stars
301
forks
source link
Wv 583 place joined and days left over challenge images on challenge home page #4107
Fixed 'Joined and Days Left' over challenge images on the Challenge home page.
IMPORTANTAfter facing limitations adding this functionality through src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx, I integrated the feature directly into src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx.
1) Created a custom-styled component JoinAndDaysForChallengePage specifically for the ChallengeCardList.jsx page, allowing absolute positioning and unique styles without affecting other components using JoinedAndDaysLeft.
2) Added DesignTokenColors in JoinedAndDaysLeft for consistent styles usage across the application.
3) Updated ChallengeCardList.jsx to import and use the JoinAndDaysForChallengePage styled component, positioning it correctly over the challenge card image.
Fixed 'Joined and Days Left' over challenge images on the Challenge home page. IMPORTANT After facing limitations adding this functionality through
src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
, I integrated the feature directly intosrc/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
.1) Created a custom-styled component
JoinAndDaysForChallengePage
specifically for theChallengeCardList.jsx
page, allowing absolute positioning and unique styles without affecting other components usingJoinedAndDaysLeft
. 2) AddedDesignTokenColors
inJoinedAndDaysLeft
for consistent styles usage across the application. 3) UpdatedChallengeCardList.jsx
to import and use theJoinAndDaysForChallengePage
styled component, positioning it correctly over the challenge card image.