diff --git a/src/js/common/components/Settings/VoterPhotoUpload.jsx b/src/js/common/components/Settings/VoterPhotoUpload.jsx index 8e276b3ef..af19e4605 100644 --- a/src/js/common/components/Settings/VoterPhotoUpload.jsx +++ b/src/js/common/components/Settings/VoterPhotoUpload.jsx @@ -113,8 +113,8 @@ class VoterPhotoUpload extends Component { } } - handleCordovaDrop (files) { - console.log('files:', files); + handleCordovaDrop (event) { + // console.log('handleCordovaDrop event:', event); const { camera: { getPicture, DestinationType: { FILE_URI }, PictureSourceType: { PHOTOLIBRARY }, PopoverArrowDirection: { ARROW_ANY } } } = navigator; const { CameraPopoverOptions } = window; getPicture(async (pictureUrl) => { @@ -188,6 +188,10 @@ class VoterPhotoUpload extends Component { thumbnail.style.display = 'none'; thumbnail.src = ''; } + const cordovaDropZone = document.querySelector('#cordovaDropZoneReplica'); + if(cordovaDropZone) { + cordovaDropZone.style.display = 'inline-block'; + } }; preparePhotoForUpload = async (url) => { @@ -201,6 +205,7 @@ class VoterPhotoUpload extends Component { dataUrl = url; } let thumbnail; + const cordovaDropZone = document.querySelector('#cordovaDropZoneReplica'); const { isWebApp } = this.state; if (isWebApp) { thumbnail = document.querySelector('img[role="presentation"]'); @@ -210,6 +215,8 @@ class VoterPhotoUpload extends Component { if (thumbnail) { thumbnail.style.display = 'inline'; thumbnail.src = dataUrl; + // console.log('preparePhotoForUpload cordovaDropZone display none', dataUrl); + cordovaDropZone.style.display = 'none'; } const { politicianWeVoteId, onUpload } = this.props; if (politicianWeVoteId) { @@ -242,6 +249,10 @@ class VoterPhotoUpload extends Component { pageDetails: getPageDetails(), }; TagManager.dataLayer({ dataLayer: dataLayerObject }); + this.setState({ + politicianProfileUploadedImageUrlLarge: '', + voterProfileUploadedImageUrlLarge: '', + }) this.clearThumbnail(); }; @@ -259,8 +270,11 @@ class VoterPhotoUpload extends Component { const { resolveLocalFileSystemURL } = window; resolveLocalFileSystemURL(uri, async (fileEntry) => { const entryUrl = fileEntry.toURL(); - await this.save(entryUrl); - }, (err) => console.error('camera resolveLocalFileSystemURL error', err)); + await this.preparePhotoForUpload(entryUrl); + }, (err) => { + console.log('cameraCallback', err.message); + console.error('camera resolveLocalFileSystemURL error', err); + }) } render () { @@ -284,11 +298,12 @@ class VoterPhotoUpload extends Component { initialFiles = [voterProfileUploadedImageUrlLarge]; } } + return ( - +
e.preventDefault()}> - - + + {imageToDisplay ? ( @@ -323,22 +338,32 @@ class VoterPhotoUpload extends Component { /> ) : ( <> - - Choose Photo - + +
+ + Upload profile photo + + +
+
)} )} -
-
+ +
-
+ ); } } @@ -374,11 +399,28 @@ const styles = (theme) => ({ }, }); -const ColumnFullWidth = styled('div')` +const ColumnFullWidthPhotoUpload = styled('div')` padding: 8px 12px; width: 100%; `; +const CordovaDropZoneReplica = styled('div', { + shouldForwardProp: (prop) => !['show'].includes(prop), +})(({ show }) => (` + color: #999; + position: relative; + width: 100%; + min-height: 250px; + background-color: rgb(255, 255, 255); + border: dashed rgba(0, 0, 0, 0.12); + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + overflow: hidden; + display: ${show ? 'inline-block' : 'none'}; +`)); + + const DeleteLink = styled('div')` `; @@ -386,7 +428,7 @@ const ChooseLink = styled('div')` margin: 0 0 20px 18px; `; -const OuterWrapper = styled('div')` +const OuterWrapperPhotoUpload = styled('div')` width: 100%; `; @@ -410,7 +452,7 @@ const VoterPhotoWrapper = styled('div', { width: 100%; `)); -const Wrapper = styled('div')` +const FormInnerWrapper = styled('div')` display: flex; justify-content: space-between; margin-left: -12px; diff --git a/src/js/common/utils/isMobileScreenSize.js b/src/js/common/utils/isMobileScreenSize.js index 4949b5673..d5d2951e7 100644 --- a/src/js/common/utils/isMobileScreenSize.js +++ b/src/js/common/utils/isMobileScreenSize.js @@ -8,7 +8,7 @@ function isCordova () { export default function isMobileScreenSize () { // const { muiThemeGlobal: { breakpoints: { values: { tabMin } } } } = window; - const tabMin = window?.muiThemeGlobal?.breakpoints?.values?.tabMin ?? 786; + const tabMin = window?.muiThemeGlobal?.breakpoints?.values?.tabMin || 786; const width = isCordova() ? window.screen.availWidth : window.innerWidth; // console.log('isMobileScreenSize isCordova, width, maxWidth, return value:', isCordova(), width, tabMin, width < tabMin); return width < tabMin || isCordovaPhone(); diff --git a/src/js/components/Ballot/BallotTitleHeader.jsx b/src/js/components/Ballot/BallotTitleHeader.jsx index c1a5b5fb2..62d793295 100644 --- a/src/js/components/Ballot/BallotTitleHeader.jsx +++ b/src/js/components/Ballot/BallotTitleHeader.jsx @@ -285,10 +285,12 @@ class BallotTitleHeader extends Component { > Ballot for {' '} - - {(textForMapSearch && textForMapSearch !== '') ? textForMapSearch : originalTextAddress} - - {linksOff ? <> : editIconStyled} + + {linksOff ? <> : editIconStyled} ) : ( @@ -304,10 +306,11 @@ class BallotTitleHeader extends Component { > Ballot for {' '} - - {substitutedAddress} - - {linksOff ? <> : editIconStyled} + : editIconStyled} + /> ) : ( diff --git a/src/js/components/Ballot/BallotTitleHeaderNationalPlaceholder.jsx b/src/js/components/Ballot/BallotTitleHeaderNationalPlaceholder.jsx index cadec959f..2a5c0479d 100644 --- a/src/js/components/Ballot/BallotTitleHeaderNationalPlaceholder.jsx +++ b/src/js/components/Ballot/BallotTitleHeaderNationalPlaceholder.jsx @@ -180,9 +180,8 @@ class BallotTitleHeaderNationalPlaceholder extends Component { if (event.key === 'Enter') this.showSelectBallotModalEditAddress(); }} className={linksOff ? '' : 'u-link-color'} - > - {textForMapSearch} - + innerComponent={textForMapSearch} + /> ) : ( + {innerComponent} + + ); + } else { + return ( + + {innerComponent} + + ); + } +} + +export const AddressSpanLimitedDesktop = styled('span')` + //color: #206DB3; /* primary500 */ +`; + +export const AddressSpanLimitedMobile = styled('div')` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 100%; + margin-bottom: -7px; `; diff --git a/src/js/pages/Ballot/Ballot.jsx b/src/js/pages/Ballot/Ballot.jsx index d9b123434..b62be3721 100644 --- a/src/js/pages/Ballot/Ballot.jsx +++ b/src/js/pages/Ballot/Ballot.jsx @@ -1741,8 +1741,7 @@ const BallotBottomWrapper = styled('div', { shouldForwardProp: (prop) => !['scrolledDown'].includes(prop), })(({ scrolledDown, theme }) => { return (` - ${scrolledDown || showBallotDecisionsTabs() ? 'margin-top: 12px;' : 'margin-top: 38px;'} - ${isCordova() && isMobileScreenSize() && 'margin-top: 0 !important;'} + ${isCordova() && isMobileScreenSize() ? 'margin-top: 0 !important;' : 'margin-top: 12px'} transition: all 150ms ease-in; width: 100%; ${theme.breakpoints.down('sm') && isWebApp()} { @@ -1751,6 +1750,8 @@ const BallotBottomWrapper = styled('div', { ${(isCordova() && pageEnumeration() === CordovaPageConstants.ballotSmHdrWild) ? 'padding-top: 20px' : ''} `); }); +// Removed Jul 29, 2026 ${scrolledDown || showBallotDecisionsTabs() ? 'margin-top: 12px;' : 'margin-top: 38px;'} + const BallotOverflowWrapper = styled('div')` overflow-x: hidden; diff --git a/src/js/utilsApi/showBallotDecisionsTabs.js b/src/js/utilsApi/showBallotDecisionsTabs.js index 6c54ac52e..f131f0467 100644 --- a/src/js/utilsApi/showBallotDecisionsTabs.js +++ b/src/js/utilsApi/showBallotDecisionsTabs.js @@ -1,13 +1,8 @@ -import { isWebApp } from '../common/utils/isCordovaOrWebApp'; -import BallotStore from '../stores/BallotStore'; // eslint-disable-line import/no-cycle +import BallotStore from '../stores/BallotStore'; // eslint-disable-line import/no-cycle export default function showBallotDecisionsTabs () { // Dale 2026-07-18 I would like showBallotDecisionsTabs to not be based on mobile vs. desktop, but only based on if ballot choices have been made. // WV-679 is the ticket where the UX team is reworking the design for in all screen sizes. - - // src/js/common/utils/isMobileScreenSize.js should be used to avoid problems, 500 is an imperfect criteria - // const isMobileScreenSizeForShowBallotDecisionsTabs = window.innerWidth < 500; - // console.log('window.innerWidth:', window.innerWidth, ', isMobileScreenSizeForShowBallotDecisionsTabs:', isMobileScreenSizeForShowBallotDecisionsTabs); return (BallotStore.ballotLength !== BallotStore.ballotRemainingChoicesLength) && (BallotStore.ballotRemainingChoicesLength > 0); }