Skip to content

Commit 6ceef4d

Browse files
AareFabrikAareFabrik
committed
PageTeam responsive
1 parent 789968f commit 6ceef4d

File tree

3 files changed

+111
-159
lines changed

3 files changed

+111
-159
lines changed

‎next/app/(main)/team/PageTeam.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use client";
2+
3+
import { Text, View } from "@/lib/server-react-native";
4+
import StyleSheet from "react-native-media-query";
5+
6+
import Fonts from "@/lib/Fonts";
7+
import { Api } from "@/lib/api";
8+
import {
9+
ItemsPageTeam,
10+
ItemsPageTeamDirectusUsers,
11+
Users,
12+
} from "@/lib/api/data-contracts";
13+
import MemberInfo from "@/components/MemberInfo";
14+
import Colors from "@/lib/Colors";
15+
import Metrics from "@/lib/Metrics";
16+
import { Metadata } from "next";
17+
import { notFound } from "next/navigation";
18+
import { logError } from "@/lib/loging";
19+
import BreadCrump from "@/components/BreadCrumb";
20+
21+
export default function TeaamPage({ pageData }) {
22+
const data = pageData;
23+
24+
let memberData = [
25+
{ title: "RaBe Staff", members: data.members_staff },
26+
{ title: "Vorstandsmitglieder", members: data.membermanagement },
27+
{ title: "Programmkommissionsmitglieder", members: data.members_program },
28+
];
29+
30+
console.log("memberData", memberData);
31+
32+
return (
33+
<View style={styles.outerContainer} dataSet={{ media: ids.outerContainer }}>
34+
<View style={styles.container} dataSet={{ media: ids.container }}>
35+
<BreadCrump label1={"Über Rabe"} label2={"Team"}></BreadCrump>
36+
37+
<View style={{}}>
38+
<Text style={{ ...Fonts.style.text }}>{data.text}</Text>
39+
</View>
40+
41+
{memberData.map((item, index) => {
42+
return (
43+
<View>
44+
<Text
45+
style={{
46+
...Fonts.style.h3,
47+
paddingTop: Metrics.tripleBaseMargin,
48+
}}
49+
>
50+
{item.title}
51+
</Text>
52+
{item.members && item.members.length > 0 && (
53+
<View
54+
style={{
55+
paddingTop: Metrics.baseMargin,
56+
flexDirection: "row",
57+
flexWrap: "wrap",
58+
}}
59+
>
60+
{item.members.map(
61+
(item: ItemsPageTeamDirectusUsers, index) => {
62+
let user: Users = item.directus_users_id as Users;
63+
return (
64+
<MemberInfo
65+
key={"memberstaff" + index}
66+
user={user}
67+
></MemberInfo>
68+
);
69+
}
70+
)}
71+
</View>
72+
)}
73+
</View>
74+
);
75+
})}
76+
</View>
77+
</View>
78+
);
79+
}
80+
81+
const { styles, ids } = StyleSheet.create({
82+
outerContainer: {
83+
width: "100%",
84+
alignSelf: "center",
85+
alignItems: "center",
86+
},
87+
container: {
88+
width: "74vw",
89+
alignSelf: "center",
90+
paddingTop: Metrics.tripleBaseMargin,
91+
paddingBottom: Metrics.tripleBaseMargin,
92+
"@media (max-width: 910px)": {
93+
width: "90vw",
94+
paddingBottom: Metrics.quadBaseMargin,
95+
},
96+
},
97+
});

‎next/app/(main)/team/page.tsx‎

Lines changed: 4 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,9 @@
1-
import { Text, View } from "@/lib/server-react-native";
2-
import StyleSheet from "react-native-media-query";
3-
4-
import Fonts from "@/lib/Fonts";
51
import { Api } from "@/lib/api";
6-
import {
7-
ItemsPageTeam,
8-
ItemsPageTeamDirectusUsers,
9-
Users,
10-
} from "@/lib/api/data-contracts";
11-
import MemberInfo from "@/components/MemberInfo";
12-
import Colors from "@/lib/Colors";
13-
import Metrics from "@/lib/Metrics";
2+
import { ItemsPageTeam } from "@/lib/api/data-contracts";
3+
import { logError } from "@/lib/loging";
144
import { Metadata } from "next";
155
import { notFound } from "next/navigation";
16-
import { logError } from "@/lib/loging";
17-
18-
const { styles } = StyleSheet.create({
19-
container: {
20-
width: "74vw",
21-
alignSelf: "center",
22-
paddingVertical: Metrics.tripleBaseMargin,
23-
},
24-
link: {
25-
color: "blue",
26-
},
27-
textContainer: {
28-
alignItems: "center",
29-
marginTop: 16,
30-
},
31-
text: {
32-
...Fonts.style.text,
33-
alignItems: "center",
34-
fontSize: 24,
35-
marginBottom: 24,
36-
},
37-
});
6+
import PageTeam from "./PageTeam";
387

