Hide transaction ID on smaller screens

LiskArchive · Aug 21, 2017 · 69d9ff7 · 69d9ff7
1 parent 9724a5c
commit 69d9ff7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/transactions/transactionRow.js b/src/components/transactions/transactionRow.js
@@ -14,7 +14,7 @@ const TransactionRow = props => (
           <TooltipTime label={props.value.timestamp}></TooltipTime> :
           <Spinner />}
     </td>
-    <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>
+    <td className={`${props.tableStyle.rowCell} ${styles.centerText} ${styles.hiddenXs}`}>
         <TooltipWrapper tooltip={`${props.value.confirmations} confirmations`}>{props.value.id}</TooltipWrapper>
     </td>
     <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>

diff --git a/src/components/transactions/transactions.css b/src/components/transactions/transactions.css
@@ -35,3 +35,9 @@
 .centerText{
     text-align: center;
 }
+
+@media screen and (max-width: 48em) {
+  .hiddenXs {
+    display: none;
+  }
+}
diff --git a/src/components/transactions/transactionsHeader.js b/src/components/transactions/transactionsHeader.js
@@ -5,7 +5,7 @@ const TransactionsHeader = ({ tableStyle }) => (
   <thead>
     <tr>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>Time</th>
-      <th className={`${tableStyle.headCell} ${styles.centerText}`}>Transaction ID</th>
+      <th className={`${tableStyle.headCell} ${styles.centerText} ${styles.hiddenXs}`}>Transaction ID</th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>From / To</th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}></th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>Amount</th>