New concept for dashboard layout components. (#469)

* New concept for dashboard layout components.

* Align dashboard componentes.

* Add divider to fee box component.

* Remove TV icon from mobile and tablet queries.

* Fix form input overflow.

* Add responsive css to statistic component.

* Add responsive css to about page.

* Add global padding bottom.

* Fix graph page styles.

* Add responsive chart and scrollable table.

* Fix mobile css query for navbar menus.

* Fix pagination responsive css.

* Add CSS animated logo.

* Revert "Add CSS animated logo."

This reverts commit 92af38294c0d4fe815a801b37635cde7f8ee1ced.

* Add extra skeleton to fee-box-component.

* Fix latest-blocks and latest-transactions table css.

* Adapt Bisq pages to responsive layout.

* Remove parenthesis from fiat amout.
Fiat prive break not break on desktop.
Transaction ID align left.
Fee box skeleton width resize.

* Fix mobile table text-size.

* Fix dashboard mempool info mobile alignment.

frontend/src/app/components/address/address.component.html

@@ -1,10 +1,12 @@
 <div class="container-xl">
-  <h1 class="float-left" i18n="shared.address">Address</h1>
-  <a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
-    <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
-    <span class="d-none d-lg-inline">{{ addressString }}</span>
-  </a>
-  <app-clipboard [text]="addressString"></app-clipboard>
+  <h1 i18n="shared.address">Address</h1>
+  <div class="tx-link">
+    <a [routerLink]="['/address/' | relativeUrl, addressString]" >
+      <span class="d-inline d-lg-none">{{ addressString | shortenString : 18 }}</span>
+      <span class="d-none d-lg-inline">{{ addressString }}</span>
+    </a>
+    <app-clipboard [text]="addressString"></app-clipboard>
+  </div>
   <br>
 
   <div class="clearfix"></div>
@@ -13,7 +15,7 @@
     <div class="box">
 
       <div class="row">
-        <div class="col">
+        <div class="col-md">
           <table class="table table-borderless table-striped">
             <tbody>
               <ng-template [ngIf]="!address.electrum">
@@ -28,13 +30,13 @@
               </ng-template>
               <tr>
                 <td i18n="address.balance">Balance</td>
-                <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
+                <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="receieved - sent" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="receieved - sent"></app-fiat></span></td>
               </tr>
             </tbody>
           </table>
         </div>
         <div class="w-100 d-block d-md-none"></div>
-        <div class="col qrcode-col">
+        <div class="col-md qrcode-col">
           <div class="qr-wrapper">
             <app-qrcode [data]="address.address"></app-qrcode>
           </div>

frontend/src/app/components/address/address.component.scss

@@ -3,21 +3,94 @@
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
-  margin-right: 25px;
 }
 
-@media (min-width: 576px) {
-  .qrcode-col {
-    text-align: right;
+.qrcode-col {
+  margin: 20px auto 10px;
+  text-align: center;
+  @media (min-width: 992px){
+    margin: 0px auto 0px;
   }
 }
-@media (max-width: 575.98px) {
-  .qrcode-col {
-    text-align: center;
-  }
 
-  .qrcode-col > div {
-    margin-top: 20px;
-    margin-right: 0px;
+.fiat {
+  display: block;
+  @media (min-width: 992px){
+    display: inline-block;
+    margin-left: 10px;
+  }
+}
+
+.table {
+  tr td {
+    &:last-child {
+      text-align: right;
+      @media (min-width: 576px) {
+        text-align: left;
+      }
+    }
+  }
+}
+
+h1 {
+  margin: 0px;
+  padding: 0px;
+  @media (min-width: 576px) {
+    float: left;
+    margin-right: 10px;
+  }
+}
+
+.address-link {
+  line-height: 56px; 
+  margin-left: 0px;
+  top: -2px;
+  position: relative;  
+  @media (min-width: 768px) {
+    line-height: 69px;
+  }
+}
+
+.row{
+	flex-direction: column;
+	@media (min-width: 576px) {
+		flex-direction: row;
+	}
+}
+
+.scriptmessage {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50px;
+	@media (min-width: 576px) {
+		max-width: 200px;
+	}
+}
+
+.scriptmessage.longer {
+	max-width: 500px;
+}
+
+@media (max-width: 767.98px) {
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
+	.scriptmessage.longer {
+		max-width: 200px !important;
+	}
+
+	.details-table td:first-child {
+		white-space: pre-wrap;
+	}
+}
+
+.tx-link {
+  display: block;
+  width: 100%;
+  top: 14px;
+  position: relative;
+  @media (min-width: 768px) {
+    top: 20px;
   }
 }