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/bisq/bisq-address/bisq-address.component.html

@@ -1,10 +1,12 @@
 <div class="container-xl">
-  <h1 style="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 : 24 }}</span>
-    <span class="d-none d-lg-inline">{{ addressString }}</span>
-  </a>
-  <app-clipboard [text]="addressString"></app-clipboard>
+  <h1 i18n="shared.address">Address</h1>
+  <span class="address-link">
+    <a  [routerLink]="['/address/' | relativeUrl, addressString]">
+      <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
+      <span class="d-none d-lg-inline">{{ addressString }}</span>
+    </a>
+    <app-clipboard [text]="addressString"></app-clipboard>
+  </span>
   <br>
 
   <div class="clearfix"></div>
@@ -13,26 +15,26 @@
     <div class="box">
 
       <div class="row">
-        <div class="col">
+        <div class="col-md">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
                 <td i18n="address.total-received">Total received</td>
-                <td>{{ totalReceived / 100 | number: '1.2-2' }} BSQ</td>
+                <td>{{ totalReceived / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
               </tr>
               <tr>
                 <td i18n="address.total-sent">Total sent</td>
-                <td>{{ totalSent / 100 | number: '1.2-2' }} BSQ</td>
+                <td>{{ totalSent / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span></td>
               </tr>
               <tr>
                 <td i18n="address.balance">Balance</td>
-                <td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount>)</td>
+                <td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount></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]="addressString"></app-qrcode>
           </div>

frontend/src/app/bisq/bisq-address/bisq-address.component.scss

@@ -3,21 +3,91 @@
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
-  margin-right: 25px;
 }
 
-@media (min-width: 576px) {
-  .qrcode-col {
-    text-align: right;
-  }
+.qrcode-col {
+  text-align: center;
 }
-@media (max-width: 575.98px) {
-  .qrcode-col {
+
+.qrcode-col > div {
+  margin: 20px auto 5px;
+  @media (min-width: 768px) {
     text-align: center;
+    margin: auto;
   }
+}
 
-  .qrcode-col > div {
-    margin-top: 20px;
-    margin-right: 0px;
+.fiat {
+  display: block;
+  font-size: 13px;
+  @media (min-width: 768px) {
+    display: inline-block;
+    font-size: 14px;
+    margin-left: 10px;
   }
+}
+.table {
+  tr td {
+    &:last-child {
+      text-align: right;
+      @media (min-width: 768px) {
+        text-align: left;
+      }
+    }
+  }
+}
+
+h1 {
+  margin: 0px;
+  padding: 0px;
+  @media (min-width: 576px) {
+    float: left;
+    margin-right: 10px;
+  }
+}
+
+.address-link {
+  line-height: 26px;
+  margin-left: 0px;
+  top: 14px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  @media (min-width: 768px) {
+    line-height: 38px;
+  }
+}
+
+.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;
+	}
 }