From e9ebde9162f8efad12cb0cee2e3f0588a2d1a773 Mon Sep 17 00:00:00 2001
From: tina <lt-bloody@riox.eu>
Date: Wed, 12 Sep 2018 18:01:01 +0200
Subject: [PATCH] makes stats beautiful
---
components/labels.js | 9 +++++++--
components/stats.js | 26 ++++++++++++++++----------
styles/index.js | 20 ++++++++++++++++----
3 files changed, 39 insertions(+), 16 deletions(-)
diff --git a/components/labels.js b/components/labels.js
index c4c9cba7..c61a9390 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -68,10 +68,15 @@ export const headerTitles = {
}
export const stats = {
+ cycleLengthTitle: 'Cycle length',
+ cycleLengthExplainer: 'Basic statistics about the length of your cycles.',
emptyStats: 'At least one completed cycle is needed to present you with stats here.',
- oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
- getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
+ //oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
+ oneCycleStats: 'You have documented one cycle of',
daysLabel: 'days',
+ //getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
+ basisOfStatsBeginning: 'Stats are based on',
+ basisOfStatsEnd: 'completed cycles.',
averageLabel: 'Average cycle length',
minLabel: 'Shortest cycle',
maxLabel: 'Longest cycle',
diff --git a/components/stats.js b/components/stats.js
index b868e638..c1e4475a 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -26,22 +26,23 @@ export default class Stats extends Component {
}
return (
<ScrollView>
- <View>
+ <View style={styles.appHorizontalMargin}>
+ <AppText style={styles.appTextTitle}>{labels.cycleLengthTitle}</AppText>
+ <AppText style={styles.appBottomMargin}>{labels.cycleLengthExplainer}</AppText>
{!atLeastOneCycle &&
- <AppText style={styles.statsIntro}>{labels.emptyStats}</AppText>
+ <AppText>{labels.emptyStats}</AppText>
}
{atLeastOneCycle && numberOfCycles === 1 &&
- <AppText style={styles.statsIntro}>
- {labels.oneCycleStats(cycleLengths[0])}
+ <AppText>
+ {labels.oneCycleStats}
+ <AppText style={styles.appTextEmphasis}> {cycleLengths[0]} </AppText>
+ {labels.daysLabel + '.'}
</AppText>
}
{atLeastOneCycle && numberOfCycles > 1 && <View>
- <AppText style={styles.statsIntro}>
- {labels.getBasisOfStats(numberOfCycles)}
- </AppText>
<View style={styles.statsRow}>
- <AppText style={styles.statsLabelLeft}>{labels.averageLabel}</AppText>
- <AppText style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
+ <AppText style={[styles.statsLabelLeft, styles.appTextEmphasis]}>{labels.averageLabel}</AppText>
+ <AppText style={[styles.statsLabelRight, styles.appTextEmphasis]}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
</View>
<View style={styles.statsRow}>
<AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
@@ -51,10 +52,15 @@ export default class Stats extends Component {
<AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
<AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
</View>
- <View style={styles.statsRow}>
+ <View style={[styles.statsRow, styles.appBottomMargin]}>
<AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
<AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
</View>
+ <AppText>
+ {labels.basisOfStatsBeginning}
+ <AppText style={styles.appTextEmphasis}> {numberOfCycles} </AppText>
+ {labels.basisOfStatsEnd}
+ </AppText>
</View>}
</View>
</ScrollView>
diff --git a/styles/index.js b/styles/index.js
index 21084769..73d4b122 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -8,6 +8,20 @@ export default StyleSheet.create({
appText: {
color: 'black'
},
+ appTextEmphasis: {
+ fontWeight: 'bold',
+ },
+ appTextTitle: {
+ fontSize: 18,
+ color: 'black',
+ marginBottom: 5,
+ },
+ appHorizontalMargin: {
+ marginHorizontal: 10,
+ },
+ appBottomMargin: {
+ marginBottom: 5
+ },
welcome: {
fontSize: 20,
margin: 30,
@@ -137,12 +151,12 @@ export default StyleSheet.create({
symptomEditButton: {
width: 130
},
- statsIntro: {
+ /*statsIntro: {
fontSize: 18,
margin: 10,
textAlign: 'left',
textAlignVertical: 'center'
- },
+ },*/
settingsSegment: {
backgroundColor: 'lightgrey',
padding: 10,
@@ -165,14 +179,12 @@ export default StyleSheet.create({
width: '100%'
},
statsLabelLeft: {
- fontSize: 18,
width: '60%',
textAlign: 'left',
textAlignVertical: 'center',
marginLeft: 10
},
statsLabelRight: {
- fontSize: 18,
textAlign: 'left',
textAlignVertical: 'center'
},
--
GitLab