diff --git a/components/home.js b/components/home.js
index 5e64814..ad4edb5 100644
--- a/components/home.js
+++ b/components/home.js
@@ -1,14 +1,12 @@
import { ChronoUnit, LocalDate } from 'js-joda'
import React, { Component } from 'react'
-import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native'
-import Icon from 'react-native-vector-icons/Entypo'
+import { ScrollView, View } from 'react-native'
import DripHomeIcon from '../assets/drip-home-icons'
import { getCycleDay } from '../db'
import {
bleedingPrediction as predictLabels,
- home as labels,
- shared,
+ home as labels
} from '../i18n/en/labels'
import links from '../i18n/en/links'
import cycleModule from '../lib/cycle'
@@ -18,25 +16,6 @@ import AppText from './app-text'
import Button from './button'
import { formatDateForShortText } from './helpers/format-date'
-const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
- const {height, width} = Dimensions.get('window')
- const leftPosition = isShowingMore ? 10 : width - 40
- const style = isShowingMore ? styles.showLess : styles.showMore
- const topPosition = height / 2 - styles.header.height - 30
-
- return (
-
-
- {isShowingMore ? shared.less : shared.more}
-
-
-
- )
-}
-
const IconText = ({ children, wrapperStyles }) => {
return (
@@ -51,15 +30,22 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => {
return (
- { children }
-
+
+ {children[0]}
+ {children[1]}
+
+
+
+ {children[2]}
+
+
)
}
@@ -75,7 +61,6 @@ export default class Home extends Component {
const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
this.state = {
- isShowingMore: false,
cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
predictionText: determinePredictionText(prediction),
bleedingPredictionRange: getBleedingPredictionRange(prediction),
@@ -91,12 +76,8 @@ export default class Home extends Component {
})
}
- toggleShowingMore = () => {
- this.setState({ isShowingMore: !this.state.isShowingMore })
- }
-
render() {
- const { isShowingMore, cycleDayNumber, phase, status } = this.state
+ const { cycleDayNumber, phase, status } = this.state
const { navigate } = this.props
const cycleDayMoreText = cycleDayNumber ?
labels.cycleDayKnown(cycleDayNumber) :
@@ -117,13 +98,11 @@ export default class Home extends Component {
-
+
{cycleDayNumber || labels.unknown}
- { isShowingMore &&
- {cycleDayMoreText}
- }
+ {cycleDayMoreText}
-
-
-
+
-
+
{this.state.bleedingPredictionRange}
- { isShowingMore &&
-
- {this.state.predictionText}
-
- }
+
+ {this.state.predictionText}
+
-
+
{ phase ? phase.toString() : labels.unknown }
{ phase &&
- {`${labels.phase(phase)} (${status})`}
- }
- { isShowingMore &&
-
-
- { `${statusText} ${links.wiki.url}.` }
-
-
+
+ {`${labels.phase(phase)} (${status})`}
+
}
+
+
+ { `${statusText} ${links.wiki.url}.` }
+
+
-
)
}
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index ddae047..df5d2ce 100644
--- a/i18n/en/labels.js
+++ b/i18n/en/labels.js
@@ -15,8 +15,6 @@ export const shared = {
date: 'Date',
cycleDayWithLinebreak: 'Cycle\nday',
loading: 'Loading ...',
- more: 'more',
- less: 'less',
enter: 'Enter'
}
diff --git a/styles/index.js b/styles/index.js
index 2b5d0f0..5fba45a 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -104,9 +104,6 @@ export default StyleSheet.create({
marginLeft: 10,
marginTop: 6
},
- homeView: {
- marginHorizontal: 50,
- },
button: {
paddingVertical: 10,
paddingHorizontal: 20,
@@ -120,29 +117,26 @@ export default StyleSheet.create({
homeButtonText: {
color: fontOnPrimaryColor
},
- homeIconElement: {
- alignItems: 'center',
- marginTop: 15
+ homeView: {
+ margin: 40,
+ },
+ homeDescriptionText: {
+ width: 200,
+ marginBottom: defaultBottomMargin,
+ },
+ homeElement: {
+ marginBottom: 40,
+ flexDirection: 'row',
},
homeIconTextWrapper: {
alignItems: 'center',
justifyContent: 'center',
- marginBottom: 10,
},
- wrapperCycle: {
+ homeIconAndText: {
+ justifyContent: 'center'
+ },
+ wrapperIcon: {
width: 80,
- height: 77,
- position: 'absolute'
- },
- wrapperDrop: {
- width: 81,
- height: 85,
- marginTop: 20,
- position: 'absolute'
- },
- wrapperCircle: {
- width: 80,
- height: 80,
position: 'absolute'
},
homeCircle: {
@@ -157,14 +151,6 @@ export default StyleSheet.create({
iconText: {
fontSize: 25
},
- showMore: {
- transform: [{rotate: '90deg'}],
- position: 'absolute',
- },
- showLess: {
- transform: [{rotate: '270deg'}],
- position: 'absolute'
- },
cycleDayNumber: {
fontSize: 15,
color: fontOnPrimaryColor,