Skip to content

Commit

Permalink
fix(frontend): fix layout styles for tablet devices (#210)
Browse files Browse the repository at this point in the history 
Co-authored-by: AshenI99 <[email protected]>
Co-authored-by: Achraf <[email protected]>
Co-authored-by: achraf elghinoussi <[email protected]>
  • Loading branch information
@AshenI99 @sekaiking
4 people authored Jan 3, 2022
1 parent d42bf05 commit 27f181c
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 40 deletions.
26 changes: 13 additions & 13 deletions examples/frontend/containers/layouts/Create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ const CreateLayout = ({
>
<Box
sx={{
display: 'inline-block',
width: ['100%', '100%', '100%', '50%'],
maxWidth: '90vh',
mr: [0, 0, 0, 4],
mb: [4, 4, 4, 0],
display: ['block', 'block', 'block','inline-block'],
width: ['100%', '70%', '70%', '50%'],
mr: [0, 'auto', 'auto', 4],
ml: [0, 'auto', 'auto', 0],
mb: [4, 4, 0, 0],
textAlign:'center',
}}
>
<AspectRatio
Expand All @@ -35,23 +36,22 @@ const CreateLayout = ({
display: 'flex',
justifyContent: 'center',
mb: 36,
width: ['100%', '70%'],
height: ['100%', '70%'],
width: ['100%', '100%', '100%', '70%'],
maxHeight: ['100%', '100%', '100%', '70%'],
marginLeft: 'auto',
marginRight:['auto', '10%']
marginRight:['auto', 'auto', 'auto', '10%']
}}
>
{frameComponent}
</AspectRatio>
</Box>
<Box
sx={{
ml: 3,
mt: 0,
display: 'inline-block',
display: ['block', 'block', 'block','inline-block'],
verticalAlign: 'top',
float: 'right',
width: ['100%', '100%', '100%', '40%'],
margin:'auto',
width: ['100%', '70%', '70%', '40%'],
}}
>
<Box
Expand All @@ -60,7 +60,7 @@ const CreateLayout = ({
flexDirection: ['row', 'row', 'row', 'column'],
alignItems: 'start',
rowGap: 18,
mb: [30, 30, 40, 30],
mb: [30, 30, 30, 30],
}}
>
<Button
Expand Down
24 changes: 12 additions & 12 deletions examples/frontend/containers/layouts/View.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ const ViewLayout = ({
>
<Box
sx={{
display: 'inline-block',
width: ['100%', '100%', '100%', '50%'],
maxWidth: '90vh',
mr: [0, 0, 0, 4],
mb: [4, 4, 4, 0],
display: ['block', 'block', 'block','inline-block'],
width: ['100%', '70%', '70%', '50%'],
mr: [0, 'auto', 'auto', 4],
ml: [0, 'auto', 'auto', 0],
mb: [4, 4, 0, 0],
textAlign:'center',
}}
>
<AspectRatio
Expand All @@ -35,23 +36,22 @@ const ViewLayout = ({
display: 'flex',
justifyContent: 'center',
mb: 36,
maxWidth: ['100%', '70%'],
maxHeight: ['100%', '70%'],
width: ['100%', '100%', '100%', '70%'],
maxHeight: ['100%', '100%', '100%', '70%'],
marginLeft: 'auto',
marginRight:['auto', '10%']
marginRight:['auto', 'auto', 'auto', '10%']
}}
>
{frameComponent}
</AspectRatio>
</Box>
<Box
sx={{
ml: 3,
mt: 0,
display: 'inline-block',
display: ['block', 'block', 'block','inline-block'],
verticalAlign: 'top',
float: 'right',
width: ['100%', '100%', '100%', '40%'],
margin: 'auto',
width: ['100%', '70%', '70%', '40%'],
}}
>
<Button onClick={burnDesign} variant="borderless">
Expand Down
56 changes: 41 additions & 15 deletions packages/components/src/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const Header = ({
<Box
p={3}
sx={{
flex: 1,
flex: ['unset', 'unset', 'unset', 1],
textAlign: 'left',
borderBottom: [1, 0],
display: 'flex',
Expand All @@ -91,7 +91,11 @@ export const Header = ({
sx={{
position: 'relative',
zIndex: 11,
borderColor: isMenuOpen ? mode == 'dark' ? 'black' : 'white' : 'initial',
borderColor: isMenuOpen
? mode == 'dark'
? 'black'
: 'white'
: 'initial',
transitionDuration: '0.3s',
transform: isMenuOpen
? 'rotate(135deg)'
Expand All @@ -109,7 +113,11 @@ export const Header = ({
fill="none"
sx={{
fill: isMenuOpen ? 'white' : 'text',
stroke: isMenuOpen ? mode == 'dark' ? 'black' : 'white' : 'inherit',
stroke: isMenuOpen
? mode == 'dark'
? 'black'
: 'white'
: 'inherit',
height: '100%',
}}
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -139,11 +147,17 @@ export const Header = ({
{accountId ? (
nextLinkWrapper(
`/${base}/bids`,
<Button
<Button
variant="mobileMenu"
sx={{
color: mode == 'dark' ? 'black' : 'white',
borderColor: mode == 'dark' ? 'black' : 'white',
color:
mode == 'dark'
? 'black'
: 'white',
borderColor:
mode == 'dark'
? 'black'
: 'white',
}}
>
bids
Expand All @@ -154,10 +168,15 @@ export const Header = ({
onClick={onSignIn}
variant="mobileMenu"
sx={{
color: mode == 'dark' ? 'black' : 'white',
borderColor: mode == 'dark' ? 'black' : 'white',
color:
mode == 'dark'
? 'black'
: 'white',
borderColor:
mode == 'dark'
? 'black'
: 'white',
}}

>
connect NEAR
</Button>
Expand All @@ -168,10 +187,11 @@ export const Header = ({
target="_blank"
variant="mobileMenu"
sx={{
color: mode == 'dark' ? 'black' : 'white',
borderColor: mode == 'dark' ? 'black' : 'white',
color:
mode == 'dark' ? 'black' : 'white',
borderColor:
mode == 'dark' ? 'black' : 'white',
}}

>
twitter ↗
</Button>
Expand All @@ -180,8 +200,14 @@ export const Header = ({
onClick={onSignOut}
variant="mobileMenu"
sx={{
color: mode == 'dark' ? 'black' : 'white',
borderColor: mode == 'dark' ? 'black' : 'white',
color:
mode == 'dark'
? 'black'
: 'white',
borderColor:
mode == 'dark'
? 'black'
: 'white',
}}
>
disconnect
Expand Down Expand Up @@ -217,7 +243,7 @@ export const Header = ({
display: 'inline-block',
}}
>
{titleArray[1] && (titleArray[0] + '/')}
{titleArray[1] && titleArray[0] + '/'}
</Text>
<Text
variant="title"
Expand Down

1 comment on commit 27f181c

@vercel
Copy link

@vercel vercel bot commented on 27f181c Jan 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.