From b7823407c04958b143c2c37d7b7e465bdd7d4895 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 12 Jul 2023 15:42:27 -0300 Subject: [PATCH] mobile friendly --- .../src/components/LangSelector.tsx | 17 +- packages/demobank-ui/src/pages/AdminPage.tsx | 10 +- packages/demobank-ui/src/pages/BankFrame.tsx | 89 ++++----- .../demobank-ui/src/pages/BusinessAccount.tsx | 175 ++++-------------- .../demobank-ui/src/pages/PaymentOptions.tsx | 4 +- .../src/pages/PaytoWireTransferForm.tsx | 129 ++++++------- .../demobank-ui/src/pages/QrCodeSection.tsx | 19 +- .../src/pages/WalletWithdrawForm.tsx | 98 +++++++--- packages/demobank-ui/src/scss/bank.scss | 5 + packages/demobank-ui/src/scss/demo.scss | 25 ++- packages/demobank-ui/src/scss/pure.scss | 44 ++--- 11 files changed, 283 insertions(+), 332 deletions(-) diff --git a/packages/demobank-ui/src/components/LangSelector.tsx b/packages/demobank-ui/src/components/LangSelector.tsx index 9680344cb..ca4411682 100644 --- a/packages/demobank-ui/src/components/LangSelector.tsx +++ b/packages/demobank-ui/src/components/LangSelector.tsx @@ -63,20 +63,29 @@ export function LangSelectorLikePy(): VNode { }, []); return ( - -
+ +
{Object.keys(messages) .filter((l) => l !== lang) diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx index 6eb9d53ab..ce0feebce 100644 --- a/packages/demobank-ui/src/pages/AdminPage.tsx +++ b/packages/demobank-ui/src/pages/AdminPage.tsx @@ -683,8 +683,14 @@ export function ShowAccountDetails({ onChange={(a) => setSubmitAccount(a)} /> -

-

+
{onClear ? ( ; return ( -
- { - e.preventDefault(); - onClick(); - }} - >{i18n.str`Business Profile`} -
+ { + e.preventDefault(); + onClick(); + }} + >{i18n.str`Business Profile`} ); } @@ -88,7 +86,7 @@ export function BankFrame({ style="display: flex; flex-direction: row; justify-content: space-between;" > -
+

{bankUiSettings.bankName} @@ -112,35 +110,21 @@ export function BankFrame({

, )}

- - {i18n.str`Taler -
-
-
- - {backend.state.status === "loggedIn" ? ( -
- {goToBusinessAccount && !backend.state.isUserAdministrator ? ( - - ) : undefined} -
+ {backend.state.status === "loggedIn" ? ( + + {goToBusinessAccount && !backend.state.isUserAdministrator ? ( + + ) : undefined} + + + {i18n.str`Logout`} -
-
- ) : null} + + ) : undefined} + +
+
+ {children}
); @@ -192,7 +177,7 @@ export function ErrorBannerFloat({
void; @@ -345,34 +346,23 @@ function CreateCashout({ ? i18n.str`Amount to send` : i18n.str`Amount to receive`} -
- -   - { - form.amount = e.currentTarget.value; +
+ { + form.amount = v; updateForm(structuredClone(form)); }} + error={errors?.amount} /> -   -
-
@@ -391,118 +377,43 @@ function CreateCashout({
-
- -   - -
+
-
- -   - -
+
-
- -   - -
+
{" "} {Amounts.isZero(sellFee) ? undefined : (
-
- -   - -
+
-
- -   - -
+
)} @@ -510,26 +421,10 @@ function CreateCashout({ -
- -   - -
+
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index ecdee415b..3552da7b4 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -45,7 +45,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode { setTab("charge-wallet"); }} > - {i18n.str`Obtain digital cash`} + {i18n.str`Withdraw `}
{tab === "charge-wallet" && ( diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 20c5d6cf7..d8c1644b1 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -100,75 +100,78 @@ export function PaytoWireTransferForm({ autoCapitalize="none" autoCorrect="off" > -

-   - { - setIban(e.currentTarget.value); - }} - /> -
- -
-   +   + { + setIban(e.currentTarget.value); + }} + /> + +   + { + setSubject(e.currentTarget.value); + }} + /> + +   +

+ { - setSubject(e.currentTarget.value); + setAmount(e.currentTarget.value); }} /> -
- -
-   -
- -   - { - setAmount(e.currentTarget.value); - }} - /> -
- -

- +
+

-

{i18n.str`Transfer to Taler Wallet`}

+

{i18n.str`Charge your GNU Taler wallet`}

diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 3a53bbe48..4c4a38e57 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -25,14 +25,16 @@ import { RequestError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { VNode, h } from "preact"; +import { Ref, VNode, h } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { notifyError } from "../hooks/notification.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js"; +import { forwardRef } from "preact/compat"; const logger = new Logger("WalletWithdrawForm"); +const RefAmount = forwardRef(Amount); export function WalletWithdrawForm({ focus, @@ -68,6 +70,7 @@ export function WalletWithdrawForm({ ? i18n.str`balance is not enough` : undefined, }); + return (
  -
- -   - { - setAmountStr(e.currentTarget.value); - }} - /> - -
+ { + setAmountStr(v); + }} + error={errors?.amount} + ref={ref} + />

@@ -160,3 +146,61 @@ export function WalletWithdrawForm({ ); } + +export function Amount( + { + currency, + value, + error, + onChange, + }: { + error?: string; + currency: string; + value: string | undefined; + onChange?: (s: string) => void; + }, + ref: Ref, +): VNode { + return ( +
+
+ + { + if (onChange) { + onChange(e.currentTarget.value); + } + }} + /> +
+ +
+ ); +} diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss index 16370227b..0089b9734 100644 --- a/packages/demobank-ui/src/scss/bank.scss +++ b/packages/demobank-ui/src/scss/bank.scss @@ -310,3 +310,8 @@ h1.nav { background: rgb(66, 184, 221); /* this is a light blue */ } + +[name=wire-transfer-form] > input { + margin-bottom: 1em; + +} \ No newline at end of file diff --git a/packages/demobank-ui/src/scss/demo.scss b/packages/demobank-ui/src/scss/demo.scss index cd676f8d9..c2d9fa903 100644 --- a/packages/demobank-ui/src/scss/demo.scss +++ b/packages/demobank-ui/src/scss/demo.scss @@ -39,8 +39,8 @@ Colors: } .content { - margin-left: 2em; - margin-right: 2em; + margin-left: 1em; + margin-right: 1em; overflow-x: auto; } @@ -60,8 +60,8 @@ body { margin-bottom: 50px; width: 100%; color: white; - position: -webkit-sticky; - position: sticky; + // position: -webkit-sticky; + // position: sticky; top: 0px; width: 100vw; backdrop-filter: blur(10px); @@ -70,7 +70,7 @@ body { } nav { - left: 1vw; + // left: 1vw; position: relative; background: #0042b2; z-index: 100; @@ -83,7 +83,7 @@ nav span, border: none; color: white; text-align: center; - text-decoration: none; + // text-decoration: none; display: inline-block; font-size: 16px; background: #0042b2; @@ -94,8 +94,9 @@ nav a, nav button, nav span, .navbtn { - padding: 15px 32px; + padding: 8px; } + nav a:hover, nav span:hover, @@ -138,7 +139,7 @@ nav .hide div.nav { // } .langbtn { - width: 100%; + width: 100px; text-align: left; } @@ -156,3 +157,11 @@ nav .hide div.nav { width: auto; height: auto; } + +.demolist > a { + margin: 8px; +} + +.buttons-account input.pure-button { + margin: 8px; +} \ No newline at end of file diff --git a/packages/demobank-ui/src/scss/pure.scss b/packages/demobank-ui/src/scss/pure.scss index 652d20edf..25a261a5f 100644 --- a/packages/demobank-ui/src/scss/pure.scss +++ b/packages/demobank-ui/src/scss/pure.scss @@ -1091,29 +1091,29 @@ since IE8 won't execute CSS that contains a CSS3 selector. } @media only screen and (max-width: 480px) { - .pure-form button[type="submit"] { - margin: 0.7em 0 0; - } + // .pure-form button[type="submit"] { + // margin: 0.7em 0 0; + // } - .pure-form input:not([type]), - .pure-form input[type="text"], - .pure-form input[type="password"], - .pure-form input[type="email"], - .pure-form input[type="url"], - .pure-form input[type="date"], - .pure-form input[type="month"], - .pure-form input[type="time"], - .pure-form input[type="datetime"], - .pure-form input[type="datetime-local"], - .pure-form input[type="week"], - .pure-form input[type="number"], - .pure-form input[type="search"], - .pure-form input[type="tel"], - .pure-form input[type="color"], - .pure-form label { - margin-bottom: 0.3em; - display: block; - } + // .pure-form input:not([type]), + // .pure-form input[type="text"], + // .pure-form input[type="password"], + // .pure-form input[type="email"], + // .pure-form input[type="url"], + // .pure-form input[type="date"], + // .pure-form input[type="month"], + // .pure-form input[type="time"], + // .pure-form input[type="datetime"], + // .pure-form input[type="datetime-local"], + // .pure-form input[type="week"], + // .pure-form input[type="number"], + // .pure-form input[type="search"], + // .pure-form input[type="tel"], + // .pure-form input[type="color"], + // .pure-form label { + // margin-bottom: 0.3em; + // display: block; + // } .pure-group input:not([type]), .pure-group input[type="text"],