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

feat: max popup screens fit #2931

Merged
merged 3 commits into from
Dec 19, 2023
Merged

feat: max popup screens fit #2931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
baf9f77
feat: max popup screens fit. eveven if the content optionally increases
pavanjoshi914 Dec 13, 2023
fadeb99
fix: prompts alignments
pavanjoshi914 Dec 15, 2023
f6a43ba
fix: limit maxheight for modals
reneaaron Dec 19, 2023
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 src/app/components/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function Container({
<div
className={`container mx-auto px-4 pb-4 ${getMaxWidthClass(maxWidth)} ${
justifyBetween
? "min-h-full flex flex-col justify-between no-scrollbar"
? "h-full flex flex-col justify-between no-scrollbar"
: ""
}`}
>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/Modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function Modal({
position == "top" && "items-start pt-20"
)}
className="rounded-lg shadow-xl bg-white dark:bg-surface-01dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5"
style={{ content: { maxHeight: "90vh" } }}
style={{ content: { maxHeight: "80vh" } }}
>
{title && (
<h2 className="text-2xl font-bold dark:text-white mb-6">{title}</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/app/router/Popup/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const Layout = () => {
<div className="flex flex-col h-full">
<Navbar />

<main className="flex flex-col grow min-h-0">
<main className="flex flex-col grow">
<Outlet />
<Toaster />
</main>
Expand Down
2 changes: 1 addition & 1 deletion src/app/router/Prompt/Prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ const Layout = () => {
</div>
<AccountMenu showOptions={false} />
</div>
<main className="flex flex-col grow min-h-0">
<main className="flex flex-col grow">
<Outlet />
</main>
</>
Expand Down
58 changes: 26 additions & 32 deletions src/app/screens/LNURLPay/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,37 +329,31 @@ function LNURLPay() {
}

return (
<div className="grow">
<Container justifyBetween maxWidth="sm">
<div>
<ResultCard
isSuccess
message={tCommon("success_message", {
amount: getFormattedSats(valueSat),
fiatAmount: showFiat ? ` (${fiatValue})` : ``,
destination: navState.origin?.name || getRecipient(),
})}
/>
{isMessage && (
<dl className="shadow bg-white dark:bg-surface-02dp mt-4 pt-4 px-4 rounded-lg mb-6 overflow-hidden">
{descriptionList.map(([dt, dd]) => (
<>
<Dt>{dt}</Dt>
<Dd>{dd}</Dd>
</>
))}
</dl>
)}
</div>
<div>
<Button
onClick={close}
label={tCommon("actions.close")}
fullWidth
/>
</div>
</Container>
</div>
<Container justifyBetween maxWidth="sm">
<div>
<ResultCard
isSuccess
message={tCommon("success_message", {
amount: getFormattedSats(valueSat),
fiatAmount: showFiat ? ` (${fiatValue})` : ``,
destination: navState.origin?.name || getRecipient(),
})}
/>
{isMessage && (
<dl className="shadow bg-white dark:bg-surface-02dp mt-4 pt-4 px-4 rounded-lg mb-6 overflow-hidden">
{descriptionList.map(([dt, dd]) => (
<>
<Dt>{dt}</Dt>
<Dd>{dd}</Dd>
</>
))}
</dl>
)}
</div>
<div>
<Button onClick={close} label={tCommon("actions.close")} fullWidth />
</div>
</Container>
);
}

Expand Down Expand Up @@ -418,7 +412,7 @@ function LNURLPay() {
description={getRecipient()}
image={navState.origin?.icon || getImage()}
/>
<form onSubmit={handleSubmit} className="grow flex">
<form onSubmit={handleSubmit} className="flex grow">
<div className="grow flex flex-col justify-between">
<fieldset disabled={loadingConfirm}>
<dl className="mt-4 overflow-hidden">
Expand Down
4 changes: 2 additions & 2 deletions static/views/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html translate="no" lang="en" class="antialiased">
<head>
<meta charset="UTF-8" />
Expand All @@ -12,7 +12,7 @@
</head>

<body
class="w-96 max-w-full overflow-x-hidden h-[600px] min-h-screen bg-gray-50 dark:bg-surface-00dp slashed-zero"
class="w-96 max-w-full overflow-x-hidden h-[600px] no-scrollbar min-h-screen bg-gray-50 dark:bg-surface-00dp slashed-zero"
>
<div id="popup-root" class="h-full"></div>
</body>
Expand Down
6 changes: 4 additions & 2 deletions static/views/prompt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html translate="no" lang="en" class="h-full antialiased">
<head>
<meta charset="UTF-8" />
Expand All @@ -11,7 +11,9 @@
<title>Alby</title>
</head>

<body class="h-full bg-gray-50 dark:bg-surface-00dp slashed-zero">
<body
class="h-full bg-gray-50 dark:bg-surface-00dp slashed-zero no-scrollbar"
>
<div class="h-full flex flex-col" id="prompt-root"></div>
</body>
</html>
Loading