Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tweaks to better support small screens #577

Merged
merged 4 commits into from
Apr 21, 2020
Merged

Tweaks to better support small screens #577

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e18512b
Tweaks to better support small screens
Apr 19, 2020
4674e20
Getting the "Steve" out
penrods Apr 19, 2020
717d040
Remove test code left in accidentally
Apr 20, 2020
55be544
Merge branch 'develop' into spenrod/small-screen-support
penrods Apr 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions app/components/NavigationBarWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import styled from '@emotion/native';
import { useTheme } from 'emotion-theming';
import PropTypes from 'prop-types';
import * as React from 'react';
import { StatusBar } from 'react-native';
import { Dimensions, StatusBar } from 'react-native';
import { SvgXml } from 'react-native-svg';

import backArrow from './../assets/svgs/backArrow';
Expand All @@ -17,6 +17,8 @@ import Colors from '../constants/colors';
* onBackPress: () => void,
* }} param0
*/
const widthScale = Math.min(Dimensions.get('window').width / 400, 1.0);

const NavigationBarWrapper = ({ children, title, onBackPress }) => {
const theme = useTheme();

Expand Down Expand Up @@ -73,8 +75,9 @@ const Title = styled.Text`
align-self: center;
color: ${Colors.WHITE};
font-family: IBMPlexSans-Medium;
font-size: 26px;
font-size: ${26 * widthScale + 'px'};
position: absolute;
padding-horizontal: 20;
text-align: center;
width: 100%;
`;
Expand Down
6 changes: 3 additions & 3 deletions app/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,13 @@
"logging_inactive": "Location Inactive"
},
"history": {
"no_exposure": "No exposure",
"no_exposure": "No known",
"possible_exposure_para": "It is possible you were in contact with or close to someone who tested positive for COVID-19",
"possible_exposure": "Possible exposure",
"possible_exposure": "Possible",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given the context of what else is now on this/these screen(s), is there a way to make sure that the words Possible and No known are enough to convey the meaning to an average user?
Maybe a screenshot of these screens and show it to a few multilingual people or the ones not immediately familiar with the screens?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I attached a picture of the small screen.

"timeline": "Timeline",
"what_does_this_mean_para": "Based on your GPS history, it is possible that you may have been in contact with or close to somebody who was diagnosed with COVID-19. This does not mean you are infected but that you might be.\n\nFor further information on what you should do you can refer to the Mayo Clinic’s website.",
"what_does_this_mean": "What does this mean?",
"what_if_no_symptoms_para": "If you have no symptoms but still would like to be tested you can go to your nearest testing site.\n\nIndividuals who don't exhibit symptoms can sometimes still carry the infection and infect others. Being careful about social distancing and coming in contact with large groups or at risk individuals (the elderly, those with significant other medical issues) is important to manage both your risk and the risk to others.",
"what_if_no_symptoms": "What if I’m not showing symptoms?"
}
}
}
11 changes: 7 additions & 4 deletions app/views/ChooseProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,11 @@ class ChooseProviderScreen extends Component {
// Update user settings state from async storage
GetStoreData(AUTHORITY_SOURCE_SETTINGS, false).then(result => {
if (result !== null) {
console.log('Retrieving settings from async storage:');
console.log('Steve Retrieving settings from async storage:');
penrods marked this conversation as resolved.
Show resolved Hide resolved
penrods marked this conversation as resolved.
Show resolved Hide resolved
console.log(result);
result.push({ key: 'test', url: 'http://gpll.org' });
penrods marked this conversation as resolved.
Show resolved Hide resolved
result.push({ key: 'test2', url: 'http://gpll.org' });
result.push({ key: 'test3', url: 'http://gpll.org' });
this.setState({
selectedAuthorities: result,
});
Expand Down Expand Up @@ -389,7 +392,7 @@ const styles = StyleSheet.create({
alignSelf: 'center',
},
listContainer: {
flex: 3,
flex: 1,
flexDirection: 'column',
textAlignVertical: 'top',
justifyContent: 'flex-start',
Expand Down Expand Up @@ -452,8 +455,8 @@ const styles = StyleSheet.create({
width: 18.48,
},
sectionDescription: {
fontSize: 18,
lineHeight: 24,
fontSize: 16,
lineHeight: 22,
marginTop: 12,
overflow: 'scroll',
color: Colors.VIOLET_TEXT,
Expand Down
2 changes: 1 addition & 1 deletion app/views/ExposureHistory/__tests__/__snapshots__/SingleExposureDetails.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ exports[`matches snapshot 1`] = `
}
}
>
Possible exposure
Possible
</Text>
<View
style={
Expand Down
4 changes: 3 additions & 1 deletion app/views/News.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,9 @@ const styles = StyleSheet.create({
marginBottom: 0,
},
singleNewsHeadText: {
fontSize: 18,
fontSize: 16,
textAlign: 'center',
paddingHorizontal: 5,
fontFamily: fontFamily.primarySemiBold,
},
});
Expand Down
1 change: 1 addition & 0 deletions app/views/__tests__/__snapshots__/Import.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ Array [
"color": "#FFF",
"fontFamily": "IBMPlexSans-Medium",
"fontSize": 26,
"paddingHorizontal": 20,
"position": "absolute",
"textAlign": "center",
"width": "100%",
Expand Down
1 change: 1 addition & 0 deletions app/views/__tests__/__snapshots__/Licenses.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ exports[`renders correctly 1`] = `
"color": "#FFF",
"fontFamily": "IBMPlexSans-Medium",
"fontSize": 26,
"paddingHorizontal": 20,
"position": "absolute",
"textAlign": "center",
"width": "100%",
Expand Down
5 changes: 4 additions & 1 deletion app/views/__tests__/__snapshots__/News.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ exports[`renders correctly 1`] = `
"color": "#FFF",
"fontFamily": "IBMPlexSans-Medium",
"fontSize": 26,
"paddingHorizontal": 20,
"position": "absolute",
"textAlign": "center",
"width": "100%",
Expand Down Expand Up @@ -285,7 +286,9 @@ exports[`renders correctly 1`] = `
style={
Object {
"fontFamily": "IBMPlexSans-SemiBold",
"fontSize": 18,
"fontSize": 16,
"paddingHorizontal": 5,
"textAlign": "center",
}
}
>
Expand Down
1 change: 1 addition & 0 deletions app/views/__tests__/__snapshots__/Settings.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ exports[`renders correctly 1`] = `
"color": "#FFF",
"fontFamily": "IBMPlexSans-Medium",
"fontSize": 26,
"paddingHorizontal": 20,
"position": "absolute",
"textAlign": "center",
"width": "100%",
Expand Down