From f9802fa223c2dc5cffb35463629948a9d4b197c6 Mon Sep 17 00:00:00 2001 From: Dale John McGrew Date: Thu, 21 Dec 2023 07:20:05 -0800 Subject: [PATCH] Adding profileImageBackgroundColor to the display of candidate cards. Still needs more work. (#3808) --- .../Campaign/CampaignCardForList.jsx | 7 ++++++- .../components/Style/CampaignCardStyles.jsx | 18 ++++++++++-------- .../Style/PoliticianDetailsStyles.jsx | 12 ++++++------ .../pages/Politician/PoliticianDetailsPage.jsx | 9 ++++++--- src/js/common/utils/politicianUtils.js | 3 +++ .../CandidateListRoot/CandidateCardForList.jsx | 15 ++++++++++++--- .../RepresentativeCardForList.jsx | 15 ++++++++++++--- 7 files changed, 55 insertions(+), 24 deletions(-) diff --git a/src/js/common/components/Campaign/CampaignCardForList.jsx b/src/js/common/components/Campaign/CampaignCardForList.jsx index 5a95ec3bc..ef4f14e11 100644 --- a/src/js/common/components/Campaign/CampaignCardForList.jsx +++ b/src/js/common/components/Campaign/CampaignCardForList.jsx @@ -248,6 +248,7 @@ class CampaignCardForList extends Component { // is_blocked_by_we_vote: isBlockedByWeVote, // is_in_team_review_mode: isInTeamReviewMode, // is_supporters_count_minimum_exceeded: isSupportersCountMinimumExceeded, + profile_image_background_color: profileImageBackgroundColor, supporters_count: supportersCount, supporters_count_next_goal: supportersCountNextGoal, // visible_on_this_site: visibleOnThisSite, @@ -450,7 +451,11 @@ class CampaignCardForList extends Component { )} ) : ( - + No image provided diff --git a/src/js/common/components/Style/CampaignCardStyles.jsx b/src/js/common/components/Style/CampaignCardStyles.jsx index aea2628ba..db868a759 100644 --- a/src/js/common/components/Style/CampaignCardStyles.jsx +++ b/src/js/common/components/Style/CampaignCardStyles.jsx @@ -45,10 +45,10 @@ export const CampaignImageDesktopSharedStyles = css` `; export const CampaignImageDesktopPlaceholder = styled('div', { - shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop), -})(({ limitCardWidth }) => (` + shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor'].includes(prop), +})(({ limitCardWidth, profileImageBackgroundColor }) => (` align-items: center; - background-color: #eee; + background-color: ${profileImageBackgroundColor || '#eee'}; display: flex; ${limitCardWidth ? 'height: 157px;' : 'height: 117px;'} ${limitCardWidth ? 'min-height: 157px;' : 'min-height: 117px;'} @@ -73,16 +73,18 @@ export const CampaignImageMobileSharedStyles = css` max-width: 100%; `; -export const CampaignImageMobilePlaceholder = styled('div')` - background-color: #eee; - display: flex; - justify-content: center; +export const CampaignImageMobilePlaceholder = styled('div', { + shouldForwardProp: (prop) => !['profileImageBackgroundColor'].includes(prop), +})(({ profileImageBackgroundColor }) => (` align-items: center; + background-color: ${profileImageBackgroundColor || '#eee'}; + display: flex; height: 157px; + justify-content: center; max-height: 157px; min-height: 157px; ${CampaignImageMobileSharedStyles} -`; +`)); export const CampaignImagePlaceholderText = styled('div')` color: #ccc; diff --git a/src/js/common/components/Style/PoliticianDetailsStyles.jsx b/src/js/common/components/Style/PoliticianDetailsStyles.jsx index 015f0e2e6..e3ae4cccc 100644 --- a/src/js/common/components/Style/PoliticianDetailsStyles.jsx +++ b/src/js/common/components/Style/PoliticianDetailsStyles.jsx @@ -55,11 +55,11 @@ export const PoliticianImageSharedStyles = css` `; export const PoliticianImageDesktopPlaceholder = styled('div', { - shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop), -})(({ limitCardWidth }) => (` + shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor'].includes(prop), +})(({ limitCardWidth, profileImageBackgroundColor }) => (` ${limitCardWidth ? 'height: 315px;' : 'height: 117px;'} align-items: center; - background-color: #eee; + background-color: ${profileImageBackgroundColor || '#eee'}; display: flex; justify-content: center; ${limitCardWidth ? 'width: 561px;' : 'width: 224px;'} @@ -67,11 +67,11 @@ export const PoliticianImageDesktopPlaceholder = styled('div', { `)); export const PoliticianImageMobilePlaceholder = styled('div', { - shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop), -})(({ limitCardWidth }) => (` + shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor'].includes(prop), +})(({ limitCardWidth, profileImageBackgroundColor }) => (` ${limitCardWidth ? 'height: 200px;' : 'height: 117px;'} align-items: center; - background-color: #eee; + background-color: ${profileImageBackgroundColor || '#eee'}; display: flex; justify-content: center; // ${limitCardWidth ? 'width: 561px;' : 'width: 224px;'} diff --git a/src/js/common/pages/Politician/PoliticianDetailsPage.jsx b/src/js/common/pages/Politician/PoliticianDetailsPage.jsx index 966e937f8..b30f368e0 100644 --- a/src/js/common/pages/Politician/PoliticianDetailsPage.jsx +++ b/src/js/common/pages/Politician/PoliticianDetailsPage.jsx @@ -288,6 +288,7 @@ class PoliticianDetailsPage extends Component { politicianName, politicianUrl, politicianWeVoteId, + profileImageBackgroundColor, stateCode, twitterFollowersCount, twitterHandle, @@ -331,6 +332,7 @@ class PoliticianDetailsPage extends Component { politicianImageUrlLarge, politicianName, politicianUrl, + profileImageBackgroundColor, stateText, twitterFollowersCount, twitterHandle, @@ -370,6 +372,7 @@ class PoliticianDetailsPage extends Component { politicianUrl: '', politicianWeVoteIdForDisplay: '', // We don't clear politicianWeVoteId because we may need it to load next politician politicianSEOFriendlyPathForDisplay: '', // We don't clear politicianSEOFriendlyPath because we may need it to load next politician + profileImageBackgroundColor: '', stateText: '', twitterFollowersCount: 0, twitterHandle: '', @@ -449,7 +452,7 @@ class PoliticianDetailsPage extends Component { politicianDescription, politicianDescriptionLimited, politicianImageUrlLarge, politicianSEOFriendlyPath, politicianSEOFriendlyPathForDisplay, politicianName, politicianUrl, - politicianWeVoteId, politicianWeVoteIdForDisplay, + politicianWeVoteId, politicianWeVoteIdForDisplay, profileImageBackgroundColor, stateText, twitterHandle, twitterHandle2, twitterFollowersCount, voterCanEditThisPolitician, voterSupportsThisPolitician, wikipediaUrl, // youtubeUrl, @@ -728,7 +731,7 @@ class PoliticianDetailsPage extends Component { {politicianImageUrlLarge ? ( - + ) : ( @@ -904,7 +907,7 @@ class PoliticianDetailsPage extends Component { {politicianImageUrlLarge ? ( - + ) : ( diff --git a/src/js/common/utils/politicianUtils.js b/src/js/common/utils/politicianUtils.js index 82178209d..04c7ed349 100644 --- a/src/js/common/utils/politicianUtils.js +++ b/src/js/common/utils/politicianUtils.js @@ -25,6 +25,7 @@ export function getPoliticianValuesFromIdentifiers (politicianSEOFriendlyPath, p let politicianSEOFriendlyPathFromObject = ''; let politicianUrl = ''; let politicianWeVoteIdFromObject = ''; + let profileImageBackgroundColor = ''; let stateCode = ''; let twitterFollowersCount = 0; let twitterHandle = ''; @@ -54,6 +55,7 @@ export function getPoliticianValuesFromIdentifiers (politicianSEOFriendlyPath, p politician_twitter_handle2: twitterHandle2, politician_url: politicianUrl, politician_we_vote_id: politicianWeVoteIdFromObject, + profile_image_background_color: profileImageBackgroundColor, state_code: stateCode, twitter_followers_count: twitterFollowersCount, voter_is_politician_owner: voterIsPoliticianOwner, @@ -98,6 +100,7 @@ export function getPoliticianValuesFromIdentifiers (politicianSEOFriendlyPath, p politicianName, politicianUrl, politicianWeVoteId: politicianWeVoteIdFromObject, + profileImageBackgroundColor, stateCode, twitterFollowersCount, twitterHandle, diff --git a/src/js/components/CandidateListRoot/CandidateCardForList.jsx b/src/js/components/CandidateListRoot/CandidateCardForList.jsx index e831579ca..eca6d7417 100644 --- a/src/js/components/CandidateListRoot/CandidateCardForList.jsx +++ b/src/js/components/CandidateListRoot/CandidateCardForList.jsx @@ -255,6 +255,7 @@ class CandidateCardForList extends Component { // is_supporters_count_minimum_exceeded: isSupportersCountMinimumExceeded, party: politicalParty, politician_we_vote_id: politicianWeVoteId, + profile_image_background_color: profileImageBackgroundColor, state_code: stateCode, supporters_count: supportersCount, supporters_count_next_goal: supportersCountNextGoalRaw, @@ -445,7 +446,7 @@ class CandidateCardForList extends Component { {candidatePhotoLargeUrl ? ( - + ) : ( @@ -460,7 +461,11 @@ class CandidateCardForList extends Component { {candidatePhotoLargeUrl ? ( <> {limitCardWidth ? ( - + ) : ( @@ -468,7 +473,11 @@ class CandidateCardForList extends Component { )} ) : ( - + No image provided diff --git a/src/js/components/RepresentativeListRoot/RepresentativeCardForList.jsx b/src/js/components/RepresentativeListRoot/RepresentativeCardForList.jsx index e07295b94..e993a4087 100644 --- a/src/js/components/RepresentativeListRoot/RepresentativeCardForList.jsx +++ b/src/js/components/RepresentativeListRoot/RepresentativeCardForList.jsx @@ -254,6 +254,7 @@ class RepresentativeCardForList extends Component { // is_supporters_count_minimum_exceeded: isSupportersCountMinimumExceeded, political_party: politicalParty, politician_we_vote_id: politicianWeVoteId, + profile_image_background_color: profileImageBackgroundColor, representative_photo_url_large: representativePhotoLargeUrl, representative_ultimate_election_date: representativeUltimateElectionDate, // seo_friendly_path: politicianSEOFriendlyPath, @@ -422,7 +423,7 @@ class RepresentativeCardForList extends Component { {representativePhotoLargeUrl ? ( - + ) : ( @@ -437,7 +438,11 @@ class RepresentativeCardForList extends Component { {representativePhotoLargeUrl ? ( <> {limitCardWidth ? ( - + ) : ( @@ -445,7 +450,11 @@ class RepresentativeCardForList extends Component { )} ) : ( - + No image provided