taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

webext: styling

Browse Source
This commit is contained in:
tg(x) 2015-12-18 22:36:26 +01:00
parent d044858bec
commit 3234e31e2d
7 changed files with 149 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
extension/icons/taler-logo-24.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

2
extension/manifest.json
View File

@ -16,7 +16,7 @@
], ],
"browser_action": { "browser_action": {
"default_icon": "icons/taler-logo-24.png", "default_icon": "img/taler-logo-24.png",
"default_title": "Taler", "default_title": "Taler",
"default_popup": "popup/balance-overview.html" "default_popup": "popup/balance-overview.html"
}, },

28
extension/pages/confirm-contract.html
View File

@ -7,7 +7,8 @@
<script src="../lib/handlebars-v4.0.5.js"></script> <script src="../lib/handlebars-v4.0.5.js"></script>
<script src="../lib/commonHelpers.js"></script> <script src="../lib/commonHelpers.js"></script>
<script src="confirm-contract.js"></script> <script src="confirm-contract.js"></script>
<link rel="stylesheet" type="text/css" href="../style/wallet.css"> <link rel="stylesheet" type="text/css" href="../style/page.css">
<link rel="stylesheet" type="text/css" href="../style/wallet.css">
<script id="contract-template" type="text/x-handlebars-template"> <script id="contract-template" type="text/x-handlebars-template">
Hello, this is the wallet. The merchant "{{merchant.name}}" Hello, this is the wallet. The merchant "{{merchant.name}}"
@ -29,17 +30,28 @@
<script id="error-template" type="text/x-handlebars-template"> <script id="error-template" type="text/x-handlebars-template">
Payment was not successful: {{error}} Payment was not successful: {{error}}
</script> </script>
</head> </head>
<body> <body>
<h1>Confirm Payment</h1> <header>
<div id="logo"></div>
<h1>Payment Confirmation</h1>
</header>
<div id="render-contract"></div> <aside class="sidebar" id="left">
</aside>
<button id="confirm-pay">Confirm Pay!</button> <section id="main">
<article id="contract">
<div id="render-contract"></div>
<button id="confirm-pay">Confirm Payment</button>
</article>
<article id="status"></article>
</section>
<div id="status"></div>
</body> </body>
</html> </html>

43
extension/pages/confirm-create-reserve.html
View File

@ -5,19 +5,38 @@
<title>Taler Wallet: Confirm Reserve Creation</title> <title>Taler Wallet: Confirm Reserve Creation</title>
<script src="../lib/URI.js"></script> <script src="../lib/URI.js"></script>
<script src="confirm-create-reserve.js"></script> <script src="confirm-create-reserve.js"></script>
<link rel="stylesheet" type="text/css" href="../style/wallet.css"> <link rel="stylesheet" type="text/css" href="../style/wallet.css">
</head> </head>
<body> <body>
<h1>Confirm Reserve Creation</h1>
Hello, this is the wallet. A bank wants to create a reserve for <span id=show-amount>(loading...)</span>. <header>
Please specify the base URL of the mint you want to use. <div id="logo"></div>
<p /> <h1>Confirm Reserve Creation</h1>
<div class='formish'> </header>
<div class='form-row'>
<label for='mint-url'>Mint URL</label> <aside class="sidebar" id="left">
<input class='url' id='mint-url' type="text" value="http://mint.demo.taler.net/"></input> </aside>
</div>
<button id='confirm'>Confirm Reserve</button> <section id="main">
</div>
<article>
<p>
A bank wants to create a reserve for <span id="show-amount">(loading...)</span>.
</p>
<p>
Please specify the base URL of the mint you want to use.
</p>
<div class="formish">
<div class="form-row">
<label for="mint-url">Mint URL</label>
<input class="url" id="mint-url" type="text" value="http://mint.demo.taler.net/"></input>
</div>
<button id="confirm">Confirm Reserve</button>
</div>
</article>
</section>
</body> </body>
</html> </html>

6
extension/pages/confirm-create-reserve.js
View File

@ -8,7 +8,7 @@ function updateAmount() {
console.log("Query is " + JSON.stringify(query)); console.log("Query is " + JSON.stringify(query));
let s = query.amount_str; let s = query.amount_str;
if (!s) { if (!s) {
document.body.innerHTML = "Oops, something went wrong."; document.getElementById('main').innerHTML = "Oops, something went wrong.";
return; return;
} }
showAmount.textContent = s; showAmount.textContent = s;
@ -29,7 +29,7 @@ document.addEventListener("DOMContentLoaded", (e) => {
if (resp.success === true) { if (resp.success === true) {
document.location.href = resp.backlink; document.location.href = resp.backlink;
} else { } else {
document.body.innerHTML = document.getElementById('main').innerHTML =
`Oops, something went wrong. `Oops, something went wrong.
The bank responded with HTTP status code ${resp.status}. The bank responded with HTTP status code ${resp.status}.
Here is some more info: Here is some more info:
@ -39,5 +39,3 @@ document.addEventListener("DOMContentLoaded", (e) => {
}); });
}); });

24
extension/pages/reserve-success.html
View File

@ -3,10 +3,28 @@
<html> <html>
<head> <head>
<title>Taler Wallet: Reserve Created</title> <title>Taler Wallet: Reserve Created</title>
<link rel="stylesheet" type="text/css" href="../style/wallet.css"> <link rel="stylesheet" type="text/css" href="../style/wallet.css">
</head> </head>
<body> <body>
<h1>Success!</h1>
The reserve was created successfully. <header>
<div id="logo"></div>
<h1>Reserve Creation</h1>
</header>
<aside class="sidebar" id="left">
</aside>
<section id="main">
<article>
<h1>Success!</h1>
<p>The reserve was created successfully.</p>
</article>
</section>
</body>
</body> </body>
</html> </html>

74
extension/style/wallet.css
View File

@ -1,3 +1,72 @@
body {
background-color: white;
margin: 0;
padding: 0;
font-family: Verdana, sans;
}
header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border-bottom: 1px solid black;
}
header h1 {
font-size: 200%;
margin: 0;
padding: 0 0 0 120px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
header #logo {
float: left;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
text-align: center;
border-right: 1px solid black;
background-image: url(../img/logo.png);
background-size: 100px;
}
aside {
width: 100px;
float: left;
}
section#main {
margin: 0 0 0 100px;
padding: 20px;
border-left: 1px solid black;
height: 100%;
max-width: 40em;
}
section#main h1:first-child {
margin-top: 0;
}
h1 {
font-size: 160%;
}
h2 {
font-size: 140%;
}
h3 {
font-size: 120%;
}
h4, h5, h6 {
font-size: 100%;
}
.form-row { .form-row {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
@ -27,3 +96,8 @@ input.url {
.json-string { .json-string {
color: olive; color: olive;
} }
button {
font-size: 120%;
padding: 0.5em;
}