zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

hotfix(responsive): refactoring UI on wallet summary to allow for small screens

This commit is contained in:
Andre Neves 2019-06-02 13:19:20 -04:00
parent b76c56a1e9
commit ec2609bb0f
4 changed files with 68 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/components/wallet-summary.js
View File

@ -9,6 +9,8 @@ import { formatNumber } from '../utils/format-number';
import { getCoinName } from '../utils/get-coin-name'; import { getCoinName } from '../utils/get-coin-name';
import { DARK } from '../constants/themes'; import { DARK } from '../constants/themes';
import { media } from '../theme';
import ShieldDarkImage from '../assets/images/shield_dark.png'; import ShieldDarkImage from '../assets/images/shield_dark.png';
import ShieldLightImage from '../assets/images/shield_light.png'; import ShieldLightImage from '../assets/images/shield_light.png';
@ -18,12 +20,17 @@ const OutsideWrapper = styled.div`
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: column;
background-color: ${props => props.theme.colors.walletSummaryBg}; background-color: ${props => props.theme.colors.walletSummaryBg};
border: 1px solid ${props => props.theme.colors.walletSummaryBorder}; border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
border-radius: ${props => props.theme.boxBorderRadius}; border-radius: ${props => props.theme.boxBorderRadius};
padding: 30px 30px; padding: 30px 30px;
position: relative; position: relative;
${media.main`
margin-top: 0;
flex-direction: row;
`}
`; `;
const OutsideLabel = styled(TextComponent)` const OutsideLabel = styled(TextComponent)`
@ -86,6 +93,15 @@ const UnconfirmedValue = styled(MiddleLabel)`
color: ${props => props.theme.colors.walletSummaryUnconfirmed}; color: ${props => props.theme.colors.walletSummaryUnconfirmed};
`; `;
const DetailMainContainer = styled.div`
display: flex;
margin-top: 1rem;
${media.main`
margin-top: 0;
`}
`;
type Props = { type Props = {
total: number, total: number,
shielded: number, shielded: number,
@ -120,33 +136,35 @@ export const Component = ({
size={theme.fontSize.medium * 2} size={theme.fontSize.medium * 2}
/> />
</TotalContainer> </TotalContainer>
<DetailContainer> <DetailMainContainer>
<ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} /> <DetailContainer>
<MiddleLabel <ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} />
value={`${coinName} ${formatNumber({ value: shielded })}`} <MiddleLabel
isBold value={`${coinName} ${formatNumber({ value: shielded })}`}
size='16px' isBold
/> size='16px'
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} /> />
</DetailContainer> <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
<DetailContainer> </DetailContainer>
<DefaultLabel value='TRANSPARENT' isBold size={theme.fontSize.small} /> <DetailContainer>
<MiddleLabel <DefaultLabel value='TRANSPARENT' isBold size={theme.fontSize.small} />
value={`${coinName} ${formatNumber({ value: transparent })}`} <MiddleLabel
isBold value={`${coinName} ${formatNumber({ value: transparent })}`}
size='16px' isBold
/> size='16px'
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} /> />
</DetailContainer> <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
<DetailContainer> </DetailContainer>
<UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} /> <DetailContainer>
<UnconfirmedValue <UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} />
value={`${coinName} ${formatNumber({ value: transparent })}`} <UnconfirmedValue
isBold value={`${coinName} ${formatNumber({ value: transparent })}`}
size='16px' isBold
/> size='16px'
<USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} /> />
</DetailContainer> <USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} />
</DetailContainer>
</DetailMainContainer>
</Wrapper> </Wrapper>
</OutsideWrapper> </OutsideWrapper>
); );

1
app/theme/index.js
View File

@ -3,3 +3,4 @@
export { appTheme } from './theme'; export { appTheme } from './theme';
export { DoczWrapper } from './docz'; export { DoczWrapper } from './docz';
export { GlobalStyle } from './global'; export { GlobalStyle } from './global';
export { media } from './media-queries';

20
app/theme/media-queries.js Normal file
View File

@ -0,0 +1,20 @@
// @flow
import { css } from 'styled-components';
// Media Queries
export const sizes = {
main: 910,
// desktop: 1024,
// largeDesktop: 1280,
};
export const media = Object.keys(sizes).reduce((acc, label) => {
acc[label] = (...args: any) => css`
@media (min-width: ${sizes[label]}px) {
${css(...args)}
}
`;
return acc;
}, {});

2
config/electron.js
View File

@ -57,7 +57,7 @@ const createWindow = () => {
}); });
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
minWidth: 700, minWidth: 815,
minHeight: 600, minHeight: 600,
width: 1000, width: 1000,
height: 660, height: 660,