Merge pull request #4255 from jedwardmook/WV-862-2.13.25

Democracy Challenges Cards: Adjust to be 250px wide - John Mook WV-862 [MERGE READY]
wevote · Feb 20, 2025 · a43aac6 · a43aac6
2 parents 4894985 + 756909a
commit a43aac6
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,13 +114,15 @@ function ChallengeCardForListBody (props) {
                   id="cimp4"
                   profileImageBackgroundColor={profileImageBackgroundColor}
                   useVerticalCard={useVerticalCard}
+                  inChallengeList={inChallengeList}
                 >
                   <ChallengeImageMobile
                     alt=""
                     src={photoLargeUrl}
                     style={useVerticalCard ? {
-                      borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
-                      borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
+                      // borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
+                      // borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
+                      objectFit: 'cover',
                     } : {}}
                   />
                 </ChallengeImageMobilePlaceholder>
@@ -135,6 +137,7 @@ function ChallengeCardForListBody (props) {
                 id="cimp2"
                 profileImageBackgroundColor={profileImageBackgroundColor}
                 useVerticalCard={useVerticalCard}
+                inChallengeList={inChallengeList}
               >
                 <SvgWatermarkWrapper>
                   <SvgImage
@@ -178,9 +181,10 @@ function ChallengeCardForListBody (props) {
                           borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
                           borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
                           borderRadius: '12px',
+                          objectFit: 'cover',
                         } : {}}
                         width={limitCardWidth ? '250px' : '320px'}
-                        height={limitCardWidth ? '157px' : '168px'}
+                        height={limitCardWidth ? '157px' : '188px'}
                       />
                     </ChallengeImageDesktopPlaceholder>
                   ) : (
@@ -223,6 +227,7 @@ function ChallengeCardForListBody (props) {
 ChallengeCardForListBody.propTypes = {
   challengeTitle: PropTypes.string,
   challengeWeVoteId: PropTypes.string,
+  inChallengeList: PropTypes.bool,
   inDraftMode: PropTypes.bool,
   hideCardMargins: PropTypes.bool,
   joinedAndDaysLeftOff: PropTypes.bool,
@@ -260,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
@@ -168,8 +168,7 @@ class ChallengeCardList extends Component {
       return null;
     }
     let numberDisplayed = 0;
-    const pigsCanFly = true;
-    const inChallengeList = true;
+    const inChallengeList = true; // checks if item is in the challenge list
     return (
       <Wrapper>
         <ListWrapper useVerticalCard={useVerticalCard}>
@@ -187,6 +186,7 @@ class ChallengeCardList extends Component {
                     limitCardWidth={useVerticalCard}
                     titleLengthRestricted
                     useVerticalCard={useVerticalCard}
+                    inChallengeList={inChallengeList}
                   />
                   {/* JoinedAndDaysLeft component positioned absolutely */}
                   <JoinedAndDaysForChallengePage>
@@ -199,15 +199,13 @@ class ChallengeCardList extends Component {
                 >
                   <ChallengeAbout challengeWeVoteId={oneChallenge.challenge_we_vote_id} />
                 </Link>
-                {pigsCanFly && (
-                  <JoinedButtonsOuterWrapper>
-                    <JoinedButtonsInnerWrapper>
-                      <JoinChallengeAndLearnMoreButtons
-                        inChallengeList={inChallengeList}
-                      />
-                    </JoinedButtonsInnerWrapper>
-                  </JoinedButtonsOuterWrapper>
-                )}
+                <JoinedButtonsOuterWrapper>
+                  <JoinedButtonsInnerWrapper>
+                    <JoinChallengeAndLearnMoreButtons
+                      inChallengeList={inChallengeList}
+                    />
+                  </JoinedButtonsInnerWrapper>
+                </JoinedButtonsOuterWrapper>
               </ChallengeCardForListVerticalWrapper>
             );
           })}

diff --git 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
@@ -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;'}`}
@@ -65,19 +66,19 @@ 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};` : ''}
   ${useVerticalCard ? 'border-radius: 12px;' : ''}
   display: flex;
-  height: 157px;
+  // height: 157px;
   justify-content: center;
   max-height: 157px;
   min-height: 157px;
   ${ChallengeImageMobileSharedStyles}
-  width: 90%;
+  width: ${inChallengeList ? '90%' : '100%'};
   overflow: hidden;
 `));
 
@@ -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;

diff --git 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;