Integrate Summary into Header

klyanyi · klyanyi · commit 1994aa07e3d7 · 2017-05-05T16:25:34.000+08:00
diff --git a/static/css/bot.scss b/static/css/bot.scss
@@ -141,3 +141,15 @@ html, body {
 .show-on-load {
   display: none;
 }
+
+#summary {
+  display: inline-flex;
+  color: white;
+  font-size: 14px;
+  .summary-header {
+    display: block;
+  }
+  .summary-item {
+    width:  100px;
+  }
+}
diff --git a/templates/bot.mustache b/templates/bot.mustache
@@ -54,6 +54,32 @@
           </a>
         </div>
       </div>
+      <div id="summary">
+        <div class="summary-item">
+          <span class="summary-header" data-i18n-text="No. of runs"></span>
+          <span class="totalRuns"></span>
+        </div>  
+        <div class="summary-item">
+          <span class="summary-header" data-i18n-text="Total stake"></span>
+          <span class="totalStake"></span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-header" data-i18n-text="Total payout"></span>
+          <span class="totalPayout"></span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-header" data-i18n-text="Win"></span>
+          <span class="totalWins"></span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-header" data-i18n-text="Loss"></span>
+          <span class="totalLosses"></span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-header" data-i18n-text="Total profit"></span>
+          <span class="totalProfit"></span>
+        </div>
+      </div>
       <div class="right-header show-on-load">
         <div class="intro-login-logout">
           <div id="account-list">
@@ -97,33 +123,6 @@
     <div id="blocklyDiv"></div>
     <div id="summaryPanel" class="draggable-dialog">
       <div class="content">
-        <h3>
-          <span data-i18n-text="Summary"></span>
-        </h3>
-        <table id="summaryDisplay">
-          <thead>
-            <tr>
-              <th data-i18n-text="No. of runs"></th>
-              <th data-i18n-text="Total stake"></th>
-              <th data-i18n-text="Total payout"></th>
-              <th data-i18n-text="Win"></th>
-              <th data-i18n-text="Loss"></th>
-              <th data-i18n-text="Total profit/loss"></th>
-              <th data-i18n-text="Balance"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="totalRuns"></td>
-              <td class="totalStake"></td>
-              <td class="totalPayout"></td>
-              <td class="totalWins"></td>
-              <td class="totalLosses"></td>
-              <td class="totalProfit"></td>
-              <td class="balance"></td>
-            </tr>
-          </tbody>
-        </table>
         <h3>
           <span data-i18n-text="Trades"></span>
         </h3>
