Skip to content
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

Farabi/grwt-4891/landscape-layout #10

Merged
merged 5 commits into from
Feb 4, 2025
Merged

Farabi/grwt-4891/landscape-layout #10

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ebf47d
feat: added landscape layout
farabi-deriv Feb 4, 2025
22b5f9d
fix: change port back to 4113
farabi-deriv Feb 4, 2025
ea2e9f2
feat: added a side nav for landscape view
farabi-deriv Feb 4, 2025
0bcd72d
fix: test case
farabi-deriv Feb 4, 2025
2730659
fix: test case
farabi-deriv Feb 4, 2025
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
2 changes: 1 addition & 1 deletion rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default defineConfig({
},
},
server: {
port: 4113,
port: 4114,
host: 'localhost',
strictPort: true
},
Expand Down
8 changes: 6 additions & 2 deletions src/components/DurationOptions/DurationOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { BarChart2, Clock, Expand } from 'lucide-react';

export const DurationOptions = () => {
interface DurationOptionsProps {
className?: string;
}

export const DurationOptions: React.FC<DurationOptionsProps> = ({ className = '' }) => {
return (
<div className="flex items-center justify-between p-4 border-t border-b">
<div className={`flex items-center justify-between p-4 border-t border-b ${className}`}>
<div className="flex items-center gap-4">
<button className="text-sm font-medium text-primary">1t</button>
<button className="text-sm font-medium text-gray-500">1m</button>
Expand Down
28 changes: 16 additions & 12 deletions src/components/TradeButton/TradeButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,22 @@ export const TradeButton: React.FC<TradeButtonProps> = ({
)}
variant="default"
>
<div className={cn(
"flex items-center justify-between w-full px-3",
title_position === "right" && "flex-row-reverse"
)}>
<span className="text-lg font-bold">{title}</span>
</div>
<div className={cn(
"flex items-center justify-between w-full px-3",
title_position === "right" && "flex-row-reverse"
)}>
<span className="text-sm">{value}</span>
<span className="text-sm opacity-80">{label}</span>
<div className="flex flex-col portrait:gap-1 landscape:gap-0 w-full px-3">
<div className={cn(
"flex items-center justify-between w-full",
"portrait:flex-row",
title_position === "right" ? "portrait:flex-row-reverse" : ""
)}>
<span className="text-lg font-bold">{title}</span>
</div>
<div className={cn(
"flex items-center justify-between w-full",
title_position === "right" && "flex-row-reverse",
"portrait:flex-row landscape:flex-row-reverse"
)}>
<span className="text-sm">{value}</span>
<span className="text-sm opacity-80">{label}</span>
</div>
</div>
</Button>
);
Expand Down
6 changes: 4 additions & 2 deletions src/components/TradeFields/TradeParam.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface TradeParamProps {
label: string;
value: string;
className?: string;
onClick?: () => void;
}

const TradeParam: React.FC<TradeParamProps> = ({ label, value, onClick }) => {
const TradeParam: React.FC<TradeParamProps> = ({ label, value, className, onClick }) => {
return (
<Card
className={`flex-1 ${onClick ? 'cursor-pointer' : ''}`}
className={cn(`flex-1 ${onClick ? 'cursor-pointer' : ''}`, className)}
onClick={onClick}
>
<CardContent className="p-3">
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/MainLayout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface HeaderProps {

export const Header: React.FC<HeaderProps> = ({ balance }) => {
return (
<header className="flex items-center justify-between p-4">
<header className="flex items-center justify-between p-4 landscape:hidden">
<div className="flex flex-col">
<span className="text-sm text-gray-700">Real</span>
<span className="text-2xl font-bold text-teal-500">{balance}</span>
Expand Down
87 changes: 53 additions & 34 deletions src/screens/TradePage/TradePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,39 +35,60 @@ export const TradePage: React.FC = () => {
};

return (
<div className="flex flex-col flex-1">
<div className="flex flex-col flex-1 landscape:flex-row landscape:h-[100dvh] landscape:relative">
<div
className="flex items-center w-full gap-2 p-4"
className="hidden landscape:block landscape:absolute landscape:top-0 landscape:left-0 landscape:right-0 landscape:bg-white landscape:z-10"
id="instrument-tab-bar"
>
<Suspense fallback={<div>Loading...</div>}>
<AddMarketButton />
</Suspense>
<div className="flex flex-1 gap-2">
<MarketInfo title="Vol. 100 (1s) Index" subtitle="Rise/Fall" />
<div className="flex items-center w-full gap-2 p-4 justify-between">
<div className="flex items-center gap-2">
<Suspense fallback={<div>Loading...</div>}>
<AddMarketButton />
</Suspense>
<MarketInfo title="Vol. 100 (1s) Index" subtitle="Rise/Fall" />
</div>
<div className="hidden landscape:flex items-center gap-4">
<div className="flex flex-col">
<span className="text-sm text-gray-700">Real</span>
<span className="text-2xl font-bold text-teal-500">10,000 USD</span>
</div>
<button className="px-4 py-2 font-bold border border-gray-700 rounded-3xl">
Deposit
</button>
</div>
</div>

</div>

<Suspense fallback={<div>Loading...</div>}>
<Chart className="flex-1" />
</Suspense>
<div className="flex flex-col flex-1 landscape:w-[60%] landscape:min-w-0">
<div className="flex items-center w-full gap-2 p-4 justify-between landscape:hidden">
<div className="flex items-center gap-2">
<Suspense fallback={<div>Loading...</div>}>
<AddMarketButton />
</Suspense>
<MarketInfo title="Vol. 100 (1s) Index" subtitle="Rise/Fall" />
</div>
</div>

<Suspense fallback={<div>Loading...</div>}>
<DurationOptions />
</Suspense>
<div className="flex flex-col flex-1 landscape:mt-[72px]">
<Suspense fallback={<div>Loading...</div>}>
<Chart className="flex-1 min-h-0" />
</Suspense>
</div>

<div id="trade-section">
<div className="flex flex-col gap-4 p-4" id="trade-fields">
<div className="flex gap-4" id="trade-params">
<TradeParam label="Duration" value={duration} />
<TradeParam
label="Stake"
value={stake}
onClick={handleStakeClick}
/>
<Suspense fallback={<div>Loading...</div>}>
<DurationOptions />
</Suspense>
</div>

<div id="trade-section" className="landscape:w-[40%] landscape:min-w-[320px] landscape:flex landscape:flex-col landscape:justify-center landscape:mt-[84px]">
<div className="flex flex-col gap-4 p-4 landscape:pt-4 landscape:pb-2 landscape:px-4" id="trade-fields">
<div className="flex gap-4 landscape:flex-col landscape:gap-2" id="trade-params">
<TradeParam label="Duration" value={duration} className="landscape:w-full" />
<TradeParam label="Stake" value={stake} className="landscape:w-full" onClick={handleStakeClick} />
</div>

<div id="trade-toggles">
<div id="trade-toggles" className="landscape:mt-2">
<ToggleButton
label="Allow equals"
value={allowEquals}
Expand All @@ -76,21 +97,19 @@ export const TradePage: React.FC = () => {
</div>
</div>

<div className="flex gap-2 p-4" id="trade-buttons">
<div className="flex landscape:flex-col gap-2 p-4 landscape:py-2" id="trade-buttons">
<Suspense fallback={<div>Loading...</div>}>
<div className="flex-1">
<TradeButton
className="bg-emerald-500 hover:bg-emerald-600 rounded-full w-full"
title="Rise"
label="Payout"
value="19.55 USD"
title_position="right"
/>
</div>
<TradeButton
className="bg-emerald-500 hover:bg-emerald-600 rounded-full landscape:h-[52px] landscape:py-4 landscape:[&>div]:px-2 landscape:[&_span]:text-sm"
title="Rise"
label="Payout"
value="19.55 USD"
title_position="right"
/>
</Suspense>
<Suspense fallback={<div>Loading...</div>}>
<TradeButton
className="bg-rose-500 hover:bg-rose-600 rounded-full"
className="bg-rose-500 hover:bg-rose-600 rounded-full landscape:h-[52px] landscape:py-4 landscape:[&>div]:px-2 landscape:[&_span]:text-sm"
title="Fall"
label="Payout"
value="19.55 USD"
Expand Down
Loading