From 247517d1b8ee7a77bfb5c32be2607646cc0c1ef8 Mon Sep 17 00:00:00 2001 From: stevepodell Date: Wed, 22 Jul 2026 11:18:41 -0700 Subject: [PATCH 1/2] WV-4815 Election Finder "Show More" Cordova Various css fixes to get the menu to show up. `if (searchText)` doesn't work as anticipated if searchText is a string, that never is set to null or undefined. --- src/js/components/Ready/ElectionCountdown.jsx | 6 +++--- src/js/components/Style/BallotTitleHeaderStyles.jsx | 2 -- src/js/pages/ElectionFinder/ElectionFinderHome.jsx | 8 ++++---- src/js/pages/ElectionFinder/electionFinderStyles.js | 9 +++++++++ 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/js/components/Ready/ElectionCountdown.jsx b/src/js/components/Ready/ElectionCountdown.jsx index b23cbd915..c97c515c7 100644 --- a/src/js/components/Ready/ElectionCountdown.jsx +++ b/src/js/components/Ready/ElectionCountdown.jsx @@ -346,8 +346,8 @@ const CardTitleUpcoming = styled('h1')(({ theme }) => (` margin-bottom: 8px; margin-top: 12px; text-align: center; - ${theme.breakpoints.down('xs')} { - font-size: 60px; + ${theme.breakpoints.down('md')} { + font-size: 40px; } `)); @@ -358,7 +358,7 @@ const CardTitleToday = styled('h1')(({ theme }) => (` margin-bottom: 8px; margin-top: 0; text-align: center; - ${theme.breakpoints.down('xs')} { + ${theme.breakpoints.down('md')} { font-size: 40px; } `)); diff --git a/src/js/components/Style/BallotTitleHeaderStyles.jsx b/src/js/components/Style/BallotTitleHeaderStyles.jsx index cacc4fc8d..9a76dd909 100644 --- a/src/js/components/Style/BallotTitleHeaderStyles.jsx +++ b/src/js/components/Style/BallotTitleHeaderStyles.jsx @@ -63,8 +63,6 @@ export const ElectionNameH1 = styled('h1', { padding-top: 5px; padding-bottom: 18px; ${theme.breakpoints.down('sm')} { - padding-top: 5px; - padding-bottom: 10px; white-space: normal; } ${() => (isIOs6p1OrSmaller() ? 'font-weight: 600;' : '')} diff --git a/src/js/pages/ElectionFinder/ElectionFinderHome.jsx b/src/js/pages/ElectionFinder/ElectionFinderHome.jsx index 7c6b9e0ce..c351419ad 100644 --- a/src/js/pages/ElectionFinder/ElectionFinderHome.jsx +++ b/src/js/pages/ElectionFinder/ElectionFinderHome.jsx @@ -148,7 +148,7 @@ function ElectionFinderHome () { const emptyListMessage = (() => { if (electionList.length === 0) return 'Loading...'; - if (searchText) { + if (searchText.length) { if (candidateSearchLoading) return 'Fetching data...'; return 'Your search did not return any results. Try another search.'; } @@ -256,7 +256,7 @@ function ElectionFinderHome () { - {(searchText ? displayElections : displayElections.slice(0, visibleCount)).map((election) => { + {(searchText.length ? displayElections : displayElections.slice(0, visibleCount)).map((election) => { const googleCivicElectionId = election.google_civic_election_id; const sc = (election.state_code_list && election.state_code_list.length > 0) ? election.state_code_list[0].toLowerCase() : @@ -313,7 +313,7 @@ function ElectionFinderHome () { ]} /> - {searchText && election.matchedOffices && election.matchedOffices.map((office) => ( + {searchText.length > 0 && election.matchedOffices && election.matchedOffices.map((office) => ( {highlightMatch(office.officeName, searchText)} @@ -340,7 +340,7 @@ function ElectionFinderHome () { ); })} - {!searchText && displayElections.length > visibleCount && ( + {searchText.length < 1 && displayElections.length > visibleCount && ( setVisibleCount((prev) => prev + 50)}> {`Show more (${displayElections.length - visibleCount} remaining)`} diff --git a/src/js/pages/ElectionFinder/electionFinderStyles.js b/src/js/pages/ElectionFinder/electionFinderStyles.js index c2fe82066..68ede8096 100644 --- a/src/js/pages/ElectionFinder/electionFinderStyles.js +++ b/src/js/pages/ElectionFinder/electionFinderStyles.js @@ -4,6 +4,9 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import DesignTokenColors from '../../common/components/Style/DesignTokenColors'; import { ElectionStateLabel } from '../../components/Style/BallotTitleHeaderStyles'; +import muiTheme from '../../common/components/Style/muiTheme'; + +const theme = muiTheme; export const ActionChip = styled('button')` display: inline-flex; @@ -166,6 +169,9 @@ export const ElectionLink = styled('span')` &:hover { text-decoration: underline; } + ${theme.breakpoints.down('md')} { + font-size: 14px; + } `; export const ElectionList = styled('div')` @@ -388,6 +394,9 @@ export const ShowMoreButton = styled('button')` border-color: #2e3c5d; color: ${DesignTokenColors.neutral800}; } + ${theme.breakpoints.down('md')} { + margin-bottom: 70px; + } `; export const StateSelectCaret = styled('span')` From 2cce6814028b41f8126e647c05f664c01bdcac42 Mon Sep 17 00:00:00 2001 From: stevepodell Date: Wed, 22 Jul 2026 15:06:14 -0700 Subject: [PATCH 2/2] WV-4819 Extra room at bottom of Settings page --- .../Drawers/DrawerTemplateHeaderProfile.jsx | 4 ++-- src/js/components/Settings/SettingsProfile.jsx | 12 +++++++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/js/components/Drawers/DrawerTemplateHeaderProfile.jsx b/src/js/components/Drawers/DrawerTemplateHeaderProfile.jsx index e6bd61420..69eda8ab1 100644 --- a/src/js/components/Drawers/DrawerTemplateHeaderProfile.jsx +++ b/src/js/components/Drawers/DrawerTemplateHeaderProfile.jsx @@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import styled from 'styled-components'; import DesignTokenColors from '../../common/components/Style/DesignTokenColors'; import AppObservableStore, { messageService } from '../../common/stores/AppObservableStore'; -import { hasCordovaNotch, heightOfCordovaSpacer, isIPadSmallerThan13 } from '../../common/utils/cordovaUtils'; +import { hasCordovaNotch, heightOfCordovaSpacer, isIPadSmallerThan13, isIPhoneMiniOrSmaller } from '../../common/utils/cordovaUtils'; import { renderLog } from '../../common/utils/logging'; import { CloseDrawerIconWrapper, DrawerHeaderAnimateDownInnerContainer, DrawerHeaderAnimateDownOuterContainer, DrawerHeaderWrapper, DrawerTitle } from '../Style/drawerLayoutStyles'; @@ -133,7 +133,7 @@ DrawerTemplateHeaderProfile.propTypes = { const styles = () => ({ drawer: { marginTop: `${heightOfCordovaSpacer(true)} !important`, - width: '80%', + width: isIPhoneMiniOrSmaller() ? '90%' : '80%', }, dialogPaper: { display: 'block', diff --git a/src/js/components/Settings/SettingsProfile.jsx b/src/js/components/Settings/SettingsProfile.jsx index 51bf4a0e6..66871510c 100755 --- a/src/js/components/Settings/SettingsProfile.jsx +++ b/src/js/components/Settings/SettingsProfile.jsx @@ -8,6 +8,8 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import AnalyticsActions from '../../actions/AnalyticsActions'; import LoadingWheel from '../../common/components/Widgets/LoadingWheel'; +import AppObservableStore from '../../common/stores/AppObservableStore'; +import { isCordova } from '../../common/utils/isCordovaOrWebApp'; import { renderLog } from '../../common/utils/logging'; import VoterStore from '../../stores/VoterStore'; import { HeaderContentContainer } from '../Style/pageLayoutStyles'; @@ -17,7 +19,6 @@ import SettingsWidgetAccountType from './SettingsWidgetAccountType'; import SettingsWidgetFirstLastName from './SettingsWidgetFirstLastName'; import SettingsWidgetOrganizationDescription from './SettingsWidgetOrganizationDescription'; import SettingsWidgetOrganizationWebsite from './SettingsWidgetOrganizationWebsite'; -import AppObservableStore from '../../common/stores/AppObservableStore'; class SettingsProfile extends Component { constructor (props) { @@ -62,7 +63,7 @@ class SettingsProfile extends Component { -
+
@@ -88,7 +89,7 @@ class SettingsProfile extends Component { />
- + ); } @@ -124,4 +125,9 @@ const IdIcon = styled(AccountBoxIcon)` margin: 8px 8px 0 -2px; `; +const SettingsCardContainer = styled('div')` + padding-bottom: ${isCordova() ? '66px' : '8px'}; +`; + + export default withStyles(styles)(SettingsProfile);