From 66651ae26bf7ffeb415c4b3c554a350e135e73f6 Mon Sep 17 00:00:00 2001 From: dalemcgrew Date: Tue, 15 Oct 2024 11:45:50 -0700 Subject: [PATCH] Challenge Header fixes for very small phones. --- .../ConfirmYouSentInviteButton.jsx | 1 + .../InviteAgainButton.jsx | 1 + .../ChallengeParticipantListRoot.jsx | 2 +- .../Navigation/ChallengeHeaderSimple.jsx | 37 +++++++------ .../pages/Challenge/ChallengeHomePage.jsx | 53 ++++++------------- .../Politician/PoliticianDetailsPage.jsx | 6 +-- src/js/common/utils/challengeUtils.js | 1 + .../VoterGuide/OrganizationModal.jsx | 28 +++++----- 8 files changed, 55 insertions(+), 74 deletions(-) diff --git a/src/js/common/components/ChallengeInviteeListRoot/ConfirmYouSentInviteButton.jsx b/src/js/common/components/ChallengeInviteeListRoot/ConfirmYouSentInviteButton.jsx index bcfc0ad6b..b12cd3a16 100755 --- 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 index 1eaa95eb5..29e38f531 100755 --- 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 index e7c9714c2..6736298e2 100644 --- 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 index 9f4eff22c..f44ae58ab 100644 --- a/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx +++ b/src/js/common/components/Navigation/ChallengeHeaderSimple.jsx @@ -23,7 +23,7 @@ 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 ( @@ -31,7 +31,7 @@ function ChallengeHeaderSimple (props) { {/* Challenge Image */} {challengePhotoLargeUrl && ( @@ -49,21 +49,23 @@ function ChallengeHeaderSimple (props) { /> - -
- - - - - -
- + {!hideCloseIcon && ( + +
+ + + + + +
+ + )} @@ -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 index 607b71a05..577a0a67c 100644 --- 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 { - - - {/* Challenge Image */} - }> - - - {/* Challenge Name */} - - - {challengeTitle} - - - - + @@ -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 index f094d19ba..dabd9a06d 100644 --- a/src/js/common/pages/Politician/PoliticianDetailsPage.jsx +++ b/src/js/common/pages/Politician/PoliticianDetailsPage.jsx @@ -919,7 +919,7 @@ class PoliticianDetailsPage extends Component { {/* Candidate Image */} }> @@ -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 index c5c6deb74..dac7f22b0 100644 --- 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 index 8f97162e5..a4f8a2fb0 100644 --- 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 { }> @@ -409,11 +407,11 @@ class OrganizationModal extends Component {
@@ -425,7 +423,7 @@ class OrganizationModal extends Component {  }>