Skip to content

Improvement on the mobile layout #274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improvement on the mobile layout #274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cbc316
small mobile style fixes
jonijuup Aug 26, 2022
d3b0fef
optimize editor navigation by removing shortcuts on mobile, more spac…
jonijuup Aug 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion components/ButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ const ButtonGroup = styled('div', {
marginLeft: '1px',
[`& ${StyledButton}`]: {
marginLeft: '-1px',
px: '$4',
px: '0.65rem',
zIndex: 2,
position: 'relative',
'&:hover, &:focus': {
zIndex: 200
},
'@sm': {
px: '$4'
}
},
[`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {
Expand Down
6 changes: 4 additions & 2 deletions components/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,10 @@ const StyledContent = styled(DialogPrimitive.Content, {
color: '$mauve12',
borderRadius: '$md',
position: 'relative',
mb: '15%',
mb: '0%',
boxShadow: '0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)',
width: '90vw',
maxWidth: '450px',
// maxHeight: "85vh",
padding: 25,
'@media (prefers-reduced-motion: no-preference)': {
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
Expand All @@ -53,6 +52,9 @@ const StyledContent = styled(DialogPrimitive.Content, {
'.dark &': {
backgroundColor: '$mauve5',
boxShadow: '0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)'
},
'@md': {
mb: '8%'
}
})

Expand Down
25 changes: 23 additions & 2 deletions components/EditorNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
return (
<Flex css={{ flexShrink: 0, gap: '$0' }}>
<Flex
id="kissa"
ref={scrollRef}
css={{
overflowX: 'scroll',
Expand Down Expand Up @@ -181,7 +180,21 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
</DropdownMenuContent>
</DropdownMenu>
) : (
<Button outline size="sm" css={{ mr: '$3' }} onClick={() => setPopUp(true)}>
<Button
outline
size="sm"
css={{
mr: '-1px',
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
'@sm': {
borderTopRightRadius: '$sm',
borderBottomRightRadius: '$sm',
mr: '$3'
}
}}
onClick={() => setPopUp(true)}
>
<GithubLogo size="16px" /> Login
</Button>
)}
Expand All @@ -202,6 +215,9 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
alignSelf: 'flex-start',
boxShadow: 'none'
},
'button:not(:last-child)': {
display: 'none'
},
'button:not(:first-child):not(:last-child)': {
borderRight: 0,
borderLeft: 0
Expand All @@ -217,6 +233,11 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
'&:hover': {
boxShadow: 'inset 0px 0px 0px 1px $colors$mauve12'
}
},
'@sm': {
'button:not(:last-child)': {
display: 'flex'
}
}
}}
>
Expand Down
58 changes: 41 additions & 17 deletions components/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { styled } from '../stitches.config'
const ImageWrapper = styled(Flex, {
position: 'relative',
mt: '$2',
mb: '$10',
mb: '$6',
svg: {
// fill: "red",
'.angle': {
Expand Down Expand Up @@ -66,16 +66,23 @@ const Navigation = () => {
<Container
css={{
display: 'flex',
alignItems: 'center'
alignItems: 'center',
px: '$3',
'@sm': {
px: '$4'
}
}}
>
<Flex
css={{
flex: 1,
alignItems: 'center',
borderRight: '1px solid $colors$mauve6',
py: '$3',
pr: '$4'
pr: '$0',
'@sm': {
borderRight: '1px solid $colors$mauve6',
pr: '$4'
}
}}
>
<Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
Expand All @@ -84,17 +91,24 @@ const Navigation = () => {
css={{
display: 'flex',
alignItems: 'center',
color: '$textColor'
color: '$textColor',
mr: '$2',
'@sm': {
mr: '$4'
}
}}
>
<Logo width="32px" height="32px" />
</Box>
</Link>
<Flex
css={{
ml: '$5',
flexDirection: 'column',
gap: '1px'
gap: '1px',
display: 'none',
'@md': {
display: 'flex'
}
}}
>
{snap.loading ? (
Expand Down Expand Up @@ -135,8 +149,8 @@ const Navigation = () => {
css={{
display: 'flex',
maxWidth: '1080px',
width: '80vw',
maxHeight: '80%',
width: '90vw',
maxHeight: '90%',
backgroundColor: '$mauve1 !important',
overflowY: 'auto',
background: 'black',
Expand Down Expand Up @@ -265,15 +279,18 @@ const Navigation = () => {
gridTemplateColumns: '1fr',
gridTemplateRows: 'max-content',
flex: 1,
p: '$7',
pb: '$16',
p: '$4',
pb: '$8',
gap: '$3',
alignItems: 'normal',
flexWrap: 'wrap',
backgroundColor: '$mauve1',
'@md': {
gridTemplateColumns: '1fr 1fr',
gridTemplateRows: 'max-content'
gridTemplateRows: 'max-content',
p: '$7',
pb: '$10',
paddingRight: '$12'
},
'@lg': {
gridTemplateColumns: '1fr 1fr 1fr',
Expand Down Expand Up @@ -316,23 +333,30 @@ const Navigation = () => {
<Flex
css={{
flexWrap: 'nowrap',
marginLeft: '$4',
marginLeft: '$2',
overflowX: 'scroll',
'&::-webkit-scrollbar': {
height: 0,
background: 'transparent'
},
scrollbarColor: 'transparent',
scrollbarWidth: 'none'
scrollbarWidth: 'none',
'@sm': {
marginLeft: '$4'
}
}}
>
<Stack
css={{
ml: '$4',
gap: '$3',
ml: '$0',
gap: '$2',
flexWrap: 'nowrap',
alignItems: 'center',
marginLeft: 'auto'
marginLeft: 'auto',
'@sm': {
marginLeft: '$4',
gap: '$3'
}
}}
>
<ButtonGroup>
Expand Down
2 changes: 1 addition & 1 deletion components/PanelBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const PanelBox = styled('div', {
flexDirection: 'column',
border: '1px solid $colors$mauve6',
backgroundColor: '$mauve2',
padding: '$3',
padding: '$5',
borderRadius: '$sm',
fontWeight: 'lighter',
height: 'auto',
Expand Down
13 changes: 9 additions & 4 deletions components/Transaction/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,11 +185,16 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
row
css={{
justifyContent: 'space-between',
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
mb: '$1'
mb: '$2',
mt: '$1',
'@md': {
position: 'absolute',
left: 0,
bottom: 0,
mt: '$0',
mb: '$2'
}
}}
>
<Button
Expand Down
66 changes: 52 additions & 14 deletions components/Transaction/ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,11 +137,14 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
row
fluid
css={{
justifyContent: 'flex-end',
justifyContent: 'space-between',
alignItems: 'center',
mb: '$3',
mt: '1px',
pr: '1px'
pr: '1px',
'@xl': {
justifyContent: 'flex-end'
}
}}
>
<Text muted css={{ mr: '$3' }}>
Expand All @@ -152,7 +155,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
placeholder="Select transaction type"
options={transactionsOptions}
hideSelectedOptions
css={{ width: '70%' }}
css={{
width: '60%',
minWidth: '200px',
'@lg': {
width: '70%'
}
}}
value={selectedTransaction}
onChange={(tt: any) => handleChangeTxType(tt)}
/>
Expand All @@ -161,10 +170,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
row
fluid
css={{
justifyContent: 'flex-end',
justifyContent: 'space-between',
alignItems: 'center',
mb: '$3',
pr: '1px'
pr: '1px',
'@xl': {
justifyContent: 'flex-end'
}
}}
>
<Text muted css={{ mr: '$3' }}>
Expand All @@ -173,7 +185,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
<Select
instanceId="from-account"
placeholder="Select your account"
css={{ width: '70%' }}
css={{
width: '60%',
minWidth: '200px',
'@lg': {
width: '70%'
}
}}
options={accountOptions}
value={selectedAccount}
onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
Expand All @@ -184,10 +202,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
row
fluid
css={{
justifyContent: 'flex-end',
justifyContent: 'space-between',
alignItems: 'center',
mb: '$3',
pr: '1px'
pr: '1px',
'@xl': {
justifyContent: 'flex-end'
}
}}
>
<Text muted css={{ mr: '$3' }}>
Expand All @@ -196,7 +217,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
<Select
instanceId="to-account"
placeholder="Select the destination account"
css={{ width: '70%' }}
css={{
width: '60%',
minWidth: '200px',
'@lg': {
width: '70%'
}
}}
options={destAccountOptions}
value={selectedDestAccount}
isClearable
Expand Down Expand Up @@ -229,9 +256,12 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
row
fluid
css={{
justifyContent: 'flex-end',
justifyContent: 'space-between',
alignItems: 'center',
position: 'relative'
position: 'relative',
'@xl': {
justifyContent: 'flex-end'
}
}}
>
<Text muted css={{ mr: '$3' }}>
Expand All @@ -244,9 +274,13 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
spellCheck={false}
onChange={switchToJson}
css={{
width: '70%',
width: '60%',
minWidth: '200px',
flex: 'inherit',
resize: 'vertical'
resize: 'vertical',
'@lg': {
width: '70%'
}
}}
/>
) : (
Expand All @@ -271,7 +305,8 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
: undefined
}
css={{
width: '70%',
width: '60%',
minWidth: '200px',
flex: 'inherit',
'-moz-appearance': 'textfield',
'&::-webkit-outer-spin-button': {
Expand All @@ -281,6 +316,9 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
'&::-webkit-inner-spin-button ': {
'-webkit-appearance': 'none',
margin: 0
},
'@lg': {
width: '70%'
}
}}
/>
Expand Down
Loading