History layout fix

sonm-io · Dec 25, 2017 · 9de8b22 · 9de8b22
1 parent 4159818
commit 9de8b22
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/docs/app.bundled.js b/docs/app.bundled.js
diff --git a/docs/style.css b/docs/style.css
@@ -459,7 +459,8 @@
   table-layout: fixed;
 }
 .sonm-tx-list__col-from {
-  width: 200px;
+  width: 300px;
+  vertical-align: bottom;
 }
 .sonm-tx-list__col-from-ct {
   display: grid;
@@ -486,14 +487,16 @@
 }
 .sonm-tx-list__col-time {
   width: 85px;
+  vertical-align: bottom;
 }
 .sonm-tx-list__col-to {
-  width: 200px;
+  width: 300px;
+  vertical-align: bottom;
 }
 .sonm-tx-list__col-to-ct {
   display: flex;
   justify-content: center;
-  vertical-align: middle;
+  vertical-align: center;
 }
 .sonm-tx-list__col-to-hash {
   margin: 0 0 0 5px;
@@ -503,6 +506,7 @@
 }
 .sonm-tx-list__col-status {
   width: 70px;
+  vertical-align: bottom;
 }
 .sonm-tx-list__col-status--success {
   color: #7BAF84;
@@ -515,6 +519,16 @@
 }
 .sonm-tx-list__col-amount {
   width: 150px;
+  vertical-align: bottom;
+}
+.sonm-tx-list__col-amount-value {
+  margin-top: 5px;
+}
+.sonm-tx-list__col-amount .sonm-balance {
+  display: table;
+}
+.sonm-tx-list__col-hash {
+  vertical-align: bottom;
 }
 .sonm-login {
   background-color: #0b1c26;

diff --git a/front/src/app/components/layouts/history/index.less b/front/src/app/components/layouts/history/index.less
@@ -48,7 +48,8 @@
   &__col {
 
     &-from {
-      width: 200px;
+      width: 300px;
+      vertical-align: bottom;
 
       &-ct {
         display: grid;
@@ -80,15 +81,17 @@
 
     &-time {
       width: 85px;
+      vertical-align: bottom;
     }
 
     &-to {
-      width: 200px;
+      width: 300px;
+      vertical-align: bottom;
 
       &-ct {
         display: flex;
         justify-content: center;
-        vertical-align: middle;
+        vertical-align: center;
       }
 
       &-hash {
@@ -102,6 +105,7 @@
 
     &-status {
       width: 70px;
+      vertical-align: bottom;
 
       &--success {
         color: @color-green;
@@ -118,6 +122,19 @@
 
     &-amount {
       width: 150px;
+      vertical-align: bottom;
+
+      &-value {
+        margin-top: 5px;
+      }
+
+      .sonm-balance {
+        display: table;
+      }
+    }
+
+    &-hash {
+      vertical-align: bottom;
     }
   }
 }
diff --git a/front/src/app/components/layouts/history/index.tsx b/front/src/app/components/layouts/history/index.tsx
@@ -86,7 +86,7 @@ export class History extends React.Component<IProps, any> {
             const currency = this.props.mainStore && this.props.mainStore.currencyMap.get(addr);
             const symbol = currency
                 ? currency.symbol
-                : '';
+                : 'None';
 
             const result = [
                 <Balance
@@ -98,7 +98,6 @@ export class History extends React.Component<IProps, any> {
             ];
 
             if (record.fee) {
-                result.push(<br key="b"/>);
                 result.push(
                     <Balance
                         key="f"