Merge pull request #6 from mediaformat/main
Convert html to xml, fix css
This commit is contained in:
commit
a5b916032e
2
app.json
2
app.json
|
@ -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"
|
||||||
},
|
},
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,7 @@ const styles = {
|
||||||
},
|
},
|
||||||
searchBar: {
|
searchBar: {
|
||||||
padding: 10,
|
padding: 10,
|
||||||
fontSize: "1.1em",
|
fontSize: 17,
|
||||||
color: "#888"
|
color: "#888"
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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;
|
|
@ -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,
|
||||||
|
|
|
@ -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 };
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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> { props.data.content }
|
<Text style = { styles.strong }>{ props.data.username }</Text> { 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",
|
||||||
}
|
}
|
||||||
};
|
};
|
Loading…
Reference in New Issue