Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: unify card design #13

Merged
merged 1 commit into from
Jul 2, 2024
Merged

style: unify card design #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions src/components/area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { ReactElement } from "react";
import { Card, Icon, Text } from "react-native-paper";
import { StyleSheet, View } from "react-native";

export default function Area({
title,
icon,
children,
right,
}: {
title: string;
icon: string;
children?: ReactElement | ReactElement[];
right?: undefined | ReactElement;
}) {
return (
<Card>
<Card.Content>
<View style={styles.container}>
<View style={styles.header}>
<Icon size={22} source={icon} />
<Text style={styles.text} variant={"titleMedium"}>
{title}
</Text>
{right}
</View>
{children && <View style={styles.content}>{children}</View>}
</View>
</Card.Content>
</Card>
);
}

const styles = StyleSheet.create({
container: {
gap: 16,
},
header: {
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 5,
},
text: {
flex: 1,
},
content: {
gap: 10,
},
});
18 changes: 8 additions & 10 deletions src/components/feed/feed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,18 @@ import { useAtomValue } from "jotai";
import { feedAtom } from "../../stores/feed";
import { ActivityIndicator, Card } from "react-native-paper";
import Item from "./item";
import Area from "../area";

export default function Feed() {
const feed = useAtomValue(feedAtom);

return (
<Card>
<Card.Title title={"Nieuws"} />
<Card.Content style={{ gap: 10 }}>
{feed ? (
feed.map((item, index) => <Item key={index} item={item} />)
) : (
<ActivityIndicator animating={true} />
)}
</Card.Content>
</Card>
<Area title={"Nieuws"} icon={"bullhorn"}>
{feed ? (
feed.map((item, index) => <Item key={index} item={item} />)
) : (
<ActivityIndicator animating={true} />
)}
</Area>
);
}
28 changes: 10 additions & 18 deletions src/components/register/listing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { StyleSheet, TouchableOpacity } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "react-native-screens/native-stack";
import { StackParamList } from "../../../App";
import Area from "../area";

type SlotNavigationProps = NativeStackNavigationProp<StackParamList>;

Expand Down Expand Up @@ -38,23 +39,14 @@ export default function Listing() {
const slots = useAtomValue(slotsAtom);

return (
<Card>
<Card.Title title={"Aanmelden"} />
<Card.Content style={styles.content}>
{slots ? (
slots.map((slot, index) => (
<SlotListing key={index} slot={slot} index={index} />
))
) : (
<ActivityIndicator animating={true} />
)}
</Card.Content>
</Card>
<Area title={"Aanmelden"} icon={"playlist-check"}>
{slots ? (
slots.map((slot, index) => (
<SlotListing key={index} slot={slot} index={index} />
))
) : (
<ActivityIndicator animating={true} />
)}
</Area>
);
}

