[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] branch master updated: style corrections
From: |
gnunet |
Subject: |
[taler-merchant-backoffice] branch master updated: style corrections |
Date: |
Wed, 08 Sep 2021 20:16:27 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository merchant-backoffice.
The following commit(s) were added to refs/heads/master by this push:
new 797b265 style corrections
797b265 is described below
commit 797b2650b3ab19912afb56cf7af70e2e164cc25e
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Sep 8 15:16:19 2021 -0300
style corrections
---
packages/backend/.gitignore | 1 +
packages/backend/src/components/Footer.tsx | 11 ++-
packages/backend/src/css/style.css | 1 -
packages/backend/src/index.tsx | 8 +-
packages/backend/src/pages/DepletedTip.tsx | 11 ++-
packages/backend/src/pages/OfferRefund.tsx | 36 ++++---
packages/backend/src/pages/OfferTip.tsx | 36 ++++---
packages/backend/src/pages/RequestPayment.tsx | 36 ++++---
packages/backend/src/pages/ShowOrderDetails.tsx | 68 +++++++------
packages/backend/src/styled/index.tsx | 122 ++++++++++++++++++++++++
10 files changed, 225 insertions(+), 105 deletions(-)
diff --git a/packages/backend/.gitignore b/packages/backend/.gitignore
index db8559a..a6ee22d 100644
--- a/packages/backend/.gitignore
+++ b/packages/backend/.gitignore
@@ -6,3 +6,4 @@
/coverage
/dist
/.rollup.cache
+/.linaria-cache
diff --git a/packages/backend/src/components/Footer.tsx
b/packages/backend/src/components/Footer.tsx
index f585025..5f29578 100644
--- a/packages/backend/src/components/Footer.tsx
+++ b/packages/backend/src/components/Footer.tsx
@@ -19,11 +19,14 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
import { h, VNode } from 'preact';
+import { FooterBar } from '../styled';
export function Footer(): VNode {
- return <div class="talerbar">
- <p>You can learn more about GNU Taler on our <a
href="https://taler.net/">website</a>.<br />
- Copyright © 2014—2021 Taler Systems SA</p>
- </div>
+ return <FooterBar>
+ <p>
+ <a href="https://taler.net/">Learn more about GNU Taler on our
website.</a>
+ <p>Copyright © 2014—2021 Taler Systems SA</p>
+ </p>
+ </FooterBar>
}
diff --git a/packages/backend/src/css/style.css
b/packages/backend/src/css/style.css
index e03b632..f24dbaa 100644
--- a/packages/backend/src/css/style.css
+++ b/packages/backend/src/css/style.css
@@ -50,7 +50,6 @@ body {
@media (min-width: 500px) {
.content {
padding-bottom: 2em;
- margin-right: 1em;
overflow-y: auto;
}
}
diff --git a/packages/backend/src/index.tsx b/packages/backend/src/index.tsx
index 0babb26..275f633 100644
--- a/packages/backend/src/index.tsx
+++ b/packages/backend/src/index.tsx
@@ -25,6 +25,7 @@ import { TranslationProvider } from './context/translation';
// import { Page as RequestPayment } from './RequestPayment';
import "./css/pure-min.css"
import { Route, Router } from 'preact-router';
+import { Footer } from './components/Footer';
// import OfferTip from './pages/OfferTip';
// import {OfferRefund} from './pages/OfferRefund';
// import DepletedTip from './pages/DepletedTip';
@@ -43,13 +44,6 @@ export default function Application(): VNode {
);
}
-function Footer() {
- return <div class="talerbar">
- <p>You can learn more about GNU Taler on our <a
href="https://taler.net/">website</a>.<br />
- Copyright © 2014—2021 Taler Systems SA</p>
- </div>
-}
-
function ApplicationStatusRoutes(): VNode {
return <Fragment>
<Router>
diff --git a/packages/backend/src/pages/DepletedTip.tsx
b/packages/backend/src/pages/DepletedTip.tsx
index 8345484..756b08d 100644
--- a/packages/backend/src/pages/DepletedTip.tsx
+++ b/packages/backend/src/pages/DepletedTip.tsx
@@ -23,21 +23,22 @@ import { render as renderToString } from
'preact-render-to-string';
import { Footer } from '../components/Footer';
import "../css/pure-min.css";
import "../css/style.css";
+import { Page } from '../styled';
function Head(): VNode {
return <title>Status of your tip</title>
}
export function DepletedTip(): VNode {
- return <Fragment>
- <section id="main" class="content">
- <h1 style={{ textAlign: 'center' }}>Tip already collected</h1>
- <div style={{ textAlign: 'center' }}>
+ return <Page>
+ <section>
+ <h1>Tip already collected</h1>
+ <div>
You have already collected this tip.
</div>
</section>
<Footer />
- </Fragment>
+ </Page>
}
export function mount(): void {
diff --git a/packages/backend/src/pages/OfferRefund.tsx
b/packages/backend/src/pages/OfferRefund.tsx
index 47bbb8e..14c9372 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -25,6 +25,7 @@ import { Footer } from '../components/Footer';
import { QR } from '../components/QR';
import "../css/pure-min.css";
import "../css/style.css";
+import { Page, QRPlaceholder, WalletLink } from '../styled';
/**
* This page creates a refund offer QR code
@@ -101,27 +102,24 @@ export function OfferRefund({ refundURI, qr_code,
order_status_url }: Props): VN
setTimeout(check, delayMs);
})
- return <Fragment>
- <section id="main" class="content">
- <h1 style={{ textAlign: 'center' }}>Collect Taler refund</h1>
- <div style={{ textAlign: 'center' }} class="taler-installed-hide">
- <p>
- Scan this QR code with your Taler mobile wallet:
- </p>
- <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{
__html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
- <p>
- <a class="pure-button pure-button-active success" href={refundURI ?
refundURI : `{{ taler_refund_uri }}`}>
- Or open your Taller wallet
- </a>
- </p>
- <p>
- <a href="https://wallet.taler.net/">Don't have a Taler wallet yet?
Install it!</a>
- </p>
- </div>
- <hr />
+ return <Page>
+ <section>
+ <h1>Collect Taler refund</h1>
+ <p>
+ Scan this QR code with your Taler mobile wallet:
+ </p>
+ <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code :
`{{{ taler_refund_qrcode_svg }}}` }} />
+ <p>
+ <WalletLink href={refundURI ? refundURI : `{{ taler_refund_uri }}`}>
+ Or open your Taller wallet
+ </WalletLink>
+ </p>
+ <p>
+ <a href="https://wallet.taler.net/">Don't have a Taler wallet yet?
Install it!</a>
+ </p>
</section>
<Footer />
- </Fragment>
+ </Page>
}
export function mount(): void {
diff --git a/packages/backend/src/pages/OfferTip.tsx
b/packages/backend/src/pages/OfferTip.tsx
index 186449a..ace1059 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -25,6 +25,7 @@ import { Footer } from '../components/Footer';
import { QR } from '../components/QR';
import "../css/pure-min.css";
import "../css/style.css";
+import { Page, QRPlaceholder, WalletLink } from '../styled';
import { ShowOrderDetails } from './ShowOrderDetails';
@@ -96,27 +97,24 @@ export function OfferTip({ tipURI, qr_code, tip_status_url
}: Props): VNode {
setTimeout(check, delayMs);
})
- return <Fragment>
- <section id="main" class="content">
- <h1 style={{ textAlign: 'center' }}>Collect Taler tip</h1>
- <div style={{ textAlign: 'center' }} class="taler-installed-hide">
- <p>
- Scan this QR code with your Taler mobile wallet:
- </p>
- <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{
__html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
- <p>
- <a class="pure-button pure-button-active success" href={tipURI ?
tipURI : `{{ taler_tip_uri }}`}>
- Or open your Taller wallet
- </a>
- </p>
- <p>
- <a href="https://wallet.taler.net/">Don't have a Taler wallet yet?
Install it!</a>
- </p>
- </div>
- <hr />
+ return <Page>
+ <section>
+ <h1 >Collect Taler tip</h1>
+ <p>
+ Scan this QR code with your Taler mobile wallet:
+ </p>
+ <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code :
`{{{ taler_tip_qrcode_svg }}}` }} />
+ <p>
+ <WalletLink href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
+ Or open your Taller wallet
+ </WalletLink>
+ </p>
+ <p>
+ <a href="https://wallet.taler.net/">Don't have a Taler wallet yet?
Install it!</a>
+ </p>
</section>
<Footer />
- </Fragment>
+ </Page>
}
export function mount(): void {
diff --git a/packages/backend/src/pages/RequestPayment.tsx
b/packages/backend/src/pages/RequestPayment.tsx
index c43c6db..8dd22d1 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -25,6 +25,7 @@ import { Footer } from '../components/Footer';
import "../css/pure-min.css";
import "../css/style.css";
import { QR } from '../components/QR';
+import { Page, QRPlaceholder, WalletLink } from '../styled';
/**
@@ -128,27 +129,24 @@ export function RequestPayment({ payURI, qr_code,
order_status_url }: Props): VN
}
setTimeout(check, 500);
})
- return <Fragment>
- <section id="main" class="content">
- <h1 style={{ textAlign: 'center' }}>Pay with Taler</h1>
- <div style={{ textAlign: 'center' }} class="taler-installed-hide">
- <p>
- Scan this QR code with your mobile wallet:
- </p>
- <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{
__html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
- <p>
- <a class="pure-button pure-button-active success" href={payURI ?
payURI : `{{ taler_pay_uri }}`}>
- Or open your Taller wallet
- </a>
- </p>
- <p>
- <a href="https://wallet.taler.net/">Don't have a Taler wallet yet?
Install it!</a>
- </p>
- </div>
- <hr />
+ return <Page>
+ <section>
+ <h1 >Pay with Taler</h1>
+ <p>
+ Scan this QR code with your mobile wallet:
+ </p>
+ <QRPlaceholder dangerouslySetInnerHTML={{ __html: qr_code ? qr_code :
`{{{ taler_pay_qrcode_svg }}}` }} />
+ <p>
+ <WalletLink href={payURI ? payURI : `{{ taler_pay_uri }}`}>
+ Or open your Taller wallet
+ </WalletLink>
+ </p>
+ <p>
+ <a href="https://wallet.taler.net/">Don't have a Taler wallet yet?
Install it!</a>
+ </p>
</section>
<Footer />
- </Fragment>
+ </Page>
}
diff --git a/packages/backend/src/pages/ShowOrderDetails.tsx
b/packages/backend/src/pages/ShowOrderDetails.tsx
index 4bde798..58f2831 100644
--- a/packages/backend/src/pages/ShowOrderDetails.tsx
+++ b/packages/backend/src/pages/ShowOrderDetails.tsx
@@ -21,9 +21,11 @@
import { format } from 'date-fns';
import { Fragment, h, render, VNode } from 'preact';
import { render as renderToString } from 'preact-render-to-string';
+import { Footer } from '../components/Footer';
import "../css/pure-min.css";
import "../css/style.css";
import { MerchantBackend } from '../declaration';
+import { Center, Page } from '../styled';
/**
* This page creates a payment request QR code
@@ -62,40 +64,44 @@ export function ShowOrderDetails({ order_summary,
refund_amount, contract_terms
const pay_deadline = contract_terms?.pay_deadline.t_ms === 'never' ||
contract_terms?.pay_deadline.t_ms === undefined ? undefined :
format(new Date(contract_terms?.pay_deadline.t_ms), 'dd/MM/yyyy HH:mm:ss')
- return <Fragment>
- <h1>Order details</h1>
-
+ return <Page>
<div>
- This is the default status page for your order for <b>{order_summary ?
order_summary : `{{ order_summary }}`}</b>.
- </div>
-
+ <h1>Order details</h1>
+
+ <div>
+ This is the default status page for your order for <b>{order_summary ?
order_summary : `{{ order_summary }}`}</b>.
+ </div>
+
+
+ <h2>Refund status</h2>
+ <div>
+ The merchant has granted you refunds on the purchase of
<b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
+ </div>
+
+ <h2>Full contract details</h2>
+
+ <Center>
+ <pre>
+ <table>
+ <tr>
+ <td>amount</td><td>{contract_terms?.amount || `{{
contract_terms.amount }}`}</td>
+ </tr>
+ <tr>
+ <td>summary</td><td>{contract_terms?.summary || `{{
contract_terms.summary }}`}</td>
+ </tr>
+ <tr>
+ <td>pay deadline</td><td>{pay_deadline || `{{
contract_terms.pay_deadline.t_ms }}`}</td>
+ </tr>
+ <tr>
+ <td>merchant name</td><td>{contract_terms?.merchant?.name || `{{
contract_terms.merchant.name }}`}</td>
+ </tr>
+ </table>
+ </pre>
+ </Center>
- <h2>Refund status</h2>
- <div>
- The merchant has granted you refunds on the purchase of
<b>{refund_amount ? refund_amount : `{{ refund_amount }}`}</b>.
</div>
-
- <h2>Full contract details</h2>
-
- {/* <!-- FIXME #6459: expand the contract JSON in all its glory here -->
*/}
- <pre>
- <table>
- <tr>
- <td style={{fontWeight:
'bold'}}>amount</td><td>{contract_terms?.amount || `{{ contract_terms.amount
}}`}</td>
- </tr>
- <tr>
- <td style={{fontWeight:
'bold'}}>summary</td><td>{contract_terms?.summary || `{{ contract_terms.summary
}}`}</td>
- </tr>
- <tr>
- <td style={{fontWeight: 'bold'}}>pay deadline</td><td>{pay_deadline
|| `{{ contract_terms.pay_deadline.t_ms }}`}</td>
- </tr>
- <tr>
- <td style={{fontWeight: 'bold'}}>merchant
name</td><td>{contract_terms?.merchant?.name || `{{
contract_terms.merchant.name }}`}</td>
- </tr>
- </table>
- </pre>
-
- </Fragment>
+ <Footer />
+ </Page>
}
diff --git a/packages/backend/src/styled/index.tsx
b/packages/backend/src/styled/index.tsx
new file mode 100644
index 0000000..2323d0d
--- /dev/null
+++ b/packages/backend/src/styled/index.tsx
@@ -0,0 +1,122 @@
+import { styled } from '@linaria/react'
+
+export const QRPlaceholder = styled.div`
+ margin: auto;
+ text-align: center;
+ width: 340px;
+`
+
+export const FooterBar = styled.footer`
+ text-align: center;
+ background-color: #033;
+ color: white;
+ padding: 1em;
+ overflow: auto;
+
+ & > p > a:link,
+ & > p > a:visited,
+ & > p > a:hover,
+ & > p > a:active {
+ color: white;
+ }
+`
+
+export const Page = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ min-height: 100vh;
+ text-align: center;
+
+ a:link,
+ a:visited,
+ a:hover,
+ a:active {
+ color: black;
+ }
+ & > section > p {
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
+ & > header {
+ flex-direction: column;
+ justify-content: space-between;
+ display: flex;
+ }
+
+ table > tr > td {
+ text-align: left;
+ }
+ table > tr > td:first-child {
+ text-align: right;
+ font-weight: bold;
+ padding-right: 20px;
+ }
+
+ & > footer {
+ flex-direction: row;
+ justify-content: center;
+ display: flex;
+ }
+`
+export const Center = styled.div`
+ display: flex;
+ justify-content: center;
+`
+
+export const WalletLink = styled.a<{ upperCased?: boolean }>`
+ display: inline-block;
+ zoom: 1;
+ line-height: normal;
+ white-space: nowrap;
+ vertical-align: middle;
+ text-align: center;
+ cursor: pointer;
+ user-select: none;
+ box-sizing: border-box;
+ text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'};
+
+ font-family: inherit;
+ font-size: 100%;
+ padding: 0.5em 1em;
+ color: #444; /* rgba not supported (IE 8) */
+ color: rgba(0, 0, 0, 0.8); /* rgba supported */
+ border: 1px solid #999; /*IE 6/7/8*/
+ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
+ background-color: '#e6e6e6';
+ text-decoration: none;
+ border-radius: 2px;
+
+ :focus {
+ outline: 0;
+ }
+
+ &:disabled {
+ border: none;
+ background-image: none;
+ /* csslint ignore:start */
+ filter: alpha(opacity=40);
+ /* csslint ignore:end */
+ opacity: 0.4;
+ cursor: not-allowed;
+ box-shadow: none;
+ pointer-events: none;
+ }
+
+ :hover {
+ filter: alpha(opacity=90);
+ background-image: linear-gradient(
+ transparent,
+ rgba(0, 0, 0, 0.05) 40%,
+ rgba(0, 0, 0, 0.1)
+ );
+ }
+
+ background-color: #e6e6e6;
+ border-radius: 4px;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
+ 0 0 6px rgba(0, 0, 0, 0.2) inset;
+ border-color: #000;
+`;
+
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-merchant-backoffice] branch master updated: style corrections,
gnunet <=