forked from vergnet/application-amicale
Improved ui on larger screens
This commit is contained in:
parent
7da30e0af6
commit
3bc45704f6
4 changed files with 14 additions and 6 deletions
|
@ -199,7 +199,7 @@ class TetrisScreen extends React.Component<Props, State> {
|
||||||
<View style={{
|
<View style={{
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 10,
|
top: 5,
|
||||||
left: 10,
|
left: 10,
|
||||||
}}>
|
}}>
|
||||||
<MaterialCommunityIcons
|
<MaterialCommunityIcons
|
||||||
|
@ -242,7 +242,8 @@ class TetrisScreen extends React.Component<Props, State> {
|
||||||
<Grid
|
<Grid
|
||||||
width={this.logic.getWidth()}
|
width={this.logic.getWidth()}
|
||||||
height={this.logic.getHeight()}
|
height={this.logic.getHeight()}
|
||||||
containerHeight={'80%'}
|
containerMaxHeight={'80%'}
|
||||||
|
containerMaxWidth={'60%'}
|
||||||
grid={this.state.grid}
|
grid={this.state.grid}
|
||||||
backgroundColor={this.colors.tetrisBackground}
|
backgroundColor={this.colors.tetrisBackground}
|
||||||
/>
|
/>
|
||||||
|
@ -256,6 +257,8 @@ class TetrisScreen extends React.Component<Props, State> {
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<View style={{
|
<View style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
}}>
|
}}>
|
||||||
|
@ -288,6 +291,7 @@ class TetrisScreen extends React.Component<Props, State> {
|
||||||
onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
|
onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
|
||||||
onPress={() => this.logic.pressedOut()}
|
onPress={() => this.logic.pressedOut()}
|
||||||
style={{marginLeft: 'auto'}}
|
style={{marginLeft: 'auto'}}
|
||||||
|
color={this.colors.tetrisScore}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -27,6 +27,7 @@ class Cell extends React.PureComponent<Props> {
|
||||||
backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
|
backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
|
||||||
borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
|
borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
|
||||||
borderStyle: 'solid',
|
borderStyle: 'solid',
|
||||||
|
borderRadius: 2,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -11,7 +11,8 @@ type Props = {
|
||||||
backgroundColor: string,
|
backgroundColor: string,
|
||||||
height: number,
|
height: number,
|
||||||
width: number,
|
width: number,
|
||||||
containerHeight: number|string,
|
containerMaxHeight: number|string,
|
||||||
|
containerMaxWidth: number|string,
|
||||||
}
|
}
|
||||||
|
|
||||||
class Grid extends React.Component<Props>{
|
class Grid extends React.Component<Props>{
|
||||||
|
@ -33,6 +34,7 @@ class Grid extends React.Component<Props>{
|
||||||
return(
|
return(
|
||||||
<View style={{
|
<View style={{
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
backgroundColor: this.props.backgroundColor,
|
||||||
}}>
|
}}>
|
||||||
{cells}
|
{cells}
|
||||||
</View>
|
</View>
|
||||||
|
@ -51,11 +53,11 @@ class Grid extends React.Component<Props>{
|
||||||
return (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
height: this.props.containerHeight,
|
maxWidth: this.props.containerMaxWidth,
|
||||||
|
maxHeight: this.props.containerMaxHeight,
|
||||||
aspectRatio: this.props.width/this.props.height,
|
aspectRatio: this.props.width/this.props.height,
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
marginRight: 'auto',
|
marginRight: 'auto',
|
||||||
backgroundColor: this.props.backgroundColor,
|
|
||||||
}}>
|
}}>
|
||||||
{this.getGrid()}
|
{this.getGrid()}
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -26,7 +26,8 @@ class Preview extends React.PureComponent<Props> {
|
||||||
width={this.props.next[i][0].length}
|
width={this.props.next[i][0].length}
|
||||||
height={this.props.next[i].length}
|
height={this.props.next[i].length}
|
||||||
grid={this.props.next[i]}
|
grid={this.props.next[i]}
|
||||||
containerHeight={50}
|
containerMaxHeight={50}
|
||||||
|
containerMaxWidth={50}
|
||||||
backgroundColor={'transparent'}
|
backgroundColor={'transparent'}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue