Merge pull request #4115 from DaleMcGrew/Dale_WebApp_Oct15-2024

Challenge Header fixes for very small phones.
wevote · Oct 15, 2024 · c834c93 · c834c93
2 parents 931b142 + 66651ae
commit c834c93
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 74 deletions.
diff --git a/src/js/common/components/ChallengeInviteeListRoot/ConfirmYouSentInviteButton.jsx b/src/js/common/components/ChallengeInviteeListRoot/ConfirmYouSentInviteButton.jsx
@@ -66,6 +66,7 @@ const styles = () => ({
     padding: '2px 10px',
     borderRadius: 20,
     fontSize: 14,
+    lineHeight: '1.2',
   },
 });
 

diff --git a/src/js/common/components/ChallengeInviteeListRoot/InviteAgainButton.jsx b/src/js/common/components/ChallengeInviteeListRoot/InviteAgainButton.jsx
@@ -149,6 +149,7 @@ const styles = () => ({
     boxShadow: 'none !important',
     color: `${DesignTokenColors.primary500}`,
     fontSize: 14,
+    lineHeight: '1.2',
     marginRight: '-5px',
     padding: '0 20px',
     textTransform: 'none',

diff --git a/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx b/src/js/common/components/ChallengeParticipantListRoot/ChallengeParticipantListRoot.jsx
@@ -184,7 +184,7 @@ const TopSection = styled.div`
   align-items: center;
   background-color: white;
   box-shadow: 0px 6px 6px -2px rgba(0, 0, 0, 0.1);
-  z-index: 1;
+  // z-index: 1;
   position: sticky;
   top: 0;
   padding: 10px;

diff --git a/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx b/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx
@@ -23,15 +23,15 @@ const ImageHandler = React.lazy(() => import(/* webpackChunkName: 'ImageHandler'
 // React functional component example
 function ChallengeHeaderSimple (props) {
   renderLog('ChallengeHeaderSimple');  // Set LOG_RENDER_EVENTS to log all renders
-  const { challengeTitle, challengeWeVoteId, classes, challengePhotoLargeUrl, goToChallengeHome } = props;
+  const { challengeTitle, challengeWeVoteId, classes, challengePhotoLargeUrl, goToChallengeHome, hideCloseIcon } = props;
 
   return (
     <ChallengeHeaderSimpleOuterContainer id="politicianHeaderContainer">
       <ChallengeHeaderSimpleInnerContainer>
         <ChallengeHeaderSimpleContentContainer>
           <ChallengeTitleRow>
             <ChallengePhotoAndTitle
-              id={`officeItemCompressedCandidateImageAndName-${challengeWeVoteId}`}
+              id={`challengeHeaderSimpleImageAndName-${challengeWeVoteId}`}
             >
               {/* Challenge Image */}
               {challengePhotoLargeUrl && (
@@ -49,21 +49,23 @@ function ChallengeHeaderSimple (props) {
                 />
               </CandidateNameAndPartyWrapper>
             </ChallengePhotoAndTitle>
-            <CloseDrawerIconWrapper>
-              <div>
-                <IconButton
-                  aria-label="Close"
-                  className={classes.closeButton}
-                  id="goToChallengeHome"
-                  onClick={goToChallengeHome}
-                  size="large"
-                >
-                  <span className="u-cursor--pointer">
-                    <Close classes={{ root: classes.closeIcon }} />
-                  </span>
-                </IconButton>
-              </div>
-            </CloseDrawerIconWrapper>
+            {!hideCloseIcon && (
+              <CloseDrawerIconWrapper>
+                <div>
+                  <IconButton
+                    aria-label="Close"
+                    className={classes.closeButton}
+                    id="goToChallengeHome"
+                    onClick={goToChallengeHome}
+                    size="large"
+                  >
+                    <span className="u-cursor--pointer">
+                      <Close classes={{ root: classes.closeIcon }} />
+                    </span>
+                  </IconButton>
+                </div>
+              </CloseDrawerIconWrapper>
+            )}
           </ChallengeTitleRow>
         </ChallengeHeaderSimpleContentContainer>
       </ChallengeHeaderSimpleInnerContainer>
@@ -76,6 +78,7 @@ ChallengeHeaderSimple.propTypes = {
   challengeWeVoteId: PropTypes.string,
   classes: PropTypes.object,
   challengePhotoLargeUrl: PropTypes.string,
+  hideCloseIcon: PropTypes.bool,
 };
 
 const styles = () => ({

diff --git a/src/js/common/pages/Challenge/ChallengeHomePage.jsx b/src/js/common/pages/Challenge/ChallengeHomePage.jsx
@@ -16,7 +16,6 @@ import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import ChallengeStore from '../../stores/ChallengeStore';
 import VoterStore from '../../../stores/VoterStore';
 import CompleteYourProfileModalController from '../../components/Settings/CompleteYourProfileModalController';
-import { Candidate, CandidateNameH4, CandidateNameAndPartyWrapper, CandidateTopRow } from '../../../components/Style/BallotStyles';
 import {
   CampaignDescriptionDesktop, CampaignDescriptionDesktopWrapper, CampaignDescriptionWrapper,
   CampaignSubSectionSeeAll, CampaignSubSectionTitle, CampaignSubSectionTitleWrapper,
@@ -40,22 +39,20 @@ import standardBoxShadow from '../../components/Style/standardBoxShadow';
 import { cordovaBallotFilterTopMargin } from '../../../utils/cordovaOffsets';
 import { headroomWrapperOffset } from '../../../utils/cordovaCalculatedOffsets';
 import { getPageKey } from '../../../utils/cordovaPageUtils';
-import normalizedImagePath from '../../utils/normalizedImagePath';
 import ChallengeAbout from '../../components/Challenge/ChallengeAbout';
 import ChallengeParticipantListRoot from '../../components/ChallengeParticipantListRoot/ChallengeParticipantListRoot';
 import ChallengeInviteeListRoot from '../../components/ChallengeInviteeListRoot/ChallengeInviteeListRoot';
 import ThanksForViewingChallenge from '../../components/Challenge/ThanksForViewingChallenge';
 import ShareStore from '../../stores/ShareStore';
+import ChallengeHeaderSimple from '../../components/Navigation/ChallengeHeaderSimple';
 
 const ChallengeCardForList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCardForList' */ '../../components/ChallengeListRoot/ChallengeCardForList'));
 // const ChallengeCommentsList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCommentsList' */ '../../components/Challenge/ChallengeCommentsList'));
 const ChallengeRetrieveController = React.lazy(() => import(/* webpackChunkName: 'ChallengeRetrieveController' */ '../../components/Challenge/ChallengeRetrieveController'));
 // const ChallengeNewsItemList = React.lazy(() => import(/* webpackChunkName: 'ChallengeNewsItemList' */ '../../components/Challenge/ChallengeNewsItemList'));
 // const ChallengeShareChunk = React.lazy(() => import(/* webpackChunkName: 'ChallengeShareChunk' */ '../../components/Challenge/ChallengeShareChunk'));
-const ImageHandler = React.lazy(() => import(/* webpackChunkName: 'ImageHandler' */ '../../../components/ImageHandler'));
 const JoinChallengeButton = React.lazy(() => import(/* webpackChunkName: 'JoinChallengeButton' */ '../../components/Challenge/JoinChallengeButton'));
 const ReadMore = React.lazy(() => import(/* webpackChunkName: 'ReadMore' */ '../../components/Widgets/ReadMore'));
-const UpdateChallengeInformation = React.lazy(() => import(/* webpackChunkName: 'UpdateChallengeInformation' */ '../../components/Challenge/UpdateChallengeInformation'));
 
 const futureFeaturesDisabled = true;
 const nextReleaseFeaturesEnabled = webAppConfig.ENABLE_NEXT_RELEASE_FEATURES === undefined ? false : webAppConfig.ENABLE_NEXT_RELEASE_FEATURES;
@@ -103,6 +100,7 @@ class ChallengeHomePage extends Component {
       challengeDataFound: false,
       challengeDataNotFound: false,
       challengeDescription: '',
+      challengePhotoLargeUrl: '',
       challengeSEOFriendlyPath: '',
       challengeSEOFriendlyPathForDisplay: '', // Value for challenge already received
       challengeTitle: '',
@@ -339,6 +337,7 @@ class ChallengeHomePage extends Component {
     const {
       challengeDescription,
       challengePhotoLargeUrl,
+      challengePhotoMediumUrl,
       challengeSEOFriendlyPath,
       challengeTitle,
       challengeWeVoteId,
@@ -373,6 +372,7 @@ class ChallengeHomePage extends Component {
       challengeDescription,
       challengeDescriptionLimited,
       challengePhotoLargeUrl,
+      challengePhotoMediumUrl,
       challengeTitle,
       finalElectionDateInPast,
       isBlockedByWeVote,
@@ -406,12 +406,11 @@ class ChallengeHomePage extends Component {
       finalElectionDateInPast: false,
       // isSupportersCountMinimumExceeded: false,
       challengeWeVoteId: '',
-      politicalParty: '',
       challengeDataFound: false,
       challengeDataNotFound: false,
       challengeDescription: '',
       challengeDescriptionLimited: '',
-      challengeImageUrlLarge: '',
+      challengePhotoLargeUrl: '',
       challengeTitle: '',
       challengeWeVoteIdForDisplay: '', // We don't clear challengeWeVoteId because we may need it to load next challenge
       challengeSEOFriendlyPathForDisplay: '', // We don't clear challengeSEOFriendlyPath because we may need it to load next challenge
@@ -472,7 +471,7 @@ class ChallengeHomePage extends Component {
       chosenWebsiteName,
       challengeWeVoteId, loadSlow,
       challengeDataFound, challengeDataNotFound,
-      challengeDescription, challengeDescriptionLimited, challengeImageUrlLarge,
+      challengeDescription, challengeDescriptionLimited, challengePhotoLargeUrl,
       challengeSEOFriendlyPath, challengeSEOFriendlyPathForDisplay,
       challengeTitle, challengeWeVoteIdForDisplay,
       scrolledDown, sharedByDisplayName, thanksForViewingChallengeOn,
@@ -481,8 +480,6 @@ class ChallengeHomePage extends Component {
     // console.log('ChallengeHomePage render challengeSEOFriendlyPath: ', challengeSEOFriendlyPath, ', challengeSEOFriendlyPathForDisplay: ', challengeSEOFriendlyPathForDisplay);
     const challengeAdminEditUrl = `${webAppConfig.WE_VOTE_SERVER_ROOT_URL}challenge/${challengeWeVoteId}/summary`;
     // const candidateWeVoteId = CandidateStore.getCandidateWeVoteIdRunningFromChallengeWeVoteId(challengeWeVoteId);
-    const avatarBackgroundImage = normalizedImagePath('../img/global/svg-icons/avatar-generic.svg');
-    const avatarCompressed = 'card-main__avatar-compressed';
 
     if (challengeDataNotFound) {
       return (
@@ -549,29 +546,14 @@ class ChallengeHomePage extends Component {
             <MobileHeaderOuterContainer id="challengeHeaderContainer" scrolledDown={scrolledDown}>
               <MobileHeaderInnerContainer>
                 <MobileHeaderContentContainer>
-                  <CandidateTopRow>
-                    <Candidate
-                      id={`challengeHomeImageAndName-${challengeWeVoteIdForDisplay}`}
-                    >
-                      {/* Challenge Image */}
-                      <Suspense fallback={<></>}>
-                        <ImageHandler
-                          className={avatarCompressed}
-                          sizeClassName="icon-candidate-small u-push--sm "
-                          imageUrl={challengeImageUrlLarge}
-                          alt=""
-                          kind_of_ballot_item="CANDIDATE"
-                          style={{ backgroundImage: { avatarBackgroundImage } }}
-                        />
-                      </Suspense>
-                      {/* Challenge Name */}
-                      <CandidateNameAndPartyWrapper>
-                        <CandidateNameH4>
-                          {challengeTitle}
-                        </CandidateNameH4>
-                      </CandidateNameAndPartyWrapper>
-                    </Candidate>
-                  </CandidateTopRow>
+                  <ChallengeHeaderSimple
+                    challengeBasePath={this.getChallengeBasePath()}
+                    challengePhotoLargeUrl={challengePhotoLargeUrl}
+                    challengeTitle={challengeTitle}
+                    challengeWeVoteId={challengeWeVoteIdForDisplay}
+                    // goToChallengeHome={this.goToChallengeHome}
+                    hideCloseIcon
+                  />
                 </MobileHeaderContentContainer>
               </MobileHeaderInnerContainer>
             </MobileHeaderOuterContainer>
@@ -792,11 +774,6 @@ const styles = (theme) => ({
   },
 });
 
-const AboutAndEditFlex = styled('div')`
-  display: flex;
-  justify-content: space-between;
-`;
-
 const AboutSectionWrapper = styled('div')`
 `;
 
@@ -858,7 +835,7 @@ const slideDown = keyframes`
 `;
 
 const MobileHeaderContentContainer = styled('div')(({ theme }) => (`
-  padding: 15px 15px 0 15px;
+  // padding: 15px 15px 0 15px;
   margin: ${() => cordovaBallotFilterTopMargin()} auto 0 auto;
   position: relative;
   max-width: 960px;

diff --git a/src/js/common/pages/Politician/PoliticianDetailsPage.jsx b/src/js/common/pages/Politician/PoliticianDetailsPage.jsx
@@ -919,7 +919,7 @@ class PoliticianDetailsPage extends Component {
                 <MobileHeaderContentContainer>
                   <CandidateTopRow>
                     <Candidate
-                      id={`officeItemCompressedCandidateImageAndName-${politicianWeVoteId}`}
+                      id={`politicianDetailsImageAndName-${politicianWeVoteId}`}
                     >
                       {/* Candidate Image */}
                       <Suspense fallback={<></>}>
@@ -1385,10 +1385,10 @@ const MissingPoliticianText = styled('p')(({ theme }) => (`
 `));
 
 const slideIn = keyframes`
-  from { 
+  from {
     transform: translateY(-100%);
   }
-  to { 
+  to {
     transform: translateY(0);
   }
 `;

diff --git a/src/js/common/utils/challengeUtils.js b/src/js/common/utils/challengeUtils.js
@@ -46,6 +46,7 @@ export function getChallengeValuesFromIdentifiers (challengeSEOFriendlyPath, cha
       we_vote_hosted_challenge_photo_small_url: challengePhotoSmallUrl,
       we_vote_hosted_profile_image_url_large: weVoteHostedProfileImageUrlLarge,
     } = challenge);
+    // console.log('getChallengeValuesFromIdentifiers, challenge:', challenge);
     challengePoliticianList = ChallengeStore.getChallengePoliticianList(challengeWeVoteIdFromObject);
   }
   // console.log('getChallengeValuesFromIdentifiers, challenge: ', challenge, ', challengeWeVoteIdFromObject:', challengeWeVoteIdFromObject, ', challengeTitle:', challengeTitle);

diff --git a/src/js/components/VoterGuide/OrganizationModal.jsx b/src/js/components/VoterGuide/OrganizationModal.jsx
@@ -283,8 +283,6 @@ class OrganizationModal extends Component {
     }
   }
 
