LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

adjust grid, use market name

Browse Source
This commit is contained in:
Matthew Russell 2022-03-01 14:46:42 -08:00
parent 15c5a15a28
commit 623c75aebb
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/trading/pages/markets/[marketId].page.tsx
View File

@ -40,13 +40,13 @@ const MarketPage = () => {
{error ? ( {error ? (
<div>Something went wrong: {error.message}</div> <div>Something went wrong: {error.message}</div>
) : ( ) : (
<div className="h-full max-h-full grid gap-[1px] bg-black grid-cols-[1fr_400px_400px] grid-rows-[min-content_1fr_200px]"> <div className="h-full max-h-full grid gap-[1px] bg-[#ddd] grid-cols-[1fr_325px_325px] grid-rows-[min-content_1fr_200px]">
<header className="bg-white col-span-4 p-8"> <header className="col-start-1 col-end-2 row-start-1 row-end-1 bg-white p-8">
<h1>Market: {query.marketId}</h1> <h1>Market: {data.market.name}</h1>
</header> </header>
<GridChild>TODO: Chart</GridChild> <GridChild className="col-start-1 col-end-2">TODO: Chart</GridChild>
<GridChild>TODO: Ticket</GridChild> <GridChild className="row-start-1 row-end-3">TODO: Ticket</GridChild>
<GridChild> <GridChild className="row-start-1 row-end-3">
<GridTabs group="trade"> <GridTabs group="trade">
<GridTab name="trades"> <GridTab name="trades">
<pre>{JSON.stringify(data, null, 2)}</pre> <pre>{JSON.stringify(data, null, 2)}</pre>
@ -54,7 +54,7 @@ const MarketPage = () => {
<GridTab name="orderbook">Orderbook TODO:</GridTab> <GridTab name="orderbook">Orderbook TODO:</GridTab>
</GridTabs> </GridTabs>
</GridChild> </GridChild>
<GridChild className="col-span-4"> <GridChild className="col-span-3">
<GridTabs group="portfolio"> <GridTabs group="portfolio">
<GridTab name="orders">TODO: Orders</GridTab> <GridTab name="orders">TODO: Orders</GridTab>
<GridTab name="positions">TODO: Positions</GridTab> <GridTab name="positions">TODO: Positions</GridTab>
@ -100,12 +100,13 @@ const GridTabs = ({ children, group }: GridTabsProps) => {
return ( return (
<div className="h-full grid grid-rows-[min-content_1fr]"> <div className="h-full grid grid-rows-[min-content_1fr]">
{/* the tabs */} {/* the tabs */}
<div className="flex gap-[2px] bg-[#ededed]" role="tablist"> <div className="flex gap-[2px] bg-[#ddd]" role="tablist">
{Children.map(children, (child) => { {Children.map(children, (child) => {
if (!isValidElement(child)) return null; if (!isValidElement(child)) return null;
const isActive = query[group] === child.props.name; const isActive = query[group] === child.props.name;
const buttonClass = classNames('p-8', { const buttonClass = classNames('p-8', {
'text-vega-pink': isActive, 'text-vega-pink': isActive,
'bg-white': isActive,
}); });
return ( return (
<button <button