certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Mobile design fixes (#58) 

* fixed navbar and overall  mobile css for home page

* fixed menu witdh

* fixed mobile css on transfer page

* fix: padding on settings button
This commit is contained in:
Juan Diego García 2021-04-09 16:36:14 -05:00 committed by GitHub
parent 92d2c151c2
commit b16fba03f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 362 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bridge/src/App.less
View File

@ -140,10 +140,6 @@ em {
padding: 6px 16px !important;
}
.ant-table {
margin: 0px 30px;
}
.ant-menu-inline-collapsed > .ant-menu-item {
padding-left: 16px !important;
}

74
packages/bridge/src/components/AppBar/index.less
View File

@ -1,5 +1,22 @@
@import "_colors";
.app-left {
header.ant-layout-header.App-Bar {
position: absolute;
width: 100%;
background: transparent;
display: flex;
justify-content: center;
height: 80px;
.nav-burger {
cursor: pointer;
display: none;
}
}
.app-bar-item.logo {
position: absolute;
left: 10%;
}
@ -12,6 +29,7 @@
min-width: 50%;
justify-content: center;
height: auto;
align-items: center;
.app-bar-item {
cursor: pointer;
padding: 0 30px;
@ -25,3 +43,57 @@
}
}
}
@media screen and (min-width: 901px) {
header.ant-layout-header.App-Bar {
width: 100% !important;
}
}
@media screen and (max-width: 1200px) {
.app-bar-item.logo {
position: relative;
left: 0;
}
.app-bar-item.app-right{
position: relative;
left: 0;
padding: 0;
}
}
@media screen and (max-width: 900px) {
header.ant-layout-header.App-Bar {
position: fixed;
transition: ease-in-out 0.5s;
width: 0;
max-width: 240px;
height: 100%;
flex-direction: column;
justify-content: flex-start;
padding: 0;
.nav-burger {
display: inline-block;
left: 30px;
position: relative;
transition: ease-in-out 0.5s;
z-index: 10;
}
.app-bar-inner {
//opacity: 0;
left: -100px;
position: relative;
transition: ease-in-out 0.5s;
flex-direction: column;
}
background: #06101a;
& > .nav-burger.mobile-active {
width: 30px;
position: relative;
left: 0;
}
.app-bar-inner.mobile-active {
left: 0px;
}
}
}

79
packages/bridge/src/components/AppBar/index.tsx
View File

@ -1,8 +1,17 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import './index.less';
import { Link, useLocation } from 'react-router-dom';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { Button, Popover } from 'antd';
import { LABELS } from '../../constants';
import { Settings } from '@oyster/common';
export const AppBar = () => {
export const AppBar = (props: { isRoot?: boolean }) => {
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
const location = useLocation();
const isActiveClass = useCallback(
@ -12,20 +21,60 @@ export const AppBar = () => {
[location],
);
useEffect(() => {
const header = document.getElementById('app-header');
if (header) {
header.style.width = showMobileMenu ? '100%' : '0';
}
}, [showMobileMenu, document.body.offsetWidth]);
return (
<div className={'app-bar-inner'}>
<div className={`app-bar-item ${isActiveClass('move')}`}>
<Link to="/move">Bridge</Link>
<>
<span
className={`nav-burger ${showMobileMenu ? 'mobile-active' : ''}`}
onClick={() => setShowMobileMenu(!showMobileMenu)}
>
{showMobileMenu ? (
<MenuFoldOutlined style={{ fontSize: '25px' }} />
) : (
<MenuUnfoldOutlined style={{ fontSize: '25px' }} />
)}
</span>
<div className={`app-bar-inner ${showMobileMenu ? 'mobile-active' : ''}`}>
{!props.isRoot && (
<div className={`app-bar-item logo root-mobile`}>
<img alt="logo-bar" src={'/appbar/logo.svg'} />
</div>
)}
<div className={`app-bar-item ${isActiveClass('move')}`}>
<Link to="/move">Bridge</Link>
</div>
<div className={`app-bar-item ${isActiveClass('faq')}`}>
<Link to="/faq">FAQ</Link>
</div>
<div className={`app-bar-item ${isActiveClass('proof-of-assets')}`}>
<Link to="/proof-of-assets">Proof-of-Assets</Link>
</div>
<div className={`app-bar-item ${isActiveClass('help')}`}>
<Link to="/help">Help</Link>
</div>
{!props.isRoot && (
<Popover
placement="topRight"
title={LABELS.SETTINGS_TOOLTIP}
content={<Settings />}
trigger="click"
>
<Button
className={'app-right app-bar-item'}
shape="circle"
size="large"
type="text"
icon={<SettingOutlined />}
/>
</Popover>
)}
</div>
<div className={`app-bar-item ${isActiveClass('faq')}`}>
<Link to="/faq">FAQ</Link>
</div>
<div className={`app-bar-item ${isActiveClass('proof-of-assets')}`}>
<Link to="/proof-of-assets">Proof-of-Assets</Link>
</div>
<div className={`app-bar-item ${isActiveClass('help')}`}>
<Link to="/help">Help</Link>
</div>
</div>
</>
);
};

27
packages/bridge/src/components/Layout/index.tsx
View File

@ -33,31 +33,8 @@ export const AppLayout = React.memo((props: any) => {
<>
<div className={`App`}>
<Layout title={LABELS.APP_TITLE}>
<Header className="App-Bar">
{!isRoot && (
<div className="app-title app-left">
<Link to="/">
<img alt="logo-bar" src={'/appbar/logo.svg'} />
</Link>
</div>
)}
<AppBar />
{!isRoot && (
<Popover
placement="topRight"
title={LABELS.SETTINGS_TOOLTIP}
content={<Settings />}
trigger="click"
>
<Button
className={'app-right'}
shape="circle"
size="large"
type="text"
icon={<SettingOutlined />}
/>
</Popover>
)}
<Header className="App-Bar" id={'app-header'}>
<AppBar isRoot={isRoot} />
</Header>
<Content style={{ flexDirection: 'column' }}>
{props.children}

1
packages/bridge/src/components/RecentTransactionsTable/index.tsx
View File

@ -117,6 +117,7 @@ export const RecentTransactionsTable = () => {
<Table
scroll={{
scrollToFirstRowOnChange: false,
x: 900,
}}
dataSource={externalAssets.filter(a => a.name)}
columns={columns}

265
packages/bridge/src/components/Transfer/index.tsx
View File

@ -127,7 +127,7 @@ export const Transfer = () => {
}
}}
>
⇆
<span></span>
</Button>
<Input
title={`To`}
@ -147,151 +147,152 @@ export const Transfer = () => {
}}
className={'right'}
/>
<Button
className={'transfer-button'}
type="primary"
size="large"
disabled={!(A.amount && B.amount) || !connected || !provider}
onClick={async () => {
if (!wallet || !provider) {
return;
}
</div>
const token = tokenMap.get(request.asset?.toLowerCase() || '');
const NotificationContent = () => {
const [activeSteps, setActiveSteps] = useState<ProgressUpdate[]>(
[],
);
useEffect(() => {
(async () => {
let steps: ProgressUpdate[] = [];
try {
if (request.from === ASSET_CHAIN.Solana) {
await fromSolana(
connection,
wallet,
request,
provider,
update => {
if (update.replace) {
steps.pop();
steps = [...steps, update];
} else {
steps = [...steps, update];
}
<Button
className={'transfer-button'}
type="primary"
size="large"
disabled={!(A.amount && B.amount) || !connected || !provider}
onClick={async () => {
if (!wallet || !provider) {
return;
}
setActiveSteps(steps);
},
);
}
const token = tokenMap.get(request.asset?.toLowerCase() || '');
const NotificationContent = () => {
const [activeSteps, setActiveSteps] = useState<ProgressUpdate[]>(
[],
);
useEffect(() => {
(async () => {
let steps: ProgressUpdate[] = [];
try {
if (request.from === ASSET_CHAIN.Solana) {
await fromSolana(
connection,
wallet,
request,
provider,
update => {
if (update.replace) {
steps.pop();
steps = [...steps, update];
} else {
steps = [...steps, update];
}
if (request.to === ASSET_CHAIN.Solana) {
await toSolana(
connection,
wallet,
request,
provider,
update => {
if (update.replace) {
steps.pop();
steps = [...steps, update];
} else {
steps = [...steps, update];
}
setActiveSteps(steps);
},
);
}
} catch (err) {
// TODO...
console.log(err);
setActiveSteps(steps);
},
);
}
})();
}, [setActiveSteps]);
return (
<div>
<div style={{ display: 'flex' }}>
<div>
<h5>{`${chainToName(
request.from,
)} Mainnet -> ${chainToName(request.to)} Mainnet`}</h5>
<h2>
{request.amount?.toString()} {request.info?.name}
</h2>
</div>
<div
style={{
display: 'flex',
marginLeft: 'auto',
marginRight: 10,
}}
>
<TokenDisplay
asset={request.asset}
chain={request.from}
token={token}
/>
<span style={{ margin: 15 }}>{'➔'}</span>
<TokenDisplay
asset={request.asset}
chain={request.to}
token={token}
/>
</div>
if (request.to === ASSET_CHAIN.Solana) {
await toSolana(
connection,
wallet,
request,
provider,
update => {
if (update.replace) {
steps.pop();
steps = [...steps, update];
} else {
steps = [...steps, update];
}
setActiveSteps(steps);
},
);
}
} catch (err) {
// TODO...
console.log(err);
}
})();
}, [setActiveSteps]);
return (
<div>
<div style={{ display: 'flex' }}>
<div>
<h5>{`${chainToName(request.from)} Mainnet -> ${chainToName(
request.to,
)} Mainnet`}</h5>
<h2>
{request.amount?.toString()} {request.info?.name}
</h2>
</div>
<div
style={{
textAlign: 'left',
display: 'flex',
flexDirection: 'column',
marginLeft: 'auto',
marginRight: 10,
}}
>
{(() => {
let group = '';
return activeSteps.map((step, i) => {
let prevGroup = group;
group = step.group;
let newGroup = prevGroup !== group;
return (
<>
{newGroup && <span>{group}</span>}
<span style={{ marginLeft: 15 }}>
{typeToIcon(
step.type,
activeSteps.length - 1 === i,
)}{' '}
{step.message}
</span>
</>
);
});
})()}
<TokenDisplay
asset={request.asset}
chain={request.from}
token={token}
/>
<span style={{ margin: 15 }}>{'➔'}</span>
<TokenDisplay
asset={request.asset}
chain={request.to}
token={token}
/>
</div>
</div>
);
};
<div
style={{
textAlign: 'left',
display: 'flex',
flexDirection: 'column',
}}
>
{(() => {
let group = '';
return activeSteps.map((step, i) => {
let prevGroup = group;
group = step.group;
let newGroup = prevGroup !== group;
return (
<>
{newGroup && <span>{group}</span>}
<span style={{ marginLeft: 15 }}>
{typeToIcon(
step.type,
activeSteps.length - 1 === i,
)}{' '}
{step.message}
</span>
</>
);
});
})()}
</div>
</div>
);
};
notification.open({
message: '',
duration: 0,
placement: 'bottomLeft',
description: <NotificationContent />,
className: 'custom-class',
style: {
width: 500,
},
});
}}
>
{hasCorrespondingNetworks
? !(A.amount && B.amount)
? LABELS.ENTER_AMOUNT
: LABELS.TRANSFER
: LABELS.SET_CORRECT_WALLET_NETWORK}
</Button>
</div>
notification.open({
message: '',
duration: 0,
placement: 'bottomLeft',
description: <NotificationContent />,
className: 'custom-class',
style: {
width: 500,
},
});
}}
>
{hasCorrespondingNetworks
? !(A.amount && B.amount)
? LABELS.ENTER_AMOUNT
: LABELS.TRANSFER
: LABELS.SET_CORRECT_WALLET_NETWORK}
</Button>
<RecentTransactionsTable />
</>
);

49
packages/bridge/src/components/Transfer/style.less
View File

@ -14,6 +14,10 @@
font-size: 19px;
top: 253px;
color: black;
& > span:after {
content: '⇆';
padding-left: 0;
}
}
.exchange-card {
@ -32,7 +36,7 @@
width: 240px;
height: 64px;
left: calc(50% - 240px/2);
top: 335px;
top: 555px;
border-radius: 12px;
border: none;
@ -52,9 +56,42 @@
color: #193650;
}
}
#recent-tx-container{
width: 100%;
max-width: calc(100% - 388px);
margin: auto;
div:not(.home-container) {
& > #recent-tx-container{
width: 100%;
max-width: calc(100% - 388px);
margin: auto;
}
}
@media screen and (max-width: 1200px){
.exchange-card {
height: 770px;
width: 100%;
margin: 97px auto 0 auto;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.transfer-button {
display: flex;
position: relative;
width: 240px;
height: 64px;
left: calc(50% - 240px/2);
top: 30px;
margin-bottom: 100px;
}
.swap-button {
top: 0;
}
div:not(.home-container) > #recent-tx-container {
max-width: calc(100% - 100px);
}
.swap-button {
& > span:after {
content: "⇅";
}
}
}

