Skip to content

Commit

Permalink
make clickable area bigger on the Ballot Tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
Ivan Kordonets committed Mar 12, 2024
1 parent 3ff32ce commit b8d0ffe
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 60 deletions.
2 changes: 1 addition & 1 deletion src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2842,7 +2842,7 @@ h1,h2,h3,h4,h5,h6 {

.ballot__body__no-decision-tabs {
margin-top:16px;
padding-top:105px
padding-top:30px
}

@media all and (min-width: 375px) and (max-width: 575px) {
Expand Down
32 changes: 20 additions & 12 deletions src/js/components/CompleteYourProfile/CompleteYourProfile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,13 +456,16 @@ class CompleteYourProfile extends Component {
</span>
<Indicators>
{steps.map((step) => (
<Indicator
active={step.id === activeStep}
complete={step.completed}
key={`completeYourProfileIndicator-${step.id}`}
id={`completeYourProfileIndicator-${step.id}`}
onClick={() => this.goToStep(step.id)}
/>
<IndicatorContainer>
<Indicator
active={step.id === activeStep}
complete={step.completed}
key={`completeYourProfileIndicator-${step.id}`}
id={`completeYourProfileIndicator-${step.id}`}
onClick={() => this.goToStep(step.id)}
/>
</IndicatorContainer>

))}
</Indicators>
</Flex>
Expand Down Expand Up @@ -641,17 +644,22 @@ const Indicators = styled('div')`
margin-left: 8px;
`;

const IndicatorContainer = styled.div`
height: 30px;
flex: 1 1 0;
`;

const Indicator = styled('div', {
shouldForwardProp: (prop) => !['complete', 'active'].includes(prop),
})(({ complete, active }) => (`
cursor: pointer;
flex: 1 1 0;
height: 8px;
height: 30px;
margin: 0 4px;
${complete && active ? 'background: rgb(31,192,111); border-bottom: 2px solid #2E3C5D;' : ''}
${complete && !active ? 'background: rgb(31,192,111);' : ''}
${!complete && active ? 'background: #e1e1e1; border-bottom: 2px solid #2E3C5D;' : ''}
${!complete && !active ? 'background: #e1e1e1;' : ''}
${complete && active ? 'border-bottom: 8px solid rgb(31 192 111); background: rgb(31 192 111 / 23%);' : ''}
${complete && !active ? 'border-bottom: 8px solid rgb(31 192 111)' : ''}
${!complete && active ? 'background: rgb(244 244 244); border-bottom: 3px solid #2E3C5D;' : ''}
${!complete && !active ? 'background: rgb(225, 225, 225);' : ''}
`));

const Info = styled('span')`
Expand Down
117 changes: 70 additions & 47 deletions src/js/pages/Ballot/Ballot.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1119,7 +1119,7 @@ class Ballot extends Component {
if (scrolledDown) {
return '64px';
} else {
return '110px';
return '76px';
}
} else if (isCordova()) {
// Calculated approach Nov 2022
Expand Down Expand Up @@ -1543,46 +1543,52 @@ class Ballot extends Component {
<BallotWrapper padTop={paddingTop} padBottom={padBallotWindowBottomForCordova} id="ballotWrapper">
{/* eslint-disable-next-line no-nested-ternary */}
<div className={showBallotDecisionsTabs() ? 'row ballot__body' : isWebApp() || twoColumnDisplay ? 'row ballot__body__no-decision-tabs' : undefined}>
<WizzardTitleContainer>
<h1>How WeVote Works</h1>
<p>Follow these three actions to learn more</p>
</WizzardTitleContainer>

<div className="col-12">
{showCompleteYourProfile && (
<CompleteYourProfileWrapper>
<Suspense fallback={<></>}>
<CompleteYourProfile />
</Suspense>
</CompleteYourProfileWrapper>
<CompleteYourProfileWrapper>
<Suspense fallback={<></>}>
<CompleteYourProfile />
</Suspense>
</CompleteYourProfileWrapper>
)}
{emptyBallot}
</div>
{ballotWithItemsFromCompletionFilterType.length > 0 ? (
<BallotStatusMessage
ballotLocationChosen
googleCivicElectionId={this.state.googleCivicElectionId}
ballotLocationChosen
googleCivicElectionId={this.state.googleCivicElectionId}
/>
) : null}

<BallotOverflowWrapper className="col-12" id="ballotRoute-topOfBallot" style={isCordova() ? { paddingLeft: 0, paddingRight: 0 } : {}}>
{(isSearching && searchText) && (
<SearchTitle>
Searching for &quot;
{searchText}
&quot;
</SearchTitle>
<SearchTitle>
Searching for &quot;
{searchText}
&quot;
</SearchTitle>
)}
<BallotListWrapper>
{/* The rest of the ballot items */}
<div className="BallotList" id="BallotListId">
{(isSearching && ballotSearchResults && ballotSearchResults.length === 0) && (
<SearchResultsEmpty>
Please enter new search terms to find results.
</SearchResultsEmpty>
<SearchResultsEmpty>
Please enter new search terms to find results.
</SearchResultsEmpty>
)}
{(isSearching ? ballotSearchResults : ballotWithItemsFromCompletionFilterType).map((item) => {
// Ballot limited by items by race_office_level = (Federal, State, Local) or kind_of_ballot_item = (Measure)
// console.log('raceLevelFilterType:', raceLevelFilterType, ', item:', item);
// Ballot limited by items by race_office_level = (Federal, State, Local) or kind_of_ballot_item = (Measure)
// console.log('raceLevelFilterType:', raceLevelFilterType, ', item:', item);
if ((raceLevelFilterType === 'All' || isSearching ||
(item.kind_of_ballot_item === raceLevelFilterType.toUpperCase()) ||
raceLevelFilterType === item.race_office_level)) {
// console.log('Ballot item for BallotItemCompressed:', item);
// {...item}
// console.log('Ballot item for BallotItemCompressed:', item);
// {...item}
const key = item.we_vote_id;
// console.log('numberOfBallotItemsDisplayed:', numberOfBallotItemsDisplayed, ', numberOfBallotItemsToDisplay:', numberOfBallotItemsToDisplay);
if (numberOfBallotItemsDisplayed >= numberOfBallotItemsToDisplay) {
Expand Down Expand Up @@ -1613,22 +1619,22 @@ class Ballot extends Component {
>
<>
{!!(isSearching && searchTextString && item.foundInArray && item.foundInArray.length) && (
<SearchResultsFoundInExplanation>
{searchTextString}
{' '}
found in
{' '}
{item.foundInArray.map((oneItem) => {
const foundInStringItem = (
<span key={foundInItemsAlreadyShown}>
{foundInItemsAlreadyShown ? ', ' : ''}
{oneItem}
</span>
);
foundInItemsAlreadyShown += 1;
return foundInStringItem;
})}
</SearchResultsFoundInExplanation>
<SearchResultsFoundInExplanation>
{searchTextString}
{' '}
found in
{' '}
{item.foundInArray.map((oneItem) => {
const foundInStringItem = (
<span key={foundInItemsAlreadyShown}>
{foundInItemsAlreadyShown ? ', ' : ''}
{oneItem}
</span>
);
foundInItemsAlreadyShown += 1;
return foundInStringItem;
})}
</SearchResultsFoundInExplanation>
)}
<BallotItemCompressed
ballotItemDisplayName={item.ballot_item_display_name}
Expand All @@ -1653,25 +1659,25 @@ class Ballot extends Component {
{doubleFilteredBallotItemsLength === 0 &&
this.showUserEmptyOptions()}
{!!(totalNumberOfBallotItems) && (
<ShowMoreItemsWrapper id="showMoreItemsId" onClick={() => this.increaseNumberOfBallotItemsToDisplay()}>
<Suspense fallback={<></>}>
<ShowMoreItems
<ShowMoreItemsWrapper id="showMoreItemsId" onClick={() => this.increaseNumberOfBallotItemsToDisplay()}>
<Suspense fallback={<></>}>
<ShowMoreItems
loadingMoreItemsNow={loadingMoreItems}
numberOfItemsDisplayed={numberOfBallotItemsDisplayed}
numberOfItemsTotal={totalNumberOfBallotItems}
/>
</Suspense>
</ShowMoreItemsWrapper>
/>
</Suspense>
</ShowMoreItemsWrapper>
)}
{!!(loadingMoreItems && totalNumberOfBallotItems && (numberOfBallotItemsToDisplay < totalNumberOfBallotItems)) && (
<LoadingItemsWheel>
<CircularProgress />
</LoadingItemsWheel>
<LoadingItemsWheel>
<CircularProgress />
</LoadingItemsWheel>
)}
{(!isSearching && raceLevelFilterType !== 'All') && (
<BallotShowAllItemsFooter
<BallotShowAllItemsFooter
setActiveRaceItem={this.showAllBallotItems}
/>
/>
)}
</div>
</BallotListWrapper>
Expand Down Expand Up @@ -1903,4 +1909,21 @@ const BallotWrapper = styled('div', {
padding-bottom: ${padBottom};
`));

const WizzardTitleContainer = styled('div')`
display: flex;
flex-direction: column;
padding-left: 15px;
padding-top: 50px;
h1 {
font-size: 30px;
margin-bottom: 8px;
}
p {
font-size: 16px;
margin-bottom: 0px;
}
`;

export default withTheme(withStyles(styles)(Ballot));

0 comments on commit b8d0ffe

Please sign in to comment.