fix small ui issues
This commit is contained in:
parent
caf08ee32d
commit
66662e49c3
|
@ -14,12 +14,12 @@ const textStyle = {
|
||||||
color: 'hsla(218, 5%, 47%, .6)',
|
color: 'hsla(218, 5%, 47%, .6)',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
position: 'relative',
|
|
||||||
textAlign: 'inherit',
|
|
||||||
float: 'none',
|
|
||||||
margin: 2,
|
|
||||||
padding: 0,
|
padding: 0,
|
||||||
overflow: 'auto',
|
display: 'inline-block',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
marginTop: 3,
|
||||||
|
marginBottom: 3,
|
||||||
|
width: '75%',
|
||||||
};
|
};
|
||||||
|
|
||||||
const infoStyle = {
|
const infoStyle = {
|
||||||
|
@ -35,25 +35,30 @@ const infoStyle = {
|
||||||
|
|
||||||
const titleStyle = {
|
const titleStyle = {
|
||||||
color: '#4f545c',
|
color: '#4f545c',
|
||||||
marginLeft: 0,
|
|
||||||
marginRight: 10,
|
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
wordWrap: 'break-word',
|
wordWrap: 'break-word',
|
||||||
lineHeight: '24px',
|
lineHeight: '26px',
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
marginTop: 5,
|
|
||||||
marginBottom: 0,
|
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
};
|
};
|
||||||
|
|
||||||
const buttonStyle = {
|
const buttonStyle = {
|
||||||
marginTop: 10,
|
marginTop: 8,
|
||||||
marginBottom: 10,
|
marginBottom: 8,
|
||||||
border: '#c5c5c5',
|
border: '#c5c5c5',
|
||||||
borderStyle: 'solid',
|
borderStyle: 'solid',
|
||||||
|
borderRadius: 8,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const imageStyle = {
|
||||||
|
maxWidth: '20%',
|
||||||
|
opacity: 0.3,
|
||||||
|
padding: 2,
|
||||||
|
display: 'inline-block',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
};
|
||||||
|
|
||||||
const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
|
const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
|
||||||
<div
|
<div
|
||||||
style={buttonStyle}
|
style={buttonStyle}
|
||||||
|
@ -61,14 +66,12 @@ const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
|
<img
|
||||||
|
style={imageStyle}
|
||||||
|
alt="preview"
|
||||||
|
src={`/preview${canvasId}.png`}
|
||||||
|
/>
|
||||||
<p style={textStyle}>
|
<p style={textStyle}>
|
||||||
<img
|
|
||||||
style={{
|
|
||||||
float: 'left', maxWidth: '20%', margin: 5, opacity: 0.5,
|
|
||||||
}}
|
|
||||||
alt="preview"
|
|
||||||
src={`/preview${canvasId}.png`}
|
|
||||||
/>
|
|
||||||
<span style={titleStyle}>{canvas.title}</span><br />
|
<span style={titleStyle}>{canvas.title}</span><br />
|
||||||
<span style={infoStyle}>{canvas.desc}</span><br />
|
<span style={infoStyle}>{canvas.desc}</span><br />
|
||||||
Cooldown:
|
Cooldown:
|
||||||
|
@ -83,7 +86,8 @@ const CanvasItem = ({ canvasId, canvas, changeCanvas }) => (
|
||||||
<span style={infoStyle}>
|
<span style={infoStyle}>
|
||||||
{(canvas.req !== -1) ? <span>User Account </span> : null}
|
{(canvas.req !== -1) ? <span>User Account </span> : null}
|
||||||
{(canvas.req > 0) ? <span> and {canvas.req} Pixels set</span> : null}
|
{(canvas.req > 0) ? <span> and {canvas.req} Pixels set</span> : null}
|
||||||
</span><br />
|
</span>
|
||||||
|
{(canvas.req !== -1) ? <br /> : null}
|
||||||
Dimensions:
|
Dimensions:
|
||||||
<span style={infoStyle}> {canvas.size} x {canvas.size}
|
<span style={infoStyle}> {canvas.size} x {canvas.size}
|
||||||
{(canvas.v)
|
{(canvas.v)
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
/*
|
/*
|
||||||
* Menu with Buttons on the top left
|
* Menu with Buttons on the top left
|
||||||
|
*
|
||||||
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
@ -21,7 +23,8 @@ const Menu = ({
|
||||||
{(menuOpen) ? <DownloadButton /> : null}
|
{(menuOpen) ? <DownloadButton /> : null}
|
||||||
{(menuOpen) ? <MinecraftButton /> : null}
|
{(menuOpen) ? <MinecraftButton /> : null}
|
||||||
{(menuOpen) ? <HelpButton /> : null}
|
{(menuOpen) ? <HelpButton /> : null}
|
||||||
{(minecraftname && !messages.includes('not_mc_verified') && canvasId == 0) ? <MinecraftTPButton /> : null}
|
{(minecraftname && !messages.includes('not_mc_verified') && canvasId === 0)
|
||||||
|
? <MinecraftTPButton /> : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ import Palette from './Palette';
|
||||||
import HistorySelect from './HistorySelect';
|
import HistorySelect from './HistorySelect';
|
||||||
|
|
||||||
|
|
||||||
const UI = ({ isHistoricalView }) => {
|
const UI = ({ isHistoricalView, is3D }) => {
|
||||||
if (isHistoricalView) {
|
if (isHistoricalView) {
|
||||||
return <HistorySelect />;
|
return <HistorySelect />;
|
||||||
}
|
}
|
||||||
|
@ -23,7 +23,7 @@ const UI = ({ isHistoricalView }) => {
|
||||||
<div>
|
<div>
|
||||||
<PalselButton />
|
<PalselButton />
|
||||||
<Palette />
|
<Palette />
|
||||||
<GlobeButton />
|
{(is3D) ? null : <GlobeButton />}
|
||||||
<CoolDownBox />
|
<CoolDownBox />
|
||||||
<NotifyBox />
|
<NotifyBox />
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,9 +33,11 @@ const UI = ({ isHistoricalView }) => {
|
||||||
function mapStateToProps(state: State) {
|
function mapStateToProps(state: State) {
|
||||||
const {
|
const {
|
||||||
isHistoricalView,
|
isHistoricalView,
|
||||||
|
is3D,
|
||||||
} = state.canvas;
|
} = state.canvas;
|
||||||
return {
|
return {
|
||||||
isHistoricalView,
|
isHistoricalView,
|
||||||
|
is3D,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user