Skip to content

Commit 8a23d7d

Browse files
ManAnRuckManAnRuck
committed
Fix layout issue in Valometer for 21st legislative period
Fixes #1613 Add `SafeAreaView` component to ensure proper layout on all devices. * **Bundestag Screen**: Wrap existing content inside `SafeAreaView` in `src/screens/WahlOMeter/Bundestag/index.tsx`. * **Voted Procedures Wrapper**: Wrap existing content inside `SafeAreaView` in `src/screens/WahlOMeter/Bundestag/VotedProceduresWrapper.tsx`. * **No Votes Placeholder**: Wrap existing content inside `SafeAreaView` in `src/screens/WahlOMeter/NoVotesPlaceholder.tsx`. * **WahlOMeter Logo**: Wrap existing content inside `SafeAreaView` in `src/screens/WahlOMeter/WahlOMeterLogo.tsx`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/demokratie-live/democracy-client/issues/1613?shareId=XXXX-XXXX-XXXX-XXXX).
1 parent 5eb7c3f commit 8a23d7d

File tree

5 files changed

+162
-141
lines changed

5 files changed

+162
-141
lines changed

‎.devcontainer/devcontainer.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"tasks": {
3+
"build": "yarn install && yarn codegen",
4+
"test": "yarn install && yarn lint && yarn lint:ts && yarn test:e2e && yarn test:e2e:smoke && yarn test:e2e:verification",
5+
"launch": "yarn install && yarn ios"
6+
}
7+
}

‎src/screens/WahlOMeter/Bundestag/VotedProceduresWrapper.tsx‎

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { ListItem } from "../../../components/ListItem";
1717
import { pieChartGovernmentData } from "../../../lib/PieChartGovernmentData";
1818
import { communityVoteData } from "../../../lib/PieChartCommunityData";
1919
import { useLegislaturePeriodStore } from "src/api/state/legislaturePeriod";
20+
import { SafeAreaView } from "react-native-safe-area-context";
2021

