[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: mobile friendly
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: mobile friendly |
|
Date: |
Wed, 12 Jul 2023 20:43:01 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new b7823407c mobile friendly
b7823407c is described below
commit b7823407c04958b143c2c37d7b7e465bdd7d4895
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Jul 12 15:42:27 2023 -0300
mobile friendly
---
.../demobank-ui/src/components/LangSelector.tsx | 17 +-
packages/demobank-ui/src/pages/AdminPage.tsx | 10 +-
packages/demobank-ui/src/pages/BankFrame.tsx | 89 +++++------
packages/demobank-ui/src/pages/BusinessAccount.tsx | 175 +++++----------------
packages/demobank-ui/src/pages/PaymentOptions.tsx | 4 +-
.../src/pages/PaytoWireTransferForm.tsx | 123 ++++++++-------
packages/demobank-ui/src/pages/QrCodeSection.tsx | 19 +--
.../demobank-ui/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 | 46 +++---
11 files changed, 281 insertions(+), 330 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 (
<Fragment>
- <button
+ <a
+ href="#"
+ class="pure-button"
name="language"
onClick={(ev) => {
+ ev.preventDefault();
setHidden((h) => !h);
ev.stopPropagation();
}}
>
{getLangName(lang)}
- </button>
- <div id="lang" class={hidden ? "hide" : ""}>
+ </a>
+ <div
+ id="lang"
+ class={hidden ? "hide" : ""}
+ style={{
+ display: "inline-block",
+ }}
+ >
<div style="position: relative; overflow: visible;">
<div
class="nav"
- style="position: absolute; max-height: 60vh; overflow-y: scroll"
+ style="position: absolute; max-height: 60vh; overflow-y: auto;
margin-left: -120px; margin-top: 20px"
>
{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)}
/>
- <p>
- <div style={{ display: "flex", justifyContent: "space-between" }}>
+ <p class="buttons-account">
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-between",
+ flexFlow: "wrap-reverse",
+ }}
+ >
<div>
{onClear ? (
<input
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx
b/packages/demobank-ui/src/pages/BankFrame.tsx
index c7168ac6d..dc61f1302 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -49,16 +49,14 @@ function MaybeBusinessButton({
const result = useBusinessAccountDetails(account);
if (!result.ok) return <Fragment />;
return (
- <div class="some-space">
- <a
- href="#"
- class="pure-button pure-button-primary"
- onClick={(e) => {
- e.preventDefault();
- onClick();
- }}
- >{i18n.str`Business Profile`}</a>
- </div>
+ <a
+ href="#"
+ class="pure-button pure-button-primary"
+ onClick={(e) => {
+ e.preventDefault();
+ onClick();
+ }}
+ >{i18n.str`Business Profile`}</a>
);
}
@@ -88,7 +86,7 @@ export function BankFrame({
style="display: flex; flex-direction: row; justify-content:
space-between;"
>
<a href="#main" class="skip">{i18n.str`Skip to main content`}</a>
- <div style="max-width: 50em; margin-left: 2em;">
+ <div style="max-width: 50em; margin-left: 2em; margin-right: 2em;">
<h1>
<span class="it">
<a href="/">{bankUiSettings.bankName}</a>
@@ -112,35 +110,21 @@ export function BankFrame({
</p>,
)}
</div>
- <a href="https://taler.net/";>
- <img
- src={talerLogo}
- alt={i18n.str`Taler logo`}
- height="100"
- width="224"
- style="margin: 2em 2em"
- />
- </a>
</header>
<div style="display:flex; flex-direction: column;" class="navcontainer">
<nav class="demolist">
{maybeDemoContent(<Fragment>{demo_sites}</Fragment>)}
- <div class="right">
- <LangSelector />
- </div>
- </nav>
- </div>
- <section id="main" class="content">
- <StatusBanner />
- {backend.state.status === "loggedIn" ? (
- <div class="top-right">
- {goToBusinessAccount && !backend.state.isUserAdministrator ? (
- <MaybeBusinessButton
- account={backend.state.username}
- onClick={goToBusinessAccount}
- />
- ) : undefined}
- <div class="some-space">
+ {backend.state.status === "loggedIn" ? (
+ <Fragment>
+ {goToBusinessAccount && !backend.state.isUserAdministrator ? (
+ <MaybeBusinessButton
+ account={backend.state.username}
+ onClick={goToBusinessAccount}
+ />
+ ) : undefined}
+
+ <LangSelector />
+
<a
href="#"
class="pure-button logout-button"
@@ -149,26 +133,27 @@ export function BankFrame({
updateSettings("currentWithdrawalOperationId", undefined);
}}
>{i18n.str`Logout`}</a>
- </div>
- </div>
- ) : null}
+ </Fragment>
+ ) : undefined}
+ </nav>
+ </div>
+ <section id="main" class="content">
+ <StatusBanner />
{children}
</section>
<section id="footer" class="footer">
- <div class="footer">
- <hr />
- <div>
- <p>
- You can learn more about GNU Taler on our{" "}
- <a href="https://taler.net";>main website</a>.
- </p>
- </div>
- <div style="flex-grow:1" />
+ <hr />
+ <div>
<p>
- Copyright © 2014—2022 Taler Systems SA. {versionText}{"
"}
- <TestingTag />
+ You can learn more about GNU Taler on our{" "}
+ <a href="https://taler.net";>main website</a>.
</p>
</div>
+ <div style="flex-grow:1" />
+ <p>
+ Copyright © 2014—2022 Taler Systems SA. {versionText}{" "}
+ <TestingTag />
+ </p>
</section>
</Fragment>
);
@@ -192,7 +177,7 @@ export function ErrorBannerFloat({
<div
style={{
position: "fixed",
- top: 0,
+ top: 10,
zIndex: 200,
width: "90%",
}}
@@ -262,7 +247,7 @@ function StatusBanner(): VNode | null {
<div
style={{
position: "fixed",
- top: 0,
+ top: 10,
zIndex: 200,
width: "90%",
}}
diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx
b/packages/demobank-ui/src/pages/BusinessAccount.tsx
index 7f69cd9f0..d9aa8fa36 100644
--- a/packages/demobank-ui/src/pages/BusinessAccount.tsx
+++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx
@@ -47,6 +47,7 @@ import { LoginForm } from "./LoginForm.js";
import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
import { handleNotOkResult } from "./HomePage.js";
import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
+import { Amount } from "./WalletWithdrawForm.js";
interface Props {
onClose: () => void;
@@ -345,34 +346,23 @@ function CreateCashout({
? i18n.str`Amount to send`
: i18n.str`Amount to receive`}
</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={amount?.currency.length ?? 0}
- maxLength={amount?.currency.length ?? 0}
- tabIndex={-1}
- value={amount?.currency ?? ""}
- />
-
- <input
- type="number"
- // ref={ref}
- id="withdraw-amount"
- name="withdraw-amount"
- value={form.amount ?? ""}
- onChange={(e): void => {
- form.amount = e.currentTarget.value;
+ <div style={{ display: "flex" }}>
+ <Amount
+ currency={amount.currency}
+ value={form.amount}
+ onChange={(v) => {
+ form.amount = v;
updateForm(structuredClone(form));
}}
+ error={errors?.amount}
/>
-
- <label class="toggle">
+ <label class="toggle" style={{ marginLeft: 4, marginTop: 0 }}>
<input
class="toggle-checkbox"
type="checkbox"
+ name="asd"
onChange={(e): void => {
+ console.log("asdasd", form.isDebit);
form.isDebit = !form.isDebit;
updateForm(structuredClone(form));
}}
@@ -380,10 +370,6 @@ function CreateCashout({
<div class="toggle-switch"></div>
</label>
</div>
- <ShowInputErrorLabel
- message={errors?.amount}
- isDirty={form.amount !== undefined}
- />
</fieldset>
<fieldset>
<label>{i18n.str`Conversion rate`}</label>
@@ -391,118 +377,43 @@ function CreateCashout({
</fieldset>
<fieldset>
<label>{i18n.str`Balance now`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={balance.currency.length}
- maxLength={balance.currency.length}
- tabIndex={-1}
- value={balance.currency}
- />
-
- <input
- type="number"
- id="withdraw-amount"
- disabled
- name="withdraw-amount"
- value={Amounts.stringifyValue(balance)}
- />
- </div>
+ <Amount
+ currency={balance.currency}
+ value={Amounts.stringifyValue(balance)}
+ />
</fieldset>
<fieldset>
<label
style={{ fontWeight: "bold", color: "red" }}
>{i18n.str`Total cost`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={balance.currency.length}
- maxLength={balance.currency.length}
- tabIndex={-1}
- value={balance.currency}
- />
-
- <input
- type="number"
- // ref={ref}
- id="withdraw-amount"
- disabled
- name="withdraw-amount"
- value={Amounts.stringifyValue(calc.debit)}
- />
- </div>
+ <Amount
+ currency={balance.currency}
+ value={Amounts.stringifyValue(calc.debit)}
+ />
</fieldset>
<fieldset>
<label>{i18n.str`Balance after`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={balance.currency.length}
- maxLength={balance.currency.length}
- tabIndex={-1}
- value={balance.currency}
- />
-
- <input
- type="number"
- // ref={ref}
- id="withdraw-amount"
- disabled
- name="withdraw-amount"
- value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""}
- />
- </div>
+ <Amount
+ currency={balance.currency}
+ value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""}
+ />
</fieldset>{" "}
{Amounts.isZero(sellFee) ? undefined : (
<Fragment>
<fieldset>
<label>{i18n.str`Amount after conversion`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={fiatCurrency.length}
- maxLength={fiatCurrency.length}
- tabIndex={-1}
- value={fiatCurrency}
- />
-
- <input
- // type="number"
- style={{ color: "black" }}
- disabled
- value={Amounts.stringifyValue(calc.beforeFee)}
- />
- </div>
+ <Amount
+ currency={fiatCurrency}
+ value={Amounts.stringifyValue(calc.beforeFee)}
+ />
</fieldset>
<fieldset>
<label>{i18n.str`Cashout fee`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={fiatCurrency.length}
- maxLength={fiatCurrency.length}
- tabIndex={-1}
- value={fiatCurrency}
- />
-
- <input
- // type="number"
- style={{ color: "black" }}
- disabled
- value={Amounts.stringifyValue(sellFee)}
- />
- </div>
+ <Amount
+ currency={fiatCurrency}
+ value={Amounts.stringifyValue(sellFee)}
+ />
</fieldset>
</Fragment>
)}
@@ -510,26 +421,10 @@ function CreateCashout({
<label
style={{ fontWeight: "bold", color: "green" }}
>{i18n.str`Total cashout transfer`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={fiatCurrency.length}
- maxLength={fiatCurrency.length}
- tabIndex={-1}
- value={fiatCurrency}
- />
-
- <input
- type="number"
- // ref={ref}
- id="withdraw-amount"
- disabled
- name="withdraw-amount"
- value={Amounts.stringifyValue(calc.credit)}
- />
- </div>
+ <Amount
+ currency={fiatCurrency}
+ value={Amounts.stringifyValue(calc.credit)}
+ />
</fieldset>
<fieldset>
<label>{i18n.str`Confirmation channel`}</label>
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 `}
</button>
<button
class={tab === "wire-transfer" ? "tablinks active" : "tablinks"}
@@ -53,7 +53,7 @@ export function PaymentOptions({ limit }: { limit: AmountJson
}): VNode {
setTab("wire-transfer");
}}
>
- {i18n.str`Transfer to bank account`}
+ {i18n.str`Wire transfer`}
</button>
</div>
{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"
>
- <p>
- <label for="iban">{i18n.str`Receiver IBAN:`}</label>
+ <label for="iban">{i18n.str`Receiver IBAN:`}</label>
+ <input
+ ref={ref}
+ type="text"
+ id="iban"
+ name="iban"
+ value={iban ?? ""}
+ placeholder="CC0123456789"
+ required
+ pattern={ibanRegex}
+ onInput={(e): void => {
+ setIban(e.currentTarget.value);
+ }}
+ />
+ <ShowInputErrorLabel
+ message={errorsWire?.iban}
+ isDirty={iban !== undefined}
+ />
+ <label for="subject">{i18n.str`Transfer subject:`}</label>
+ <input
+ type="text"
+ name="subject"
+ id="subject"
+ placeholder="subject"
+ value={subject ?? ""}
+ required
+ onInput={(e): void => {
+ setSubject(e.currentTarget.value);
+ }}
+ />
+ <ShowInputErrorLabel
+ message={errorsWire?.subject}
+ isDirty={subject !== undefined}
+ />
+ <label for="amount">{i18n.str`Amount:`}</label>
+ <div style={{ width: "max-content", display: "flex" }}>
<input
- ref={ref}
type="text"
- id="iban"
- name="iban"
- value={iban ?? ""}
- placeholder="CC0123456789"
- required
- pattern={ibanRegex}
- onInput={(e): void => {
- setIban(e.currentTarget.value);
+ readonly
+ class="currency-indicator"
+ size={limit.currency.length}
+ maxLength={limit.currency.length}
+ tabIndex={-1}
+ style={{
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ borderRight: 0,
}}
+ value={limit.currency}
/>
- <br />
- <ShowInputErrorLabel
- message={errorsWire?.iban}
- isDirty={iban !== undefined}
- />
- <br />
- <label for="subject">{i18n.str`Transfer subject:`}</label>
<input
- type="text"
- name="subject"
- id="subject"
- placeholder="subject"
- value={subject ?? ""}
+ type="number"
+ name="amount"
+ id="amount"
+ placeholder="amount"
required
+ style={{
+ borderTopLeftRadius: 0,
+ borderBottomLeftRadius: 0,
+ borderLeft: 0,
+ width: 150,
+ }}
+ value={amount ?? ""}
onInput={(e): void => {
- setSubject(e.currentTarget.value);
+ setAmount(e.currentTarget.value);
}}
/>
- <br />
- <ShowInputErrorLabel
- message={errorsWire?.subject}
- isDirty={subject !== undefined}
- />
- <br />
- <label for="amount">{i18n.str`Amount:`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={limit.currency.length}
- maxLength={limit.currency.length}
- tabIndex={-1}
- value={limit.currency}
- />
-
- <input
- type="number"
- name="amount"
- id="amount"
- placeholder="amount"
- required
- value={amount ?? ""}
- onInput={(e): void => {
- setAmount(e.currentTarget.value);
- }}
- />
- </div>
- <ShowInputErrorLabel
- message={errorsWire?.amount}
- isDirty={amount !== undefined}
- />
- </p>
-
+ </div>
+ <ShowInputErrorLabel
+ message={errorsWire?.amount}
+ isDirty={amount !== undefined}
+ />
<p style={{ display: "flex", justifyContent: "space-between" }}>
<input
type="submit"
diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx
b/packages/demobank-ui/src/pages/QrCodeSection.tsx
index 0229dd425..c27984569 100644
--- a/packages/demobank-ui/src/pages/QrCodeSection.tsx
+++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx
@@ -51,19 +51,14 @@ export function QrCodeSection({
const { abortWithdrawal } = useAccessAnonAPI();
return (
<section id="main" class="content">
- <h1 class="nav">{i18n.str`Transfer to Taler Wallet`}</h1>
+ <h1 class="nav">{i18n.str`Charge your GNU Taler wallet`}</h1>
<article>
- <div class="qr-div">
- <p>{i18n.str`Use this QR code to withdraw to your mobile
wallet:`}</p>
+ <div class="qr-div ">
+ <a href={talerWithdrawUri} class="pure-button pure-button-primary">
+ <i18n.Translate>Continue with GNU Taler</i18n.Translate>
+ </a>
+ <p>{i18n.str`Or scan this QR code with your mobile to receive the
coin in another device:`}</p>
<QR text={talerWithdrawUri} />
- <p>
- <i18n.Translate>
- Click{" "}
- <a href={talerWithdrawUri}>{i18n.str`this taler:// link`}</a> to
- open your Taler wallet
- </i18n.Translate>{" "}
- </p>
- <br />
<a
class="pure-button btn-cancel"
onClick={async (e) => {
@@ -92,7 +87,7 @@ export function QrCodeSection({
}
}
}}
- >{i18n.str`Abort`}</a>
+ >{i18n.str`Cancel`}</a>
</div>
</article>
</section>
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 (
<form
id="reserve-form"
@@ -82,32 +85,15 @@ export function WalletWithdrawForm({
<p>
<label for="withdraw-amount">{i18n.str`Amount to withdraw:`}</label>
- <div style={{ width: "max-content" }}>
- <input
- type="text"
- readonly
- class="currency-indicator"
- size={limit.currency.length}
- maxLength={limit.currency.length}
- tabIndex={-1}
- value={limit.currency}
- />
-
- <input
- type="number"
- ref={ref}
- id="withdraw-amount"
- name="withdraw-amount"
- value={amountStr ?? ""}
- onChange={(e): void => {
- setAmountStr(e.currentTarget.value);
- }}
- />
- <ShowInputErrorLabel
- message={errors?.amount}
- isDirty={amountStr !== undefined}
- />
- </div>
+ <RefAmount
+ currency={limit.currency}
+ value={amountStr}
+ onChange={(v) => {
+ setAmountStr(v);
+ }}
+ error={errors?.amount}
+ ref={ref}
+ />
</p>
<p>
<div>
@@ -160,3 +146,61 @@ export function WalletWithdrawForm({
</form>
);
}
+
+export function Amount(
+ {
+ currency,
+ value,
+ error,
+ onChange,
+ }: {
+ error?: string;
+ currency: string;
+ value: string | undefined;
+ onChange?: (s: string) => void;
+ },
+ ref: Ref<HTMLInputElement>,
+): VNode {
+ return (
+ <div style={{ width: "max-content" }}>
+ <div>
+ <input
+ type="text"
+ readonly
+ class="currency-indicator"
+ size={currency.length}
+ maxLength={currency.length}
+ tabIndex={-1}
+ style={{
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ borderRight: 0,
+ }}
+ value={currency}
+ />
+ <input
+ type="number"
+ ref={ref}
+ name="amount"
+ id="amount"
+ placeholder="0"
+ style={{
+ borderTopLeftRadius: 0,
+ borderBottomLeftRadius: 0,
+ borderLeft: 0,
+ width: 150,
+ color: "black",
+ }}
+ value={value ?? ""}
+ disabled={!onChange}
+ onInput={(e): void => {
+ if (onChange) {
+ onChange(e.currentTarget.value);
+ }
+ }}
+ />
+ </div>
+ <ShowInputErrorLabel message={error} isDirty={value !== undefined} />
+ </div>
+ );
+}
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 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 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-group input:not([type]),
.pure-group input[type="text"],
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: mobile friendly,
gnunet <=