-
-
   // handleResizeLocal () {
   //   if (handleResize('Footer')) {
   //     // console.log('Footer handleResizeEntry update');
@@ -385,16 +383,16 @@ class OrganizationModal extends Component {
           <DrawerHeaderInnerContainer>
             <CandidateTopRow>
               <Candidate
-                      id={`officeItemCompressedCandidateImageAndName-${politicianWeVoteId}`}
+                id={`organizationModalCandidateImageAndName-${politicianWeVoteId}`}
               >
                 <Suspense fallback={<></>}>
                   <ImageHandler
-                          className={avatarCompressed}
-                          sizeClassName="icon-candidate-small u-push--sm "
-                          imageUrl={politicianImageUrlLarge}
-                          alt=""
-                          kind_of_ballot_item="CANDIDATE"
-                          style={{ backgroundImage: { avatarBackgroundImage } }}
+                    className={avatarCompressed}
+                    sizeClassName="icon-candidate-small u-push--sm "
+                    imageUrl={politicianImageUrlLarge}
+                    alt=""
+                    kind_of_ballot_item="CANDIDATE"
+                    style={{ backgroundImage: { avatarBackgroundImage } }}
                   />
                 </Suspense>
                 <CandidateNameAndPartyWrapper>
@@ -409,11 +407,11 @@ class OrganizationModal extends Component {
               <CloseDrawerHeaderIconWrapper>
                 <div>
                   <IconButton
-                  aria-label="Close"
-                  className={classes.closeButton}
-                  id="closeOrganizationModal"
-                  onClick={this.closeOrganizationModal}
-                  size="large"
+                    aria-label="Close"
+                    className={classes.closeButton}
+                    id="closeOrganizationModal"
+                    onClick={this.closeOrganizationModal}
+                    size="large"
                   >
                     <span className="u-cursor--pointer">
                       <Close classes={{ root: classes.closeIcon }} />
@@ -425,7 +423,7 @@ class OrganizationModal extends Component {
             <HeartToggleAndThermometerWrapper>
               <Suspense fallback={<span>&nbsp;</span>}>
                 <CampaignSupportThermometer
-                        campaignXWeVoteId={linkedCampaignXWeVoteId}
+                  campaignXWeVoteId={linkedCampaignXWeVoteId}
                 />
               </Suspense>
             </HeartToggleAndThermometerWrapper>