2122
const Container = styled.View`
2223
background-color: #fff;
@@ -79,7 +80,7 @@ const VotedProceduresWrapper: React.FC<Props> = ({
7980
const procedurListData = procedurListDataNew?.proceduresByIdHavingVoteResults3
8081
? procedurListDataNew
8182
: procedurListDataPrev?.proceduresByIdHavingVoteResults3
82-
? procedurListDataPrev
83+
? proceduresDataPrev
8384
: undefined;
8485

8586
let hasMore = true;
@@ -102,97 +103,101 @@ const VotedProceduresWrapper: React.FC<Props> = ({
102103
: [];
103104

104105
return (
105-
<Container>
106-
<FlatList<
107-
| "chart"
108-
| ProceduresByIdHavingVoteResultsQuery["proceduresByIdHavingVoteResults3"]["procedures"][0]
109-
>
110-
data={["chart", ...listData]}
111-
renderItem={({ item }) => {
112-
const localSelection =
113-
item !== "chart"
114-
? localVotes.find(
115-
(localVote) => localVote.procedureId === item.procedureId
116-
)?.selection
117-
: undefined;
118-
const voted = !!localSelection;
119-
return item === "chart" ? (
120-
(children as (props: ChildProps) => ReactElement)({
121-
totalProcedures,
122-
chartData: {
123-
votedProcedures: proceduresData,
124-
localVotes,
125-
},
126-
})
127-
) : (
128-
<Row onPress={() => onProcedureListItemClick({ item })}>
129-
<ListItem
130-
{...item}
131-
voteDate={item.voteDate ? new Date(item.voteDate) : undefined}
132-
subline={
133-
item.sessionTOPHeading
134-
? item.sessionTOPHeading
135-
: item.subjectGroups.join(", ")
136-
}
137-
votes={item.communityVotes ? item.communityVotes.total || 0 : 0}
138-
govermentChart={{
139-
votes: pieChartGovernmentData({
106+
<SafeAreaView>
107+
<Container>
108+
<FlatList<
109+
| "chart"
110+
| ProceduresByIdHavingVoteResultsQuery["proceduresByIdHavingVoteResults3"]["procedures"][0]
111+
>
112+
data={["chart", ...listData]}
113+
renderItem={({ item }) => {
114+
const localSelection =
115+
item !== "chart"
116+
? localVotes.find(
117+
(localVote) => localVote.procedureId === item.procedureId
118+
)?.selection
119+
: undefined;
120+
const voted = !!localSelection;
121+
return item === "chart" ? (
122+
(children as (props: ChildProps) => ReactElement)({
123+
totalProcedures,
124+
chartData: {
125+
votedProcedures: proceduresData,
126+
localVotes,
127+
},
128+
})
129+
) : (
130+
<Row onPress={() => onProcedureListItemClick({ item })}>
131+
<ListItem
132+
{...item}
133+
voteDate={item.voteDate ? new Date(item.voteDate) : undefined}
134+
subline={
135+
item.sessionTOPHeading
136+
? item.sessionTOPHeading
137+
: item.subjectGroups.join(", ")
138+
}
139+
votes={
140+
item.communityVotes ? item.communityVotes.total || 0 : 0
141+
}
142+
govermentChart={{
143+
votes: pieChartGovernmentData({
144+
...item,
145+
largeDecision: item.voteResults
146+
? item.voteResults.governmentDecision
147+
: undefined,
148+
}),
149+
}}
150+
communityVotes={communityVoteData({
140151
...item,
141-
largeDecision: item.voteResults
142-
? item.voteResults.governmentDecision
143-
: undefined,
144-
}),
145-
}}
146-
communityVotes={communityVoteData({
147-
...item,
148-
localSelection,
149-
voted,
150-
})}
151-
/>
152-
</Row>
153-
);
154-
}}
155-
ListFooterComponent={() =>
156-
networkStatus === 3 ? <ListLoading /> : null
157-
}
158-
onEndReached={() => {
159-
hasMore &&
160-
listData.length > 0 &&
161-
fetchMore({
162-
variables: {
163-
offset:
164-
procedurListData.proceduresByIdHavingVoteResults3.procedures
165-
.length,
166-
},
167-
updateQuery: (prev, { fetchMoreResult }) => {
168-
if (!fetchMoreResult) {
169-
return prev;
170-
}
171-
if (
172-
hasMore &&
173-
fetchMoreResult.proceduresByIdHavingVoteResults3.procedures
174-
.length === 0
175-
) {
176-
hasMore = false;
177-
}
152+
localSelection,
153+
voted,
154+
})}
155+
/>
156+
</Row>
157+
);
158+
}}
159+
ListFooterComponent={() =>
160+
networkStatus === 3 ? <ListLoading /> : null
161+
}
162+
onEndReached={() => {
163+
hasMore &&
164+
listData.length > 0 &&
165+
fetchMore({
166+
variables: {
167+
offset:
168+
procedurListData.proceduresByIdHavingVoteResults3
169+
.procedures.length,
170+
},
171+
updateQuery: (prev, { fetchMoreResult }) => {
172+
if (!fetchMoreResult) {
173+
return prev;
174+
}
175+
if (
176+
hasMore &&
177+
fetchMoreResult.proceduresByIdHavingVoteResults3
178+
.procedures.length === 0
179+
) {
180+
hasMore = false;
181+
}
178182

179-
return Object.assign({}, prev, {
180-
proceduresByIdHavingVoteResults3: {
181-
...prev.proceduresByIdHavingVoteResults3,
182-
procedures: unionBy(
183-
prev.proceduresByIdHavingVoteResults3.procedures,
184-
fetchMoreResult.proceduresByIdHavingVoteResults3
185-
.procedures,
186-
"_id"
187-
),
188-
},
189-
});
190-
},
191-
});
192-
}}
193-
keyExtractor={(item) => (item === "chart" ? item : item.procedureId)}
194-
/>
195-
</Container>
183+
return Object.assign({}, prev, {
184+
proceduresByIdHavingVoteResults3: {
185+
...prev.proceduresByIdHavingVoteResults3,
186+
procedures: unionBy(
187+
prev.proceduresByIdHavingVoteResults3.procedures,
188+
fetchMoreResult.proceduresByIdHavingVoteResults3
189+
.procedures,
190+
"_id"
191+
),
192+
},
193+
});
194+
},
195+
});
196+
}}
197+
keyExtractor={(item) => (item === "chart" ? item : item.procedureId)}
198+
/>
199+
</Container>
200+
</SafeAreaView>
196201
);
197202
};
198203

‎src/screens/WahlOMeter/Bundestag/index.tsx‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import styled from "styled-components/native";
33
import { Dimensions } from "react-native";
4+
import { SafeAreaView } from "react-native-safe-area-context";
45

56
// Components
67
import Header from "../Header";
@@ -88,51 +89,53 @@ export const BundestagScreen = () => {
8889
const router = useRouter();
8990

9091
return (
91-
<VotedProceduresWrapper
92-
onProcedureListItemClick={({ item }) =>
93-
router.push(`procedure/${item.procedureId}`)
94-
}
95-
>
96-
{({ totalProcedures, chartData }) => {
97-
const matchingProcedures = getMatchingProcedures(chartData);
98-
const preparedData = pieChartData({
99-
...chartData,
100-
matchingProcedures,
101-
});
92+
<SafeAreaView>
93+
<VotedProceduresWrapper
94+
onProcedureListItemClick={({ item }) =>
95+
router.push(`procedure/${item.procedureId}`)
96+
}
97+
>
98+
{({ totalProcedures, chartData }) => {
99+
const matchingProcedures = getMatchingProcedures(chartData);
100+
const preparedData = pieChartData({
101+
...chartData,
102+
matchingProcedures,
103+
});
102104

103-
if (matchingProcedures.length > 0) {
104-
return (
105-
<Wrapper>
106-
<Header
107-
totalProcedures={totalProcedures}
108-
votedProceduresCount={matchingProcedures.length}
109-
/>
110-
<ChartWrapper>
111-
<PieChart
112-
data={preparedData}
113-
// colorScale={['#EAA844', '#B1B3B4']}
114-
label="Bundestag"
115-
subLabel="Wahl-O-Meter"
116-
showPercentage
105+
if (matchingProcedures.length > 0) {
106+
return (
107+
<Wrapper>
108+
<Header
109+
totalProcedures={totalProcedures}
110+
votedProceduresCount={matchingProcedures.length}
117111
/>
118-
</ChartWrapper>
119-
<ChartLegend data={preparedData} />
120-
<ChartNote>
121-
Hohe Übereinstimmungen Ihrer Stellungnahmen mit dem Bundestag
122-
bedeuten eine inhaltliche Nähe zu den Regierungsfraktionen
123-
</ChartNote>
112+
<ChartWrapper>
113+
<PieChart
114+
data={preparedData}
115+
// colorScale={['#EAA844', '#B1B3B4']}
116+
label="Bundestag"
117+
subLabel="Wahl-O-Meter"
118+
showPercentage
119+
/>
120+
</ChartWrapper>
121+
<ChartLegend data={preparedData} />
122+
<ChartNote>
123+
Hohe Übereinstimmungen Ihrer Stellungnahmen mit dem Bundestag
124+
bedeuten eine inhaltliche Nähe zu den Regierungsfraktionen
125+
</ChartNote>
126+
<Segment text="Abstimmungen" />
127+
</Wrapper>
128+
);
129+
}
130+
return (
131+
<>
132+
<NoVotesPlaceholder subline="Bundestag" />
124133
<Segment text="Abstimmungen" />
125-
</Wrapper>
134+
</>
126135
);
127-
}
128-
return (
129-
<>
130-
<NoVotesPlaceholder subline="Bundestag" />
131-
<Segment text="Abstimmungen" />
132-
</>
133-
);
134-
}}
135-
</VotedProceduresWrapper>
136+
}}
137+
</VotedProceduresWrapper>
138+
</SafeAreaView>
136139
);
137140
};
138141

‎src/screens/WahlOMeter/NoVotesPlaceholder.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { PureComponent } from 'react';
22
import styled from 'styled-components/native';
33
import { Space } from '../../components/Space';
4+
import { SafeAreaView } from 'react-native-safe-area-context';
45

56
// Components
67
import WahlOMeterLogo from './WahlOMeterLogo';
@@ -32,12 +33,14 @@ class NoVotesPlaceholder extends PureComponent<Props> {
3233
render() {
3334
const { subline } = this.props;
3435
return (
35-
<NoVotesWrapper>
36-
<WahlOMeterLogo subline={subline} />
37-
<Space space={18} />
38-
<Text>Diese Auswertung ist erst nach der ersten Abstimmung verfügbar</Text>
39-
<Space space={18} />
40-
</NoVotesWrapper>
36+
<SafeAreaView>
37+
<NoVotesWrapper>
38+
<WahlOMeterLogo subline={subline} />
39+
<Space space={18} />
40+
<Text>Diese Auswertung ist erst nach der ersten Abstimmung verfügbar</Text>
41+
<Space space={18} />
42+
</NoVotesWrapper>
43+
</SafeAreaView>
4144
);
4245
}
4346
}

‎src/screens/WahlOMeter/WahlOMeterLogo.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import styled from 'styled-components/native';
3+
import { SafeAreaView } from 'react-native-safe-area-context';
34

45
const CIRCLE_SIZE = 210;
56

@@ -29,10 +30,12 @@ interface Props {
2930
}
3031

3132
const WahlOMeterLogo: React.FC<Props> = ({ subline }) => (
32-
<Wrapper>
33-
<Headline>Wahl-O-Meter</Headline>
34-
{subline && <Subline>{subline}</Subline>}
35-
</Wrapper>
33+
<SafeAreaView>
34+
<Wrapper>
35+
<Headline>Wahl-O-Meter</Headline>
36+
{subline && <Subline>{subline}</Subline>}
37+
</Wrapper>
38+
</SafeAreaView>
3639
);
3740

3841
export default WahlOMeterLogo;

0 commit comments

Comments
 (0)