nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve the styling of the paging button in discover.js

This commit is contained in:
Nat 2021-04-10 13:40:38 -03:00
parent c1537a327b
commit d6fb9eb2e1
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/posts/grid-view.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { View, Dimensions, Image } from "react-native"; import { View, Dimensions, Image } from "react-native";
import GridPostJsx from "src/components/posts/grid-post" import GridPostJsx from "src/components/posts/grid-post";
function partition(arr, size) { function partition(arr, size) {
let newArray = []; let newArray = [];
@ -17,7 +17,7 @@ const GridViewJsx = (props) => {
let rows = partition(props.posts, 3); let rows = partition(props.posts, 3);
return ( return (
<View> <View>
{ {
rows.map((row, i) => { rows.map((row, i) => {
return ( return (
<View style = { styles.gridRow } <View style = { styles.gridRow }
@ -62,4 +62,4 @@ const styles = {
} }
}; };
export default GridViewJsx; export default GridViewJsx;

13
src/components/posts/paged-grid.js
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { View, TouchableWithoutFeedback, Text } from "react-native"; import { View, TouchableOpacity, Text } from "react-native";
import GridViewJsx from "src/components/posts/grid-view"; import GridViewJsx from "src/components/posts/grid-view";
@ -49,7 +49,7 @@ const PagedGridJSX = (props) => {
return ( return (
<View> <View>
<GridViewJsx <GridViewJsx
posts = { state.posts } posts = { state.posts }
openPostCallback = { openPostCallback = {
(id) => { (id) => {
@ -60,16 +60,16 @@ const PagedGridJSX = (props) => {
} }
} /> } />
<View style = { styles.buttonContainer }> <View style = { styles.buttonContainer }>
<TouchableWithoutFeedback <TouchableOpacity
onPress = { () => { onPress = { () => {
// TODO: actually get more posts :) // TODO: actually get more posts :)
let morePosts = state.posts.concat(TEST_POSTS); let morePosts = state.posts.concat(TEST_POSTS);
setState({ posts: morePosts, loaded: true }); setState({...state, posts: morePosts});
} }> } }>
<View style = { styles.buttonMore }> <View style = { styles.buttonMore }>
<Text>Show more?</Text> <Text>Show more?</Text>
</View> </View>
</TouchableWithoutFeedback> </TouchableOpacity>
</View> </View>
</View> </View>
); );
@ -82,7 +82,8 @@ const styles = {
alignItems: "center" alignItems: "center"
}, },
buttonMore: { buttonMore: {
border: "2px solid black", borderWidth: 1,
borderColor: "#888",
borderRadius: 5, borderRadius: 5,
padding: 10, padding: 10,
margin: 20 margin: 20