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 (
-
+
-
+
);
}
}
@@ -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);
}