Skip to content

Commit

Permalink
styling changes
Browse files Browse the repository at this point in the history
  • Loading branch information
sunnyh2024 committed Apr 17, 2024
1 parent c56225f commit d3bfe0b
Show file tree
Hide file tree
Showing 8 changed files with 434 additions and 174 deletions.
15 changes: 15 additions & 0 deletions .expo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
> Why do I have a folder named ".expo" in my project?
The ".expo" folder is created when an Expo project is started using "expo start" command.

> What do the files contain?
- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
- "settings.json": contains the server configuration that is used to serve the application manifest.

> Should I commit the ".expo" folder?
No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.

Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
9 changes: 9 additions & 0 deletions .expo/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"hostType": "lan",
"lanType": "ip",
"devClient": true,
"dev": true,
"minify": false,
"urlRandomness": null,
"https": false
}
3 changes: 2 additions & 1 deletion frontend/sac-mobile/app/(calendar)/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Theme } from 'react-native-calendars/src/types';


import Agenda from './components/agenda';
import { getMarkedDates } from './components/mock';

// FIXME FIXME FIXME FIXME: everything needs to be redone/checked spacing-wise. lots of errors

Expand All @@ -35,7 +36,7 @@ const CalendarView = () => {
<HamburgerButton className="w-12 h-12" />
<Text className='font-bold text-3xl'>Events</Text>
</View>
<ExpandableCalendar theme={calendarTheme}/>
<ExpandableCalendar theme={calendarTheme} markedDates={getMarkedDates()}/>
<Agenda />
</CalendarProvider>
</SafeAreaView>
Expand Down
107 changes: 4 additions & 103 deletions frontend/sac-mobile/app/(calendar)/components/agenda.tsx
Original file line number Diff line number Diff line change
@@ -1,111 +1,11 @@
import React, { useCallback } from 'react';
import { AgendaList, CalendarProvider } from 'react-native-calendars';

import { getDates, agendaItems } from './mock';
import AgendaItem from './agendaItem';
import { StyleSheet } from 'react-native';

const Agenda = () => {
const dates = [
'2024-04-01',
'2024-04-02',
'2024-04-03',
'2024-04-04',
'2024-04-05',
'2024-04-06',
'2024-04-07',
'2024-04-08',
'2024-04-09',
'2024-04-10',
'2024-04-11',
'2024-04-12',
'2024-04-13',
'2024-04-14'
];
const agendaItems = [
{
title: dates[0],
data: [{ hour: '12am', duration: '1h', title: 'Club GM' }]
},
{
title: dates[1],
data: [
{ hour: '4pm', duration: '1h', title: 'Intramural game' },
{ hour: '5pm', duration: '1h', title: 'Generate Team Meeting' },
{ hour: '5pm', duration: '1h', title: 'Other commitment' }
]
},
{
title: dates[2],
data: [
{ hour: '1pm', duration: '1h', title: 'Dance Crew Rehearsal' },
{ hour: '2pm', duration: '1h', title: 'Intramural game' },
{ hour: '3pm', duration: '1h', title: 'Club GM' }
]
},
{
title: dates[3],
data: [{ hour: '12am', duration: '1h', title: 'Ashtanga Yoga' }]
},
{
title: dates[4],
data: []
},
{
title: dates[5],
data: [
{
hour: '11pm',
duration: '1h',
title: 'Generate Team Meeting'
},
{ hour: '12pm', duration: '1h', title: 'Running Group' }
]
},
{
title: dates[6],
data: [{ hour: '12am', duration: '1h', title: 'Intramural game' }]
},
{
title: dates[7],
data: []
},
{
title: dates[8],
data: [
{ hour: '9pm', duration: '1h', title: 'Cheese Club GM' },
{ hour: '10pm', duration: '1h', title: 'Club GM' },
{ hour: '11pm', duration: '1h', title: 'Intramural game' },
{ hour: '12pm', duration: '1h', title: 'Running Group' }
]
},
{
title: dates[9],
data: [
{ hour: '1pm', duration: '1h', title: 'Intramural game' },
{ hour: '2pm', duration: '1h', title: 'Club GM' },
{ hour: '3pm', duration: '1h', title: 'Private Yoga' }
]
},
{
title: dates[10],
data: [{ hour: '12am', duration: '1h', title: 'Gym Workout' }]
},
{
title: dates[11],
data: [
{ hour: '1pm', duration: '1h', title: 'Intramural game' },
{ hour: '2pm', duration: '1h', title: 'Club GM' },
{ hour: '3pm', duration: '1h', title: 'Private Yoga' }
]
},
{
title: dates[12],
data: [{ hour: '12am', duration: '1h', title: 'Gym Workout' }]
},
{
title: dates[13],
data: [{ hour: '12am', duration: '1h', title: 'Gym Workout' }]
}
];
const dates = getDates(2024, 4)

const renderItem = useCallback(({ item }: any) => {
return <AgendaItem item={item} />;
Expand All @@ -114,6 +14,7 @@ const Agenda = () => {
return (
<AgendaList
sections={agendaItems}

renderItem={renderItem}
scrollToNextEvent
// sectionStyle={styles.section}
Expand Down
154 changes: 87 additions & 67 deletions frontend/sac-mobile/app/(calendar)/components/agendaItem.tsx
Original file line number Diff line number Diff line change
@@ -1,83 +1,103 @@
import React, {useCallback} from 'react';
import {StyleSheet, Alert, View, Text, TouchableOpacity, Button} from 'react-native';

import React, { useCallback } from 'react';
import {
Alert,
Button,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';

interface ItemProps {
item: any;
item: any;
}

const AgendaItem = (props: ItemProps) => {
const {item} = props;
const { item } = props;

const buttonPressed = useCallback(() => {
Alert.alert('Show me more');
}, []);

const buttonPressed = useCallback(() => {
Alert.alert('Show me more');
}, []);
const itemPressed = useCallback(() => {
Alert.alert(item.title);
}, []);

const itemPressed = useCallback(() => {
Alert.alert(item.title);
}, []);
if (!item) {
return (
<View style={styles.emptyItem}>
<Text style={styles.emptyItemText}>
No Events Planned Today
</Text>
</View>
);
}

if (!item) {
return (
<View style={styles.emptyItem}>
<Text style={styles.emptyItemText}>No Events Planned Today</Text>
</View>
<TouchableOpacity onPress={itemPressed} style={styles.item}>
<View>
<Text style={styles.itemHourText}>{item.hour}</Text>
<Text style={styles.itemDurationText}>{item.duration}</Text>
</View>
<View>
<Text style={styles.itemTitleText}>{item.title}</Text>
<Text style={styles.itemText}>{item.location}</Text>
</View>
<View style={styles.itemButtonContainer}>
<Button color={'grey'} title={'Info'} onPress={buttonPressed} />
</View>
</TouchableOpacity>
);
}

return (
<TouchableOpacity onPress={itemPressed} style={styles.item}>
<View>
<Text style={styles.itemHourText}>{item.hour}</Text>
<Text style={styles.itemDurationText}>{item.duration}</Text>
</View>
<Text style={styles.itemTitleText}>{item.title}</Text>
<View style={styles.itemButtonContainer}>
<Button color={'grey'} title={'Info'} onPress={buttonPressed}/>
</View>
</TouchableOpacity>
);
};

export default React.memo(AgendaItem);


const styles = StyleSheet.create({
item: {
padding: 20,
backgroundColor: 'white',
borderBottomWidth: 1,
borderBottomColor: 'lightgrey',
flexDirection: 'row'
},
itemHourText: {
color: 'black'
},
itemDurationText: {
color: 'grey',
fontSize: 12,
marginTop: 4,
marginLeft: 4
},
itemTitleText: {
color: 'black',
marginLeft: 16,
fontWeight: 'bold',
fontSize: 16
},
itemButtonContainer: {
flex: 1,
alignItems: 'flex-end'
},
emptyItem: {
paddingLeft: 20,
height: 52,
justifyContent: 'center',
borderBottomWidth: 1,
borderBottomColor: 'lightgrey'
item: {
marginTop: 4,
marginBottom: 4,
marginLeft: 16,
marginRight: 8,
padding: 20,
backgroundColor: 'white',
shadowColor: 'black',
shadowOpacity: 0.25,
shadowOffset: { width: 0, height: 2 },
flexDirection: 'row',
borderRadius: 12
},
itemHourText: {
color: 'black'
},
itemText: {
color: 'black',
paddingLeft: 16
},
emptyItemText: {
color: 'lightgrey',
fontSize: 14
}
});
itemDurationText: {
color: 'grey',
fontSize: 12,
marginTop: 4,
marginLeft: 'auto'
},
itemTitleText: {
color: 'black',
marginLeft: 16,
fontWeight: 'bold',
fontSize: 16
},
itemButtonContainer: {
flex: 1,
alignItems: 'flex-end'
},
emptyItem: {
paddingLeft: 20,
height: 52,
justifyContent: 'center',
borderBottomWidth: 1,
borderBottomColor: 'lightgrey'
},
emptyItemText: {
color: 'lightgrey',
fontSize: 14
}
});
6 changes: 3 additions & 3 deletions frontend/sac-mobile/app/(calendar)/components/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export const HamburgerButton = (p: TouchableOpacityProps) => {
return (
<TouchableOpacity {...p}>
<View className='px-2 py-3 w-full h-full flex flex-col justify-between'>
<View className='bg-black w-full h-1'></View>
<View className='bg-black w-2/3 h-1'></View>
<View className='bg-black w-1/3 h-1'></View>
<View className='bg-black w-full h-1 rounded-full'></View>
<View className='bg-black w-2/3 h-1 rounded-full'></View>
<View className='bg-black w-1/3 h-1 rounded-full'></View>
</View>
</TouchableOpacity>
);
Expand Down
Loading

0 comments on commit d3bfe0b

Please sign in to comment.