Skip to content
Snippets Groups Projects
Commit f842ebe1 authored by MariaZ's avatar MariaZ Committed by BloodyMarie
Browse files

Update stats page styling

parent 070c1487
No related branches found
No related tags found
No related merge requests found
import React from 'react'
import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'
import { Dimensions, ImageBackground, View } from 'react-native'
import { ScaledSheet } from 'react-native-size-matters'
import AppPage from './common/app-page'
import AppText from './common/app-text'
......@@ -28,8 +29,6 @@ const Stats = () => {
[cycleData.stdDeviation ? cycleData.stdDeviation : '', labels.stdLabel],
[numberOfCycles, labels.basisOfStatsEnd]
]
const height = screen.height * 0.2
const marginTop = (height / 8 - Sizes.icon / fontRatio) / 4
return (
<AppPage contentContainerStyle={styles.pageContainer}>
......@@ -42,12 +41,12 @@ const Stats = () => {
<ImageBackground
source={image}
imageStyle={styles.image}
style={[styles.imageContainter, { height }]}
style={styles.imageContainter}
>
<AppText
numberOfLines={1}
ellipsizeMode="clip"
style={[styles.accentPurpleGiant, { marginTop }]}
style={styles.accentPurpleGiant}
>
{cycleData.mean}
</AppText>
......@@ -73,13 +72,14 @@ const column = {
flexDirection: 'column',
}
const styles = StyleSheet.create({
const styles = ScaledSheet.create({
accentOrange: {
...Typography.accentOrange,
fontSize: Sizes.small,
},
accentPurpleGiant: {
...Typography.accentPurpleGiant,
marginTop: Spacing.base * (-2),
},
accentPurpleHuge: {
...Typography.accentPurpleHuge,
......@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: Spacing.base,
paddingTop: Spacing.base
},
columnLeft: {
...column,
......@@ -102,10 +102,9 @@ const styles = StyleSheet.create({
},
image: {
resizeMode: 'contain',
},
imageContainter: {
paddingTop: Spacing.large * 2,
paddingTop: Spacing.large * 2.5,
marginBottom: Spacing.large,
},
pageContainer: {
......
import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native'
import { PixelRatio, StatusBar } from 'react-native'
import { scale, verticalScale, moderateScale } from 'react-native-size-matters'
export const ACTION_DELETE = 'delete'
export const ACTION_EXPORT = 'export'
......@@ -16,20 +17,18 @@ export const SYMPTOMS = [
'note',
]
const windowWidth = Dimensions.get('window').width
const factor = (windowWidth < 1000) && (Platform.OS === 'ios') ? 1.25 : 1
export const fontRatio = PixelRatio.getFontScale() * factor
export const fontRatio = PixelRatio.getFontScale()
export const CHART_COLUMN_WIDTH = 32
export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2
export const CHART_DOT_RADIUS = 6
export const CHART_DOT_RADIUS = moderateScale(6)
export const CHART_GRID_LINE_HORIZONTAL_WIDTH =
PixelRatio.roundToNearestPixel(0.3)
export const CHART_ICON_SIZE = 20
export const CHART_STROKE_WIDTH = 3
export const CHART_SYMPTOM_HEIGHT_RATIO = 0.08
export const CHART_XAXIS_HEIGHT_RATIO = 0.1
export const CHART_YAXIS_WIDTH = 32
export const CHART_TICK_WIDTH = 44
export const CHART_ICON_SIZE = moderateScale(20)
export const CHART_STROKE_WIDTH = scale(3)
export const CHART_SYMPTOM_HEIGHT_RATIO = verticalScale(0.08)
export const CHART_XAXIS_HEIGHT_RATIO = verticalScale(0.1)
export const CHART_YAXIS_WIDTH = scale(32)
export const CHART_TICK_WIDTH = scale(44)
export const TEMP_SCALE_MAX = 37.5
export const TEMP_SCALE_MIN = 35.5
......@@ -38,6 +37,11 @@ export const TEMP_MAX = 39
export const TEMP_MIN = 35
export const TEMP_SLIDER_STEP = 0.5
export const HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 }
export const HIT_SLOP = {
top: verticalScale(20),
bottom: verticalScale(20),
left: scale(20),
right: scale(20)
}
export const STATUSBAR_HEIGHT = StatusBar.currentHeight
import { moderateScale } from 'react-native-size-matters'
import { fontRatio } from '../config'
export default {
tiny: 4 / fontRatio,
small: 10 / fontRatio,
base: 16 / fontRatio,
large: 20 / fontRatio,
tiny: moderateScale(4 / fontRatio),
small: moderateScale(10 / fontRatio),
base: moderateScale(16 / fontRatio),
large: moderateScale(20 / fontRatio),
symptomTileWidth: '48%',
textWidth: '70%'
}
\ No newline at end of file
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment