Convert html to xml, fix css

This commit is contained in:
Django Doucet 2021-03-06 23:29:57 -05:00
parent 934c711d7d
commit e7d33066a5
10 changed files with 46 additions and 47 deletions

View File

@ -7,7 +7,7 @@
"orientation": "portrait", "orientation": "portrait",
"icon": "./assets/icon.png", "icon": "./assets/icon.png",
"splash": { "splash": {
"image": "./assets/splash.png", "image": "./assets/test.jpg",
"resizeMode": "contain", "resizeMode": "contain",
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
}, },

View File

@ -1,19 +1,19 @@
import React from "react"; import React from "react";
import { Image } from "react-native"; import { Image } from "react-native";
import { TouchableWithoutFeedback } from "react-native"; import { TouchableWithoutFeedback, View } from "react-native";
const BackBarJsx = (props) => { const BackBarJsx = (props) => {
const backIcon = require("assets/eva-icons/back.png"); const backIcon = require("assets/eva-icons/back.png");
return ( return (
<nav style = { styles.nav }> <View style = { styles.nav }>
<TouchableWithoutFeedback <TouchableWithoutFeedback
onPress = { () => props.navigation.goBack() }> onPress = { () => props.navigation.goBack() }>
<Image <Image
style = { styles.button } style = { styles.button }
source = { backIcon }/> source = { backIcon }/>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</nav> </View>
); );
}; };

View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { Image } from "react-native"; import { Image } from "react-native";
import { activeOrNot } from "src/interface/interactions" import { activeOrNot } from "src/interface/interactions"
import { TouchableWithoutFeedback } from "react-native"; import { TouchableWithoutFeedback, View } from "react-native";
const TrayButtonJsx = (props) => { const TrayButtonJsx = (props) => {
return ( return (
@ -43,45 +43,35 @@ const TrayJsx = (props) => {
} }
return ( return (
<nav style = { styles.tray }> <View style = { styles.tray }>
<ul style = { styles.iconList }> <View style = { styles.iconList }>
<li>
<TrayButtonJsx <TrayButtonJsx
where = "Feed" where = "Feed"
pack = { icons.feed } pack = { icons.feed }
active = { props.active } active = { props.active }
nav = { nav } /> nav = { nav } />
</li>
<li>
<TrayButtonJsx <TrayButtonJsx
where = "Discover" where = "Discover"
pack = { icons.discover } pack = { icons.discover }
active = { props.active } active = { props.active }
nav = { nav } /> nav = { nav } />
</li>
<li>
<TrayButtonJsx <TrayButtonJsx
where = "Publish" where = "Publish"
pack = { icons.publish } pack = { icons.publish }
active = { props.active } active = { props.active }
nav = { nav } /> nav = { nav } />
</li>
<li>
<TrayButtonJsx <TrayButtonJsx
where = "Direct" where = "Direct"
pack = { icons.direct } pack = { icons.direct }
active = { props.active } active = { props.active }
nav = { nav } /> nav = { nav } />
</li>
<li>
<TrayButtonJsx <TrayButtonJsx
where = "Profile" where = "Profile"
pack = { icons.profile } pack = { icons.profile }
active = { props.active } active = { props.active }
nav = { nav } /> nav = { nav } />
</li> </View>
</ul> </View>
</nav>
); );
}; };

View File

@ -36,7 +36,7 @@ const styles = {
}, },
searchBar: { searchBar: {
padding: 10, padding: 10,
fontSize: "1.1em", fontSize: 17,
color: "#888" color: "#888"
}, },
}; };

View File

@ -85,21 +85,21 @@ const SearchItemJsx = (props) => {
return ( return (
<TouchableWithoutFeedback <TouchableWithoutFeedback
onPress = { () => props.callback(props.params) }> onPress = { () => props.callback(props.params) }>
<li style = { styles.searchResultContainer }> <View style = { styles.searchResultContainer }>
<Image <Image
style = { styles.thumbnail } style = { styles.thumbnail }
source = { props.thumbnail } /> source = { props.thumbnail } />
<View style = { styles.queried }> <View style = { styles.queried }>
{ props.children } { props.children }
</View> </View>
</li> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
); );
}; };
const AccountsListJsx = (props) => { const AccountsListJsx = (props) => {
return ( return (
<ul style = { styles.searchList }> <View style = { styles.searchList }>
{ {
props.data.map(item => { props.data.map(item => {
return ( return (
@ -118,13 +118,13 @@ const AccountsListJsx = (props) => {
); );
}) })
} }
</ul> </View>
); );
}; };
const HashtagListJsx = (props) => { const HashtagListJsx = (props) => {
return ( return (
<ul style = { styles.searchList }> <View style = { styles.searchList }>
{ {
props.data.map(item => { props.data.map(item => {
return ( return (
@ -140,7 +140,7 @@ const HashtagListJsx = (props) => {
); );
}) })
} }
</ul> </View>
); );
} }
@ -153,10 +153,9 @@ const styles = {
}, },
searchBar: { searchBar: {
padding: 10, padding: 10,
fontSize: "1.1em", fontSize: 17,
color: "#888" color: "#888"
}, },
searchList: { padding: 0 }, searchList: { padding: 0 },
searchResultContainer: { searchResultContainer: {
display: "flex", display: "flex",

View File

@ -46,7 +46,7 @@ const ViewHashtagJsx = ({navigation}) => {
#{ state.name } #{ state.name }
</Text> </Text>
<Text> <Text>
<strong>{ state.nPosts }</strong> posts <Text style = { styles.strong}>{ state.nPosts }</Text> posts
</Text> </Text>
<FollowHashtagButtonJsx <FollowHashtagButtonJsx
@ -84,7 +84,7 @@ const styles = {
}, },
hashtag: { hashtag: {
fontWeight: "bold", fontWeight: "bold",
fontSize: "1.2em" fontSize: 20
}, },
button: { button: {
border: "2px solid black", border: "2px solid black",
@ -94,6 +94,9 @@ const styles = {
paddingRight: 30, paddingRight: 30,
marginTop: 10 marginTop: 10
}, },
strong: {
fontWeight: "bold"
},
} }
export default ViewHashtagJsx; export default ViewHashtagJsx;

View File

@ -42,7 +42,7 @@ const FeedJsx = (props) => {
active = "Feed" active = "Feed"
navigation = { props.navigation }> navigation = { props.navigation }>
<TimelineViewJsx posts = { TEST_POSTS } /> <TimelineViewJsx posts = { TEST_POSTS } />
<div style = { styles.interruptionOuter }> <View style = { styles.interruptionOuter }>
<View style = { styles.interruption }> <View style = { styles.interruption }>
<Image <Image
source = { checkmark } source = { checkmark }
@ -51,7 +51,6 @@ const FeedJsx = (props) => {
<Text style = { styles.interruptionHeader }> <Text style = { styles.interruptionHeader }>
You're all caught up. You're all caught up.
</Text> </Text>
<br />
<Text> Wow, it sure is a lovely day outside 🌳 </Text> <Text> Wow, it sure is a lovely day outside 🌳 </Text>
<TouchableWithoutFeedback <TouchableWithoutFeedback
@ -59,7 +58,7 @@ const FeedJsx = (props) => {
<Text> See older posts </Text> <Text> See older posts </Text>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</View> </View>
</div> </View>
</ScreenWithTrayJsx> </ScreenWithTrayJsx>
); );
@ -83,7 +82,7 @@ const styles = {
alignItems: "center", alignItems: "center",
}, },
interruptionHeader: { interruptionHeader: {
fontSize: "1.3em" fontSize: 21
}, },
checkmark: { checkmark: {
width: screen_width * 0.3, width: screen_width * 0.3,

View File

@ -127,7 +127,7 @@ const ProfileDisplayJsx = ({navigation}) => {
style = { styles.displayName }> style = { styles.displayName }>
{state.displayName} {state.displayName}
</Text> </Text>
<Text><strong> @{state.username} </strong></Text> <Text><Text style={ styles.strong}> @{state.username} </Text></Text>
</View> </View>
<TouchableWithoutFeedback> <TouchableWithoutFeedback>
<Image <Image
@ -175,7 +175,7 @@ const styles = {
marginBottom: screen_width / 20 marginBottom: screen_width / 20
}, },
displayName: { displayName: {
fontSize: "1.5em" fontSize: 24
}, },
avatar: { avatar: {
width: screen_width / 5, width: screen_width / 5,
@ -192,11 +192,11 @@ const styles = {
marginRight: screen_width / 15 marginRight: screen_width / 15
}, },
accountStats: { accountStats: {
fontSize: "0.8em", fontSize: 14,
fontWeight: "bold" fontWeight: "bold"
}, },
note: { note: {
fontSize: "1em", fontSize: 16,
marginTop: 10, marginTop: 10,
}, },
button: { button: {
@ -210,7 +210,10 @@ const styles = {
}, },
buttonText: { buttonText: {
textAlign: "center" textAlign: "center"
} },
strong: {
fontWeight: "bold",
},
}; };
export { ViewProfileJsx, ProfileDisplayJsx }; export { ViewProfileJsx, ProfileDisplayJsx };

View File

@ -20,7 +20,7 @@ const GridViewJsx = (props) => {
{ {
rows.map((row, i) => { rows.map((row, i) => {
return ( return (
<ul style = { styles.gridRow } <View style = { styles.gridRow }
key = { i }> key = { i }>
{ {
row.map((post) => { row.map((post) => {
@ -29,7 +29,7 @@ const GridViewJsx = (props) => {
.preview_url; .preview_url;
return ( return (
<li key = { post.id }> <View key = { post.id }>
<GridPostJsx <GridPostJsx
id = { post.id } id = { post.id }
previewUrl = { post_url } previewUrl = { post_url }
@ -37,11 +37,11 @@ const GridViewJsx = (props) => {
(id) => props.openPostCallback(id) (id) => props.openPostCallback(id)
} }
/> />
</li> </View>
); );
}) })
} }
</ul> </View>
) )
}) })
} }

View File

@ -79,7 +79,7 @@ export const RawPostJsx = (props) => {
reblogged = {props.data.reblogged } /> reblogged = {props.data.reblogged } />
<View style = { styles.caption }> <View style = { styles.caption }>
<Text> <Text>
<strong>{ props.data.username }</strong>&nbsp;{ props.data.content } <Text style = { styles.strong }>{ props.data.username }</Text>&nbsp;{ props.data.content }
</Text> </Text>
<Text style = { styles.captionDate }> <Text style = { styles.captionDate }>
{ timeToAge((new Date()).getTime(), props.data.timestamp) } { timeToAge((new Date()).getTime(), props.data.timestamp) }
@ -186,15 +186,16 @@ const styles = {
marginRight: SCREEN_WIDTH / 36 marginRight: SCREEN_WIDTH / 36
}, },
postHeaderName: { postHeaderName: {
fontSize: "1em", fontSize: 16,
fontWeight: "bold", fontWeight: "bold",
color: "#000",
marginTop: -2 marginTop: -2
}, },
pfp: { pfp: {
width: SCREEN_WIDTH / 10, width: SCREEN_WIDTH / 10,
height: SCREEN_WIDTH / 10, height: SCREEN_WIDTH / 10,
marginRight: SCREEN_WIDTH / 28, marginRight: SCREEN_WIDTH / 28,
borderRadius: "100%" borderRadius: 50
}, },
photo: { photo: {
flex: 1, flex: 1,
@ -204,8 +205,12 @@ const styles = {
padding: SCREEN_WIDTH / 24, padding: SCREEN_WIDTH / 24,
}, },
captionDate: { captionDate: {
fontSize: "0.8em", fontSize: 0.8,
color: "#666", color: "#666",
paddingTop: 10 paddingTop: 10
},
strong: {
fontWeight: 'bold',
color: "#666",
} }
}; };