martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

laying out drawer profile for tablet

Browse Source
This commit is contained in:
balzack 2023-09-14 23:17:30 -07:00
parent 10925079bf
commit 72d43ca294
2 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/mobile/src/session/profile/Profile.jsx
View File

@ -82,6 +82,40 @@ export function Profile({ drawer }) {
<MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
</View>
</View>
<View style={styles.drawerEditDivider}>
<View style={styles.drawerLine} />
<TouchableOpacity style={styles.drawerNameEdit} activeOpacity={1} onPress={actions.showDetails}>
<Text style={styles.editLabel}>{ state.strings.edit }</Text>
<MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
</TouchableOpacity>
</View>
<View style={styles.drawerName}>
{ state.name && (
<Text style={styles.drawerNameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text>
)}
{ !state.name && (
<Text style={styles.drawerNameUnset}>{ state.strings.name }</Text>
)}
</View>
<View style={styles.drawerEntry}>
<AntIcons name="enviromento" style={styles.icon} size={20} color={Colors.text} />
{ state.location && (
<Text style={styles.locationSet}>{ state.location }</Text>
)}
{ !state.location && (
<Text style={styles.locationUnset}>Location</Text>
)}
</View>
<View style={styles.drawerEntry}>
<MatIcons name="book-open-outline" style={styles.descriptionIcon} size={20} color={Colors.text} />
{ state.description && (
<Text style={styles.descriptionSet}>{ state.description }</Text>
)}
{ !state.description && (
<Text style={styles.descriptionUnset}>Description</Text>
)}
</View>
<View style={styles.drawerDivider} />
</View>
)}
{ !drawer && (

57
app/mobile/src/session/profile/Profile.styled.js
View File

@ -14,9 +14,9 @@ export const styles = StyleSheet.create({
padding: 16,
},
drawerFrame: {
width: '50%',
width: '80%',
maxWidth: 400,
paddingBottom: 16,
paddingBottom: 32,
},
drawerLogo: {
aspectRatio: 1,
@ -32,13 +32,62 @@ export const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center',
backgroundColor: 'rgba(255,255,255,0.6)',
backgroundColor: Colors.drawerBase,
paddingLeft: 8,
paddingRight: 8,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
},
drawerEditDivider: {
width: '80%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
drawerLine: {
borderWidth: 1,
borderColor: Colors.areaBase,
flexGrow: 1,
},
drawerDivider: {
width: '80%',
borderWidth: 1,
borderColor: Colors.areaBase,
marginTop: 16,
},
drawerName: {
width: '80%',
paddingLeft: 8,
paddingRight: 8,
},
drawerNameSet: {
color: Colors.text,
fontFamily: 'roboto',
fontSize: 48,
flexGrow: 1,
flexShrink: 1,
},
drawerNameUnset: {
color: Colors.inputPlaceholder,
fontFamily: 'roboto',
fontSize: 48,
fontStyle: 'italic',
flexGrow: 1,
},
drawerNameEdit: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 8,
paddingRight: 8,
},
drawerEntry: {
width: '80%',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
padding: 8,
},
container: {
width: '100%',
height: '100%',