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.

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

Jack-mobile-responsiveness #220

Merged
merged 8 commits into from
Jul 12, 2023
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function GridTableHeader({
return (
<div
className={classNames(
"grid auto-cols-fr grid-flow-col items-center rounded-t-md bg-base-100 font-light [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:p-4",
"grid auto-cols-fr grid-flow-col items-center rounded-t-md bg-base-100 text-sm font-light md:text-lg [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:p-4",
className,
)}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,13 @@ export function CloseLongModalButton({
{({ showModal }) => (
<span className="daisy-dropdown">
<label tabIndex={0} className="btn cursor-pointer ">
<EllipsisHorizontalIcon width={25} height={25} />
<EllipsisHorizontalIcon className="w-4 md:w-6 " />
</label>
<ul
tabIndex={0}
className="menu daisy-dropdown-content absolute right-0 top-4 rounded-md bg-base-300 p-3 shadow"
>
<li className="my-1 flex w-32 cursor-pointer justify-center">
<li className="my-1 flex w-24 cursor-pointer justify-center text-sm md:w-32 md:text-h6">
<button onClick={showModal}>Close Position</button>
</li>
</ul>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function MarketStats({
const { longPrice } = useCurrentLongPrice(hyperdrive);

return (
<div className="flex w-full flex-wrap items-center justify-start gap-16">
<div className="flex w-full flex-wrap items-center justify-center gap-16 md:justify-start">
<Stat
label="Token"
value={
Expand Down
2 changes: 1 addition & 1 deletion apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Disclosure } from "src/ui/base/components/Disclosure/Disclosure";

export function FAQ(): ReactElement {
return (
<div className="flex flex-col gap-6 pb-12">
<div className="flex flex-col gap-6 px-4 pb-12">
Copy link
Member

Choose a reason for hiding this comment

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

The px-4 here will shrink the width on the container at full width too. Rather than horiz spacing on the children, we should probably put padding on on the page container.

<div className="flex w-full items-center justify-between border-base-100">
<span className="pb-2 text-h5 font-thin text-neutral-content">FAQ</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function ClosedLongsTable({
return (
<SortableGridTable
headingRowClassName="grid-cols-5 text-neutral-content"
bodyRowClassName="grid-cols-5 text-base-content items-center text-h6 even:bg-secondary/5 h-16"
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 mx-2"
Copy link
Member

Choose a reason for hiding this comment

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

Same comment here about horiz spacing. We can remove the mx-2 class.

cols={["Position", "Balance", "Value", "Matures on", "Closed on"]}
rows={closedLongRows}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export function OpenLongsTable({

return (
<SortableGridTable
headingRowClassName="grid-cols-4 text-neutral-content"
bodyRowClassName="grid-cols-4 text-base-content items-center text-h6 even:bg-secondary/5 h-16"
headingRowClassName="grid-cols-4 text-start text-neutral-content mx-2"
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 mx-2"
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 mx-2"
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"

// Blank col added for actions
cols={["Position", "Balance", "Value", "Matures on", ""]}
rows={openLongRows}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export function OpenShortsTable({

return (
<SortableGridTable
headingRowClassName="grid-cols-4 text-neutral-content"
bodyRowClassName="grid-cols-4 text-base-content items-center text-h6 even:bg-accent/5 h-16"
headingRowClassName="grid-cols-4 text-neutral-content mx-2"
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 mx-2"
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 mx-2"
bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"

// Blank col added for actions
cols={["Position", "Balance", "Value", "Matures on", ""]}
rows={openShortRows}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,34 @@ export function PositionTabs({
<div className="daisy-tabs">
<button
onClick={() => setActivePositionTab("Longs")}
className={classNames("daisy-tab-lifted daisy-tab daisy-tab-lg", {
"daisy-tab-active glass": activePositionTab === "Longs",
})}
className={classNames(
"daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
{
"daisy-tab-active glass": activePositionTab === "Longs",
},
)}
>
Longs
</button>
<button
onClick={() => setActivePositionTab("Shorts")}
className={classNames("daisy-tab-lifted daisy-tab daisy-tab-lg", {
"daisy-tab-active glass": activePositionTab === "Shorts",
})}
className={classNames(
"daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
{
"daisy-tab-active glass": activePositionTab === "Shorts",
},
)}
>
Shorts
</button>
<button
onClick={() => setActivePositionTab("LP")}
className={classNames("daisy-tab-lifted daisy-tab daisy-tab-lg", {
"daisy-tab-active glass": activePositionTab === "LP",
})}
className={classNames(
"daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
{
"daisy-tab-active glass": activePositionTab === "LP",
},
)}
>
LP
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,16 @@ export function PositionsSection({

return (
<div>
<div className="mb-4 flex w-full items-center justify-between border-b border-neutral-content/30">
<h2 className="text-h5 font-thin leading-h5 text-neutral-content">
Your positions
</h2>
<div className="mb-4 flex w-full items-end justify-between border-b border-neutral-content/30">
<PositionTabs
setActivePositionTab={handleChangeTab}
activePositionTab={activePositionTab}
/>

<div className="daisy-tabs-boxed">
<div className="daisy-tabs-boxed mb-1">
<button
onClick={() => handleChangeOpenOrClosedTab("Open")}
className={classNames("daisy-tab", {
className={classNames("daisy-tab text-sm", {
"daisy-tab-active !bg-base-300 !text-white":
activeOpenOrClosedTab === "Open",
})}
Expand All @@ -73,7 +70,7 @@ export function PositionsSection({
</button>
<button
onClick={() => handleChangeOpenOrClosedTab("Closed")}
className={classNames("daisy-tab", {
className={classNames("daisy-tab text-sm", {
"daisy-tab-active !bg-base-300 !text-white":
activeOpenOrClosedTab === "Closed",
})}
Expand Down
6 changes: 4 additions & 2 deletions apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ export function TradeBody({ hyperdrive }: PositionsTableProps): ReactElement {
<div className="flex max-w-5xl flex-col gap-16 ">
{/* Name w/ market select */}
<div className="flex w-full flex-col gap-6">
<div className="flex flex-wrap items-start justify-between">
<div className="flex flex-wrap items-start justify-center md:justify-between">
<div className="flex shrink-0 flex-col">
<div className="flex flex-1 justify-between">
<YieldSourceLabel yieldSource={yieldSource} />
<MarketSelect markets={[hyperdrive]} />
</div>
<p className="text-h3 font-semibold">{hyperdrive.name}</p>
<p className="my-2 text-h3 font-semibold md:my-0">
{hyperdrive.name}
</p>
</div>
<YourBalanceWell token={hyperdrive.baseToken} />
</div>
Expand Down