const styles = StyleSheet.create({
content: {
gap: 10,
},
});
4 changes: 2 additions & 2 deletions src/components/register/precenseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function PresenceCard({
if (!slot.presence) return;

return (
<>
<View>
<PaperSelect
label={"Lid handmatig aanmelden"}
arrayList={members
Expand Down Expand Up @@ -69,7 +69,7 @@ export default function PresenceCard({
<Presence key={presence.id} presence={presence} slot={slot} />
))}
</View>
</>
</View>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/register/presence.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function Presence({
<TouchableOpacity style={styles.presence} onPress={markSeen}>
<Switch value={seen} onChange={markSeen} />
<Text>{presence.name}</Text>
{presence.stripcard_count && (
{!!presence.stripcard_count && (
<View style={styles.stripcard}>
<Icon size={22} source={"clipboard-list"} />
<Text>
Expand Down
73 changes: 35 additions & 38 deletions src/screens/calendar/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
import { parse, VEvent } from "unfucked-ical";
import Item from "../../components/feed/item";
import { ActionType, FeedItem, sortFeeds } from "../../stores/feed";
import Area from "../../components/area";

export default function CalendarScreen() {
const [date, setDate] = useState(new Date());
Expand Down Expand Up @@ -64,45 +65,41 @@ export default function CalendarScreen() {
</Appbar.Header>
<ScrollView>
<View style={styles.container}>
<Card>
<Card.Content style={styles.header}>
<View style={styles.headerText}>
<Icon size={18} source={"calendar"} />
<Text variant={"titleMedium"}>Vanaf</Text>
</View>
<Area
title={"Vanaf"}
icon={"calendar"}
right={
<>
{Platform.OS === "ios" && (
<DateTimePicker
value={date}
onChange={(_, date) => setDate(date as Date)}
mode={"date"}
/>
)}
{Platform.OS === "android" && (
<Button
mode={"elevated"}
onPress={() => {
DateTimePickerAndroid.open({
value: date,
onChange: (_, date) => setDate(date as Date),
mode: "date",
});
}}
>
{date.toLocaleDateString("nl-NL")}
</Button>
)}
</>
}
/>

{Platform.OS === "ios" && (
<DateTimePicker
value={date}
onChange={(_, date) => setDate(date as Date)}
mode={"date"}
/>
)}
{Platform.OS === "android" && (
<Button
mode={"elevated"}
onPress={() => {
DateTimePickerAndroid.open({
value: date,
onChange: (_, date) => setDate(date as Date),
mode: "date",
});
}}
>
{date.toLocaleDateString("nl-NL")}
</Button>
)}
</Card.Content>
</Card>

<Card>
<Card.Title title={"Bijzonderheden"} titleVariant={"titleMedium"} />
<Card.Content style={{ gap: 10 }}>
{items.map((item, index) => (
<Item item={item} key={index} />
))}
</Card.Content>
</Card>
<Area title={"Bijzonderheden"} icon={"calendar-alert"}>
{items.map((item, index) => (
<Item item={item} key={index} />
))}
</Area>
</View>
</ScrollView>
</>
Expand Down
19 changes: 7 additions & 12 deletions src/screens/calendar/event.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { useAtom } from "jotai";
import { useContext } from "react";
import AuthContext, { Authed } from "../../auth";
import * as WebBrowser from "expo-web-browser";
import Area from "../../components/area";

function friday() {
return isFriday(new Date()) ? new Date() : nextFriday(new Date());
Expand Down Expand Up @@ -168,19 +169,13 @@ export default function EventScreen({ route, navigation }: Props) {
</Button>
)}
{getDescription() && (
<Card>
<Card.Title titleVariant={"titleMedium"} title={"Beschrijving"} />
<Card.Content>
<Text>{getDescription()}</Text>
</Card.Content>
</Card>
<Area title={"Beschrijving"} icon={"information"}>
<Text>{getDescription()}</Text>
</Area>
)}
<Card>
<Card.Title titleVariant={"titleMedium"} title={"Wanneer"} />
<Card.Content>
<Text>{getDates()}</Text>
</Card.Content>
</Card>
<Area title={"Wanneer"} icon={"calendar"}>
<Text>{getDates()}</Text>
</Area>
</View>
</ScrollView>
);
Expand Down
69 changes: 32 additions & 37 deletions src/screens/feed/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { ActionType, FeedItem } from "../../stores/feed";
import Item from "../../components/feed/item";
import { parse } from "fast-html-parser";
import * as WebBrowser from "expo-web-browser";
import Area from "../../components/area";

export interface Item {
id: number;
Expand Down Expand Up @@ -135,45 +136,39 @@ export default function SearchScreen() {
>
{searched && (
<>
<Card>
<Card.Title title={"Inventaris"} />
<Card.Content style={styles.content}>
{itemResults ? (
itemResults.length > 0 ? (
itemResults.map((result, index) => (
<Item key={index} item={result} />
))
) : (
<View style={styles.center}>
<Text>Geen producten gevonden</Text>
<Button onPress={orderList} mode={"text"}>
Mis je iets? Bekijk de bestellijst
</Button>
</View>
)
<Area title={"Inventaris"} icon={"package-variant-closed"}>
{itemResults ? (
itemResults.length > 0 ? (
itemResults.map((result, index) => (
<Item key={index} item={result} />
))
) : (
<ActivityIndicator animating={true} />
)}
</Card.Content>
</Card>
<Card>
<Card.Title title={"Artikelen"} />
<Card.Content style={styles.content}>
{articleResults ? (
articleResults.length > 0 ? (
articleResults.map((result, index) => (
<Item key={index} item={result} />
))
) : (
<View style={styles.center}>
<Text>Geen artikelen gevonden</Text>
</View>
)
<View style={styles.center}>
<Text>Geen producten gevonden</Text>
<Button onPress={orderList} mode={"text"}>
Mis je iets? Bekijk de bestellijst
</Button>
</View>
)
) : (
<ActivityIndicator animating={true} />
)}
</Area>
<Area title={"Artikelen"} icon={"post"}>
{articleResults ? (
articleResults.length > 0 ? (
articleResults.map((result, index) => (
<Item key={index} item={result} />
))
) : (
<ActivityIndicator animating={true} />
)}
</Card.Content>
</Card>
<View style={styles.center}>
<Text>Geen artikelen gevonden</Text>
</View>
)
) : (
<ActivityIndicator animating={true} />
)}
</Area>
</>
)}
</View>
Expand Down
Loading
Loading