diff options
author | tg(x) <*@tg-x.net> | 2015-12-18 22:36:26 +0100 |
---|---|---|
committer | tg(x) <*@tg-x.net> | 2015-12-18 22:36:26 +0100 |
commit | 3234e31e2dee2baa569086f767c5b91e48e01608 (patch) | |
tree | 6940dbdbdd2a07fc3a0f65c819ecbb410d8fbc8d /extension/pages | |
parent | d044858bec2d1d1a0a7e3b91848d8f396c8281e1 (diff) | |
download | wallet-core-3234e31e2dee2baa569086f767c5b91e48e01608.tar.xz |
webext: styling
Diffstat (limited to 'extension/pages')
-rw-r--r-- | extension/pages/confirm-contract.html | 28 | ||||
-rw-r--r-- | extension/pages/confirm-create-reserve.html | 43 | ||||
-rw-r--r-- | extension/pages/confirm-create-reserve.js | 6 | ||||
-rw-r--r-- | extension/pages/reserve-success.html | 24 |
4 files changed, 74 insertions, 27 deletions
diff --git a/extension/pages/confirm-contract.html b/extension/pages/confirm-contract.html index 9959bb489..6b09ffeb1 100644 --- a/extension/pages/confirm-contract.html +++ b/extension/pages/confirm-contract.html @@ -7,7 +7,8 @@ <script src="../lib/handlebars-v4.0.5.js"></script> <script src="../lib/commonHelpers.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"> Hello, this is the wallet. The merchant "{{merchant.name}}" @@ -29,17 +30,28 @@ <script id="error-template" type="text/x-handlebars-template"> Payment was not successful: {{error}} </script> - - </head> + <body> - <h1>Confirm Payment</h1> + <header> + <div id="logo"></div> + <h1>Payment Confirmation</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + + <article id="contract"> + <div id="render-contract"></div> + + <button id="confirm-pay">Confirm Payment</button> + </article> - <div id="render-contract"></div> + <article id="status"></article> - <button id="confirm-pay">Confirm Pay!</button> + </section> - <div id="status"></div> - </body> </html> diff --git a/extension/pages/confirm-create-reserve.html b/extension/pages/confirm-create-reserve.html index d89fd0b13..f5dd725f7 100644 --- a/extension/pages/confirm-create-reserve.html +++ b/extension/pages/confirm-create-reserve.html @@ -5,19 +5,38 @@ <title>Taler Wallet: Confirm Reserve Creation</title> <script src="../lib/URI.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> + <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>. - 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> + + <header> + <div id="logo"></div> + <h1>Confirm Reserve Creation</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + + <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> </html> diff --git a/extension/pages/confirm-create-reserve.js b/extension/pages/confirm-create-reserve.js index 5c35121e3..98acfebfc 100644 --- a/extension/pages/confirm-create-reserve.js +++ b/extension/pages/confirm-create-reserve.js @@ -8,7 +8,7 @@ function updateAmount() { console.log("Query is " + JSON.stringify(query)); let s = query.amount_str; if (!s) { - document.body.innerHTML = "Oops, something went wrong."; + document.getElementById('main').innerHTML = "Oops, something went wrong."; return; } showAmount.textContent = s; @@ -29,7 +29,7 @@ document.addEventListener("DOMContentLoaded", (e) => { if (resp.success === true) { document.location.href = resp.backlink; } else { - document.body.innerHTML = + document.getElementById('main').innerHTML = `Oops, something went wrong. The bank responded with HTTP status code ${resp.status}. Here is some more info: @@ -39,5 +39,3 @@ document.addEventListener("DOMContentLoaded", (e) => { }); }); - - diff --git a/extension/pages/reserve-success.html b/extension/pages/reserve-success.html index 81de9cb41..05871ca1f 100644 --- a/extension/pages/reserve-success.html +++ b/extension/pages/reserve-success.html @@ -3,10 +3,28 @@ <html> <head> <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> <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> </html> |