398
export const metadata: Metadata = {
409
title: "Team",
@@ -73,126 +42,5 @@ async function getTeamData() {
7342

7443
export default async function TeaamPage(props) {
7544
const data = await getTeamData();
76-
return (
77-
<View>
78-
<View style={styles.container}>
79-
<View
80-
style={{
81-
flexDirection: "row",
82-
// backgroundColor: "green",
83-
}}
84-
>
85-
<Text style={{ ...Fonts.style.text }}>{"Über Rabe"}</Text>
86-
<Text
87-
style={[
88-
{ ...Fonts.style.h4 },
89-
{ color: Colors.green, paddingHorizontal: Metrics.baseMargin },
90-
]}
91-
>
92-
{"\u2192"}
93-
</Text>
94-
<Text style={{ ...Fonts.style.text }}>{"Team"}</Text>
95-
</View>
96-
97-
<View style={{ paddingTop: Metrics.tripleBaseMargin }}>
98-
<Text style={{ ...Fonts.style.text }}>{data.text}</Text>
99-
</View>
100-
101-
<View>
102-
<Text
103-
style={{
104-
...Fonts.style.h3,
105-
paddingTop: Metrics.tripleBaseMargin,
106-
}}
107-
>
108-
{"RaBe Staff"}
109-
</Text>
110-
{data.members_staff && (
111-
<View
112-
style={{
113-
paddingTop: Metrics.baseMargin,
114-
flexDirection: "row",
115-
flexWrap: "wrap",
116-
}}
117-
>
118-
{data.members_staff.map(
119-
(item: ItemsPageTeamDirectusUsers, index) => {
120-
let user: Users = item.directus_users_id as Users;
121-
return (
122-
<MemberInfo
123-
key={"memberstaff" + index}
124-
user={user}
125-
></MemberInfo>
126-
);
127-
}
128-
)}
129-
</View>
130-
)}
131-
</View>
132-
133-
<View>
134-
<Text
135-
style={{
136-
...Fonts.style.h3,
137-
paddingTop: Metrics.tripleBaseMargin,
138-
}}
139-
>
140-
{"Vorstandsmitglieder"}
141-
</Text>
142-
{data.members_management && (
143-
<View
144-
style={{
145-
paddingTop: Metrics.baseMargin,
146-
flexDirection: "row",
147-
flexWrap: "wrap",
148-
}}
149-
>
150-
{data.members_management.map(
151-
(item: ItemsPageTeamDirectusUsers, index) => {
152-
let user: Users = item.directus_users_id as Users;
153-
return (
154-
<MemberInfo
155-
key={"membermanagement" + index}
156-
user={user}
157-
></MemberInfo>
158-
);
159-
}
160-
)}
161-
</View>
162-
)}
163-
</View>
164-
165-
<View
166-
style={{
167-
paddingTop: Metrics.tripleBaseMargin,
168-
}}
169-
>
170-
<Text style={{ ...Fonts.style.h3 }}>
171-
{"Programmkommissionsmitglieder"}
172-
</Text>
173-
{data.members_program && (
174-
<View
175-
style={{
176-
paddingTop: Metrics.baseMargin,
177-
flexDirection: "row",
178-
flexWrap: "wrap",
179-
}}
180-
>
181-
{data.members_program.map(
182-
(item: ItemsPageTeamDirectusUsers, index) => {
183-
let user: Users = item.directus_users_id as Users;
184-
return (
185-
<MemberInfo
186-
key={"memberprogram" + index}
187-
user={user}
188-
></MemberInfo>
189-
);
190-
}
191-
)}
192-
</View>
193-
)}
194-
</View>
195-
</View>
196-
</View>
197-
);
45+
return <PageTeam pageData={data}></PageTeam>;
19846
}

‎next/components/MemberInfo.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,25 @@ const MemberInfo = ({ user }) => {
2323
alt={`Foto von ${user.first_name || ""} ${user.last_name || ""}`}
2424
// sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2525
/>
26-
2726
<View
2827
style={{
2928
justifyContent: "center",
3029
paddingLeft: Metrics.doubleBaseMargin,
30+
overflow: "hidden",
31+
flexGrow: 1,
32+
maxWidth: "75%",
3133
}}
3234
>
33-
<Text style={{ ...Fonts.style.text }}>
35+
<Text style={{ ...Fonts.style.text }} numberOfLines={1}>
3436
{`${user.first_name} ${user.last_name}`}
3537
</Text>
3638

3739
<HoverUrl
3840
url={"mailto:" + user.email}
39-
style={{ ...Fonts.style.textLink, color: Colors.green }}
41+
style={{
42+
...Fonts.style.textLink,
43+
color: Colors.green,
44+
}}
4045
hoverStyle={{ color: Colors.darkGreen }}
4146
>
4247
{user.email}
@@ -52,10 +57,12 @@ const { ids, styles } = StyleSheet.create({
5257
container: {
5358
paddingBottom: Metrics.baseMargin,
5459
width: "50%",
60+
maxWidth: "50%",
5561
flexDirection: "row",
5662
"@media (max-width: 910px)": {
5763
paddingBottom: Metrics.doubleBaseMargin,
5864
width: "100%",
65+
maxWidth: "100%",
5966
},
6067
},
6168
});

0 commit comments

Comments
 (0)