From d5ca4590d8556f9b4617024578dfca3168df5267 Mon Sep 17 00:00:00 2001
From: Clinton Alexander <clinton.alexander@r3cev.com>
Date: Mon, 25 Jul 2016 17:32:33 +0100
Subject: [PATCH] Improved styling.

---
 .../irswebdemo/js/controllers/CreateDeal.js   |  4 ++--
 .../demos/irswebdemo/view/create-deal.html    | 18 +++++++--------
 .../r3corda/demos/irswebdemo/view/deal.html   |  5 ++--
 .../r3corda/demos/irswebdemo/view/home.html   | 23 +++++++++++--------
 4 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/main/resources/com/r3corda/demos/irswebdemo/js/controllers/CreateDeal.js b/src/main/resources/com/r3corda/demos/irswebdemo/js/controllers/CreateDeal.js
index 003dac7a1c..c6d4a7f81e 100644
--- a/src/main/resources/com/r3corda/demos/irswebdemo/js/controllers/CreateDeal.js
+++ b/src/main/resources/com/r3corda/demos/irswebdemo/js/controllers/CreateDeal.js
@@ -21,8 +21,8 @@ define([
         };
         $('input.percent').mask("9.999999%", {placeholder: "", autoclear: false});
         $('#swapirscolumns').click(() => {
-            let first = $('#irscolumns .eight:eq( 0 )');
-            let last = $('#irscolumns .eight:eq( 1 )');
+            let first = $('#irscolumns .irscolumn:eq( 0 )');
+            let last = $('#irscolumns .irscolumn:eq( 1 )');
             first.before(last);
 
             let swapPayers = () => {
diff --git a/src/main/resources/com/r3corda/demos/irswebdemo/view/create-deal.html b/src/main/resources/com/r3corda/demos/irswebdemo/view/create-deal.html
index c052779866..42b1de25a6 100644
--- a/src/main/resources/com/r3corda/demos/irswebdemo/view/create-deal.html
+++ b/src/main/resources/com/r3corda/demos/irswebdemo/view/create-deal.html
@@ -1,12 +1,12 @@
 <div class="ui container">
     <div class="ui negative message" id="form-error" ng-show="formError">{{formError}}</div>
-    <h2>New Deal</h2>
+    <h3 class="ui horizontal divider header">
+        <i class="list icon"></i>
+        New Deal
+    </h3>
     <form id="deal-form" class="ui form" ng-submit="createDeal()">
-        <div id="irscolumns" class="ui grid">
-            <div class="sixteen wide column">
-                <input type="submit" class="ui submit primary button fluid"/>
-            </div>
-            <div class="sixteen wide column">
+        <div id="irscolumns" class="ui centered grid">
+            <div class="sixteen wide tablet eight wide computer column">
                 <div class="field">
                     <label>Base Currency</label>
                     <select class="ui  fluid" name="token" ng-model="deal.common.baseCurrency">
@@ -29,7 +29,7 @@
                     <i class="exchange icon"></i>
                 </button>
             </div>
-            <div class="eight wide column" id="createfixedleg">
+            <div class="eight wide column irscolumn" id="createfixedleg">
                 <h3>Fixed Leg</h3>
                 <div class="field">
                     <label>Fixed Rate Payer</label>
@@ -89,7 +89,7 @@
                     </select>
                 </div>
             </div>
-            <div class="eight wide column" id="createfloatingleg">
+            <div class="eight wide column irscolumn" id="createfloatingleg">
                 <h3>Floating Leg</h3>
                 <div class="field">
                     <label>Floating Rate Payer</label>
@@ -178,7 +178,7 @@
                     </select>
                 </div>
             </div>
-            <div class="sixteen wide column">
+            <div class="sixteen wide tablet eight wide computer column">
                 <input type="submit" class="ui submit primary button fluid"/>
             </div>
         </div>
diff --git a/src/main/resources/com/r3corda/demos/irswebdemo/view/deal.html b/src/main/resources/com/r3corda/demos/irswebdemo/view/deal.html
index 2969634a1f..a9cb57ef1e 100644
--- a/src/main/resources/com/r3corda/demos/irswebdemo/view/deal.html
+++ b/src/main/resources/com/r3corda/demos/irswebdemo/view/deal.html
@@ -1,4 +1,5 @@
 <div class="ui container">
+    <div class="ui hidden divider"></div>
     <div class="ui grid">
         <div class="sixteen wide column" id="common">
             <table class="ui striped table">
@@ -53,7 +54,7 @@
                 </tr>
                 <tr class="center aligned">
                     <td>Notional Amount</td>
-                    <td>{{deal.fixedLeg.notional.quantity}} {{deal.fixedLeg.notional.token}}</td>
+                    <td>{{deal.fixedLeg.notional.quantity | number}} {{deal.fixedLeg.notional.token}}</td>
                 </tr>
                 <tr class="center aligned">
                     <td>Payment Frequency</td>
@@ -122,7 +123,7 @@
                 </tr>
                 <tr class="center aligned">
                     <td>Notional Amount</td>
-                    <td>{{deal.floatingLeg.notional.quantity}} {{deal.floatingLeg.notional.token}}</td>
+                    <td>{{deal.floatingLeg.notional.quantity | number}} {{deal.floatingLeg.notional.token}}</td>
                 </tr>
                 <tr class="center aligned">
                     <td>Payment Frequency</td>
diff --git a/src/main/resources/com/r3corda/demos/irswebdemo/view/home.html b/src/main/resources/com/r3corda/demos/irswebdemo/view/home.html
index 6e950114a5..72ccaeab9f 100644
--- a/src/main/resources/com/r3corda/demos/irswebdemo/view/home.html
+++ b/src/main/resources/com/r3corda/demos/irswebdemo/view/home.html
@@ -4,9 +4,14 @@
     <div class="ui active dimmer" ng-show="isLoading()">
         <div class="ui text loader">Loading</div>
     </div>
-    <div class="ui grid">
-        <div class="two column row">
-            <div class="left column">
+    <h3 class="ui horizontal divider header">
+            <i class="options icon"></i>
+        Controls
+    </h3>
+    <div class="ui card centered">
+        <div class="content">
+            <div class="header">Run fixings</div>
+            <div class="description">
                 <div class="ui left labeled button">
                     <span class="ui basic label">{{date.year}}</span>
                     <button class="ui icon button" ng-click="updateDate('year')"><i class="plus icon"></i></button>
@@ -20,16 +25,14 @@
                     <button class="ui icon button" ng-click="updateDate('day')"><i class="plus icon"></i></button>
                 </div>
             </div>
-            <div class="right aligned column">
-                <a class="ui primary button" href="#/create-deal">Create Deal</a>
-            </div>
         </div>
     </div>
+    <div class="ui hidden divider"></div>
     <div class="ui main">
-        <h2 class="ui horizontal divider header">
+        <h3 class="ui horizontal divider header">
             <i class="browser icon"></i>
             Recent deals
-        </h2>
+        </h3>
         <table class="ui striped table">
             <thead>
             <tr class="center aligned">
@@ -44,9 +47,9 @@
             <tr class="center aligned" ng-repeat="deal in deals">
                 <td><a href="#/deal/{{deal.ref}}">{{deal.ref}}</a></td>
                 <td class="single line">{{deal.fixedLeg.fixedRatePayer}}</td>
-                <td class="single line">{{deal.fixedLeg.notional.quantity}} {{deal.fixedLeg.notional.token}}</td>
+                <td class="single line">{{deal.fixedLeg.notional.quantity | number}} {{deal.fixedLeg.notional.token}}</td>
                 <td class="single line">{{deal.floatingLeg.floatingRatePayer}}</td>
-                <td class="single line">{{deal.floatingLeg.notional.quantity}} {{deal.floatingLeg.notional.token}}</td>
+                <td class="single line">{{deal.floatingLeg.notional.quantity | number}} {{deal.floatingLeg.notional.token}}</td>
             </tr>
             </tbody>
         </table>