7
packages/bridge/src/index.css
View File

@ -31,10 +31,3 @@ code {
height: auto;
top: 0;
}
.wormhole-bg {
background-image: url('/home/background.svg');
background-size: 100% auto;
background-color: #06101a;
background-repeat: no-repeat;
}

57
packages/bridge/src/views/home/index.less
View File

@ -8,15 +8,6 @@ section.ant-layout {
margin: auto;
position: relative;
}
header.ant-layout-header.App-Bar {
position: absolute;
width: 100%;
background: transparent;
display: flex;
justify-content: center;
height: 80px;
}
.get-started {
background: url("/home/get-started.svg") center center no-repeat;
@ -64,9 +55,11 @@ header.ant-layout-header.App-Bar {
display: flex;
flex-direction: row;
justify-content: space-evenly;
max-width: 90%;
margin: auto;
.home-description-item {
padding: 0 100px 0 100px;
padding: 0 30px 0 30px;
.description-title {
font-size: 20px;
line-height: 160%;
@ -81,6 +74,8 @@ header.ant-layout-header.App-Bar {
}
#recent-tx-container {
max-width: 70%;
margin: auto;
padding-bottom: 70px;
.description-text {
color: @tungsten-60
@ -89,7 +84,6 @@ header.ant-layout-header.App-Bar {
margin: 16px 100px;
}
.ant-table {
margin: 0 100px;
thead {
tr > th.ant-table-cell {
background-color: @tungsten-100;
@ -114,12 +108,16 @@ header.ant-layout-header.App-Bar {
align-items: center;
justify-content: flex-end;
min-height: 802px;
.main-logo {
& > img {
max-width: 100%;
}
}
& > div {
font-size: 16px;
line-height: 160%;
width: auto;
margin: 3px 0 30px 0;
margin: 3px 20px 30px 20px;
}
& > div:first-child {
margin-bottom: 120px;
@ -139,3 +137,36 @@ footer.ant-layout-footer {
width: 100%;
background-color: @tungsten-100;
}
.wormhole-bg {
background-image: url('/home/background.svg');
background-size: 100% auto;
background-color: #06101a;
background-repeat: no-repeat;
}
@media screen and (max-width: 900px) {
.justify-bottom-container {
min-height: 640px;
}
.home-container {
#recent-tx-container {
max-width: 100%;
}
#how-it-works-container {
.home-description {
flex-direction: column;
}
}
}
}
@media screen and (max-width: 1200px) {
.home-container {
#recent-tx-container {
max-width: 90%;
}
}
}

3
packages/bridge/src/views/home/index.tsx
View File

@ -129,7 +129,7 @@ export const HomeView = () => {
<>
<div className="flexColumn home-container wormhole-bg">
<div className={'justify-bottom-container'}>
<div>
<div className={'main-logo'}>
<img src={'/home/main-logo.svg'} />
</div>
<div>
@ -196,6 +196,7 @@ export const HomeView = () => {
<Table
scroll={{
scrollToFirstRowOnChange: false,
x: 900,
}}
dataSource={externalAssets.filter(a => a.name)}
columns={columns}