webext: styling

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
parent: d044858bec2d1d1a0a7e3b91848d8f396c8281e1 (diff)
7 files changed, 149 insertions, 28 deletions
diff --git a/extension/icons/taler-logo-24.png b/extension/icons/taler-logo-24.png
deleted file mode 100644
index 00a908e79..000000000
--- a/extension/icons/taler-logo-24.png
+++ /dev/null
diff --git a/extension/manifest.json b/extension/manifest.json
index 73952f683..86de58da5 100644
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -16,7 +16,7 @@
   ],
 
   "browser_action": {
-    "default_icon": "icons/taler-logo-24.png",
+    "default_icon": "img/taler-logo-24.png",
     "default_title": "Taler",
     "default_popup": "popup/balance-overview.html"
   },
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>
diff --git a/extension/style/wallet.css b/extension/style/wallet.css
index 487cdd407..01b9cd96f 100644
--- a/extension/style/wallet.css
+++ b/extension/style/wallet.css
@@ -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 {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -27,3 +96,8 @@ input.url {
 .json-string {
    color: olive;
 }
+
+button {
+    font-size: 120%;
+    padding: 0.5em;
+}
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
parent	d044858bec2d1d1a0a7e3b91848d8f396c8281e1 (diff)