lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align grid

Browse Source
This commit is contained in:
Julia Friesel
2018-08-16 21:32:55 +02:00
parent 29a82fca9f
commit ff60db089c
2 changed files with 66 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cycle-day/cycle-day-overview.js
+64 -49
View File
@@ -3,7 +3,8 @@ import {
View, View,
Text, Text,
Image, Image,
TouchableOpacity TouchableOpacity,
Dimensions
} from 'react-native' } from 'react-native'
import styles from '../../styles' import styles from '../../styles'
import { import {
@@ -48,51 +49,52 @@ export default class DayView extends Component {
render() { render() {
const cycleDay = this.cycleDay const cycleDay = this.cycleDay
return ( return (
<View style={styles.symptomEditView}> <View style={styles.symptomBoxesView}>
<View style={styles.symptomBoxesView}> <SymptomBox
<SymptomBox title='Bleeding'
title='Bleeding' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('BleedingEditView')}
onPress={() => this.showView('BleedingEditView')} data={getLabel('bleeding', cycleDay.bleeding)}
data={getLabel('bleeding', cycleDay.bleeding)} />
/> <SymptomBox
<SymptomBox title='Temperature'
title='Temperature' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('TemperatureEditView')}
onPress={() => this.showView('TemperatureEditView')} data={getLabel('temperature', cycleDay.temperature)}
data={getLabel('temperature', cycleDay.temperature)} />
/> <SymptomBox
<SymptomBox title='Mucus'
title='Mucus' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('MucusEditView')}
onPress={() => this.showView('MucusEditView')} data={getLabel('mucus', cycleDay.mucus)}
data={getLabel('mucus', cycleDay.mucus)} />
/> <SymptomBox
<SymptomBox title='Cervix'
title='Cervix' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('CervixEditView')}
onPress={() => this.showView('CervixEditView')} data={getLabel('cervix', cycleDay.cervix)}
data={getLabel('cervix', cycleDay.cervix)} />
/> <SymptomBox
<SymptomBox title='Note'
title='Note' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('NoteEditView')}
onPress={() => this.showView('NoteEditView')} data={getLabel('note', cycleDay.note)}
data={getLabel('note', cycleDay.note)} />
/> <SymptomBox
<SymptomBox title='Desire'
title='Desire' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('DesireEditView')}
onPress={() => this.showView('DesireEditView')} data={getLabel('desire', cycleDay.desire)}
data={getLabel('desire', cycleDay.desire)} />
/> <SymptomBox
<SymptomBox title='Sex'
title='Sex' icon={require('./assets/placeholder.png')}
icon={require('./assets/placeholder.png')} onPress={() => this.showView('SexEditView')}
onPress={() => this.showView('SexEditView')} data={getLabel('sex', cycleDay.sex)}
data={getLabel('sex', cycleDay.sex)} />
/> {/* this is just to make the last row adhere to the grid
</View > (and) because there are no pseudo properties in RN */}
<FillerBoxes/>
</View > </View >
) )
} }
@@ -160,12 +162,12 @@ function getLabel(symptomName, symptom) {
sex.patch || sex.ring || sex.implant || sex.other) { sex.patch || sex.ring || sex.implant || sex.other) {
sexLabel += 'Contraceptive' sexLabel += 'Contraceptive'
} }
return sexLabel ? sexLabel : 'edit' return sexLabel ? sexLabel : undefined
} }
} }
if (!symptom) return 'edit' if (!symptom) return
return labels[symptomName](symptom) || 'edit' return labels[symptomName](symptom)
} }
class SymptomBox extends Component { class SymptomBox extends Component {
@@ -184,3 +186,16 @@ class SymptomBox extends Component {
) )
} }
} }
class FillerBoxes extends Component {
render() {
const n = Dimensions.get('window').width / styles.symptomBox.minHeight
return Array(Math.ceil(n)).fill(
<View
width={styles.symptomBox.minHeight}
height={0}
key={Math.random().toString()}
/>
)
}
}
styles/index.js
+2 -1
View File
@@ -53,8 +53,9 @@ export default StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginTop: '20%', marginTop: '20%',
marginHorizontal: 1,
minWidth: 100, minWidth: 100,
minHeight: 100 minHeight: 100,
}, },
symptomEditRow: { symptomEditRow: {
justifyContent: 'space-between', justifyContent: 'space-between',