From 2ec24adc401c6006c8d3e8dd6f1d73e9ea0b4acc Mon Sep 17 00:00:00 2001 From: John E Mook Date: Thu, 13 Feb 2025 13:40:20 -0600 Subject: [PATCH 1/3] changes challenge mobile header for smooth transition, removes unused styles, adds check for image size in card list, cleans up layout in mobile challenge page, set pigCanFly to false --- .../common/components/Challenge/ChallengeAbout.jsx | 2 +- .../Challenge/JoinChallengeAndLearnMoreButtons.jsx | 5 +---- .../components/Challenge/JoinChallengeButton.jsx | 13 +++++-------- .../ChallengeListRoot/ChallengeCardForList.jsx | 4 +++- .../ChallengeListRoot/ChallengeCardForListBody.jsx | 5 ++++- .../ChallengeListRoot/ChallengeCardList.jsx | 5 +++-- .../components/Style/CampaignDetailsStyles.jsx | 2 +- .../common/components/Style/ChallengeCardStyles.jsx | 6 +++--- src/js/common/pages/Challenge/ChallengeHomePage.jsx | 6 ++++-- 9 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx index 57caf0d12..e66ff122a 100644 --- a/src/js/common/components/Challenge/ChallengeAbout.jsx +++ b/src/js/common/components/Challenge/ChallengeAbout.jsx @@ -199,7 +199,7 @@ export const CardRowsWrapper = styled('div')` margin: 2px 0 0 2px; padding-bottom: 20px; overflow-y: auto; - height: 165px; + height: 250px; @media screen and (min-width: 786px) { height: auto; diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx index 27282bac0..b34cdefaa 100644 --- a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx +++ b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx @@ -37,9 +37,6 @@ const styles = () => ({ // background: 'var(--Primary-600, #0858A1)', // border: '1px solid var(--Primary-400, #4187C6)', // color: 'var(--WhiteUI, #FFFFFF)', - marginRight: '5px', - marginTop: '10px', - fontSize: '14px', }, learnMoreButton: { borderRadius: 45, @@ -48,7 +45,7 @@ const styles = () => ({ // background: 'white', // border: '1px solid var(--Primary-400, #4187C6)', // color: 'var(--Neutral-900, #2A2A2C)', - marginTop: '10px', + // marginTop: '10px', fontSize: '14px', // '&:hover': { // backgroundColor: 'white', diff --git a/src/js/common/components/Challenge/JoinChallengeButton.jsx b/src/js/common/components/Challenge/JoinChallengeButton.jsx index 3bcf26bcd..f8cad855a 100644 --- a/src/js/common/components/Challenge/JoinChallengeButton.jsx +++ b/src/js/common/components/Challenge/JoinChallengeButton.jsx @@ -243,22 +243,19 @@ JoinChallengeButton.propTypes = { const styles = () => ({ buttonDesktop: { - // borderRadius: 45, - // minWidth: '110px', width: '100%', borderRadius: 45, minWidth: 110, // background: 'var(--Primary-600, #0858A1)', - // border: '1px solid var(--Primary-400, #4187C6)', - // color: 'var(--WhiteUI, #FFFFFF)', - marginRight: '5px', - marginTop: '10px', - fontSize: '14px', + // border: '1px solid var(--Primary-400, #4187C6)', + // color: 'var(--WhiteUI, #FFFFFF)', + marginRight: 5, + marginTop: 0, + fontSize: 14, }, }); const JoinChallengeButtonWrapper = styled('div')` - align-items: center; `; export default withStyles(styles)(JoinChallengeButton); diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx index 4fe9a4c24..ae5d55508 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx @@ -239,7 +239,7 @@ class ChallengeCardForList extends Component { render () { renderLog('ChallengeCardForList'); // Set LOG_RENDER_EVENTS to log all renders - const { challengeWeVoteId, joinedAndDaysLeftOff, limitCardWidth, titleLengthRestricted, titleLinkOff, useVerticalCard } = this.props; + const { challengeWeVoteId, joinedAndDaysLeftOff, limitCardWidth, titleLengthRestricted, titleLinkOff, useVerticalCard, inChallengeList } = this.props; const { challenge, challengeSupported, voterCanEditThisChallenge } = this.state; // , inPrivateLabelMode // const challenge = ChallengeStore.getChallengeByWeVoteId(challengeWeVoteId); if (!challenge) { @@ -275,6 +275,7 @@ class ChallengeCardForList extends Component { challengeTitle={challengeTitle} challengeWeVoteId={challengeWeVoteId} hideCardMargins + inChallengeList={inChallengeList} inDraftMode={inDraftMode} joinedAndDaysLeftOff={joinedAndDaysLeftOff} functionToUseToKeepHelping={this.functionToUseToKeepHelping} @@ -304,6 +305,7 @@ ChallengeCardForList.propTypes = { titleLengthRestricted: PropTypes.bool, titleLinkOff: PropTypes.bool, useVerticalCard: PropTypes.bool, + inChallengeList: PropTypes.bool, }; const styles = (theme) => ({ diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx index 4dee87002..626d2e3b3 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx @@ -34,7 +34,7 @@ function ChallengeCardForListBody (props) { hideCardMargins, inDraftMode, joinedAndDaysLeftOff, limitCardWidth, onChallengeClick, onChallengeClickLink, photoLargeUrl, profileImageBackgroundColor, - tagIdBaseName, titleLengthRestricted, titleLinkOff, useVerticalCard, + tagIdBaseName, titleLengthRestricted, titleLinkOff, useVerticalCard, inChallengeList, } = props; const politicalPartySvgNameWithPath = '../../img/global/svg-icons/political-party-unspecified.svg'; // console.log('ChallengeCardForListBody functional component photoLargeUrl:', photoLargeUrl); @@ -114,6 +114,7 @@ function ChallengeCardForListBody (props) { id="cimp4" profileImageBackgroundColor={profileImageBackgroundColor} useVerticalCard={useVerticalCard} + inChallengeList={inChallengeList} > @@ -223,6 +225,7 @@ function ChallengeCardForListBody (props) { ChallengeCardForListBody.propTypes = { challengeTitle: PropTypes.string, challengeWeVoteId: PropTypes.string, + inChallengeList: PropTypes.bool, inDraftMode: PropTypes.bool, hideCardMargins: PropTypes.bool, joinedAndDaysLeftOff: PropTypes.bool, diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx index af6efeee5..47c44381d 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx @@ -168,8 +168,8 @@ class ChallengeCardList extends Component { return null; } let numberDisplayed = 0; - const pigsCanFly = true; - const inChallengeList = true; + const pigsCanFly = false; + const inChallengeList = true; // checks if item is in the challenge list return ( @@ -187,6 +187,7 @@ class ChallengeCardList extends Component { limitCardWidth={useVerticalCard} titleLengthRestricted useVerticalCard={useVerticalCard} + inChallengeList={inChallengeList} /> {/* JoinedAndDaysLeft component positioned absolutely */} diff --git a/src/js/common/components/Style/CampaignDetailsStyles.jsx b/src/js/common/components/Style/CampaignDetailsStyles.jsx index 925c17e29..e28dddbd6 100644 --- a/src/js/common/components/Style/CampaignDetailsStyles.jsx +++ b/src/js/common/components/Style/CampaignDetailsStyles.jsx @@ -22,7 +22,7 @@ export const CampaignDescriptionDesktop = styled('div')` export const CampaignDescriptionWrapper = styled('div', { shouldForwardProp: (prop) => !['hideCardMargins'].includes(prop), })(({ hideCardMargins }) => (` - ${hideCardMargins ? 'padding: 10px 0 10px 0;' : 'margin: 10px;'} + ${hideCardMargins ? 'padding: 0;' : 'margin: 10px;'} `)); export const CampaignDescriptionDesktopWrapper = styled('div')(({ theme }) => (` diff --git a/src/js/common/components/Style/ChallengeCardStyles.jsx b/src/js/common/components/Style/ChallengeCardStyles.jsx index 2a097c160..7c1a5f8b7 100644 --- a/src/js/common/components/Style/ChallengeCardStyles.jsx +++ b/src/js/common/components/Style/ChallengeCardStyles.jsx @@ -65,8 +65,8 @@ export const ChallengeImageMobileSharedStyles = css` `; export const ChallengeImageMobilePlaceholder = styled('div', { - shouldForwardProp: (prop) => !['profileImageBackgroundColor', 'useVerticalCard'].includes(prop), -})(({ profileImageBackgroundColor, useVerticalCard }) => (` + shouldForwardProp: (prop) => !['profileImageBackgroundColor', 'useVerticalCard', 'inChallengeList'].includes(prop), +})(({ profileImageBackgroundColor, useVerticalCard, inChallengeList }) => (` // align-items: center; background-color: ${profileImageBackgroundColor || DesignTokenColors.neutralUI50}; ${useVerticalCard ? `border: 1px solid ${DesignTokenColors.neutralUI100};` : ''} @@ -77,7 +77,7 @@ export const ChallengeImageMobilePlaceholder = styled('div', { max-height: 157px; min-height: 157px; ${ChallengeImageMobileSharedStyles} - width: 90%; + width: ${inChallengeList ? '90%' : '100%'}; overflow: hidden; `)); diff --git a/src/js/common/pages/Challenge/ChallengeHomePage.jsx b/src/js/common/pages/Challenge/ChallengeHomePage.jsx index 33e6b0b30..d06c8a58b 100644 --- a/src/js/common/pages/Challenge/ChallengeHomePage.jsx +++ b/src/js/common/pages/Challenge/ChallengeHomePage.jsx @@ -853,14 +853,16 @@ const MobileHeaderContentContainer = styled('div')(({ theme }) => (` const MobileHeaderOuterContainer = styled('div', { shouldForwardProp: (prop) => !['scrolledDown'].includes(prop), })(({ scrolledDown }) => (` - animation: ${slideDown} 300ms ease-in; // Not currently working -- needs debugging + // animation: ${slideDown} 300ms ease-in; // Not currently working -- needs debugging // transition: visibility 1s linear; // Not currently working -- needs debugging margin-top: ${marginTopOffset(scrolledDown)}; width: 100%; background-color: #fff; ${scrolledDown ? 'border-bottom: 1px solid #aaa' : ''}; ${scrolledDown ? `box_shadow: ${standardBoxShadow('wide')}` : ''}; - ${scrolledDown ? 'display: block' : 'display: none'}; + // ${scrolledDown ? 'display: block' : 'display: none'}; + transform: translateY(${scrolledDown ? 0 : '-150%'}); + transition: transform .3s ease-in-out; overflow: hidden; position: fixed; z-index: 1; From 756909a31dbad37ad08e8e044d57ee562a0303dd Mon Sep 17 00:00:00 2001 From: John E Mook Date: Tue, 18 Feb 2025 16:11:44 -0600 Subject: [PATCH 2/3] removes pigsCanFly check for buttons and resizes images for better aspect ratio --- .../ChallengeCardForListBody.jsx | 13 ++++++++----- .../ChallengeListRoot/ChallengeCardList.jsx | 17 +++++++---------- .../components/Style/ChallengeCardStyles.jsx | 11 ++++++----- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx index 626d2e3b3..92ac6089c 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx @@ -120,9 +120,9 @@ function ChallengeCardForListBody (props) { alt="" src={photoLargeUrl} style={useVerticalCard ? { - borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`, - borderTop: `1px solid ${DesignTokenColors.neutralUI100}`, - width: '110%', + // borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`, + // borderTop: `1px solid ${DesignTokenColors.neutralUI100}`, + objectFit: 'cover', } : {}} /> @@ -137,6 +137,7 @@ function ChallengeCardForListBody (props) { id="cimp2" profileImageBackgroundColor={profileImageBackgroundColor} useVerticalCard={useVerticalCard} + inChallengeList={inChallengeList} > ) : ( @@ -263,11 +265,12 @@ const JoinedDaysLeftOverlayMobile = styled('div')` const JoinedDaysLeftOverlayDesktop = styled('div')` position: absolute; - top: 135px; + top: 160px; left: 10px; `; export const SvgWatermarkWrapper = styled('div')` + margin-top: 15px; `; export default withStyles(styles)(ChallengeCardForListBody); diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx index 47c44381d..c0663ae2e 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx @@ -168,7 +168,6 @@ class ChallengeCardList extends Component { return null; } let numberDisplayed = 0; - const pigsCanFly = false; const inChallengeList = true; // checks if item is in the challenge list return ( @@ -200,15 +199,13 @@ class ChallengeCardList extends Component { > - {pigsCanFly && ( - - - - - - )} + + + + + ); })} diff --git a/src/js/common/components/Style/ChallengeCardStyles.jsx b/src/js/common/components/Style/ChallengeCardStyles.jsx index 7c1a5f8b7..4f6cc4239 100644 --- a/src/js/common/components/Style/ChallengeCardStyles.jsx +++ b/src/js/common/components/Style/ChallengeCardStyles.jsx @@ -42,7 +42,8 @@ export const ChallengeImageDesktopPlaceholder = styled('div', { ${useVerticalCard ? 'border-radius: 12px;' : ''} display: flex; justify-content: flex-start; - ${limitCardWidth ? 'height: 157px;' : `${useVerticalCard ? 'height: 157px;' : 'height: 117px;'}`} + align-items: center; + ${limitCardWidth ? 'height: 157px;' : `${useVerticalCard ? 'height: 187px;' : 'height: 117px;'}`} ${limitCardWidth ? 'min-height: 157px;' : `${useVerticalCard ? 'min-height: 157px;' : 'min-height: 117px;'}`} justify-content: center; ${limitCardWidth ? 'width: 250px;' : `${useVerticalCard ? 'width: 320px;' : 'width: 250px;'}`} @@ -72,7 +73,7 @@ export const ChallengeImageMobilePlaceholder = styled('div', { ${useVerticalCard ? `border: 1px solid ${DesignTokenColors.neutralUI100};` : ''} ${useVerticalCard ? 'border-radius: 12px;' : ''} display: flex; - height: 157px; + // height: 157px; justify-content: center; max-height: 157px; min-height: 157px; @@ -150,9 +151,9 @@ export const OneChallengePhotoWrapperMobile = styled('div')(({ theme }) => (` cursor: pointer; margin-bottom: 8px; margin-top: 8px; - height: 157px; - min-height: 157px; - max-height: 157px; + // height: 157px; + // min-height: 157px; + // max-height: 157px; ${theme.breakpoints.down('xs')} { margin-top: 0; min-height: auto; From 90e86311eb395a7ab11c70a771123c9acc8d4dcc Mon Sep 17 00:00:00 2001 From: John E Mook Date: Thu, 20 Feb 2025 10:49:08 -0600 Subject: [PATCH 3/3] Removed 'Your' from sidebar and header --- src/js/components/Navigation/SettingsPersonalSideBar.jsx | 2 +- src/js/components/Settings/SettingsYourData.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/components/Navigation/SettingsPersonalSideBar.jsx b/src/js/components/Navigation/SettingsPersonalSideBar.jsx index 9932a6962..4c3ccf07d 100644 --- a/src/js/components/Navigation/SettingsPersonalSideBar.jsx +++ b/src/js/components/Navigation/SettingsPersonalSideBar.jsx @@ -149,7 +149,7 @@ export default class SettingsPersonalSideBar extends Component { - Your Privacy & Data + Privacy & Data diff --git a/src/js/components/Settings/SettingsYourData.jsx b/src/js/components/Settings/SettingsYourData.jsx index 30bcbd0e2..9bbf86fc2 100644 --- a/src/js/components/Settings/SettingsYourData.jsx +++ b/src/js/components/Settings/SettingsYourData.jsx @@ -48,7 +48,7 @@ export default class SettingsYourData extends Component {

- Your Privacy & Data + Privacy & Data