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

@@ -58,11 +58,11 @@
   </div>
 
   <div>
-    <div class="float-left mt-2-5" *ngIf="showConfirmations && tx.burntFee">
-      <ng-container i18n="BSQ burnt amount">Burnt amount</ng-container>: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
+    <div class="transaction-fee" *ngIf="showConfirmations && tx.burntFee">
+      <ng-container i18n="BSQ burnt amount">Burnt amount</ng-container>: {{ tx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="extra-info"><span class="fiat"><app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span></span>
     </div>
 
-    <div class="float-right">
+    <div class="btn-container">
       <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
         <button type="button" class="btn btn-sm btn-success mt-2">
           <ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></ng-container>

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

@@ -60,10 +60,13 @@
 }
 
 .scriptmessage {
-	max-width: 280px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	vertical-align: middle;
+	max-width: 50px;
+	@media (min-width: 576px) {
+		max-width: 200px;
+	}
 }
 
 .scriptmessage.longer {
@@ -74,11 +77,81 @@
 	.mobile-bottomcol {
 		margin-top: 15px;
 	}
-
-	.scriptmessage {
-		max-width: 90px !important;
-	}
 	.scriptmessage.longer {
-		max-width: 280px !important;
+		max-width: 200px !important;
+	}
+
+	.details-table td:first-child {
+		white-space: pre-wrap;
+	}
+}
+
+
+.details-table {
+	margin-top: 5px;
+}
+
+.details-table td {
+	padding: 0.75rem;
+}
+
+.details-table td:nth-child(2) {
+	word-break: break-all;
+	white-space: normal;
+	font-family: "Courier New", Courier, monospace;
+	font-size: 12px;
+}
+
+.smaller-text {
+	font-size: 12px;
+	@media (min-width: 576px) {
+		font-size: 14px !important;
+	}
+}
+
+.longer {
+	max-width: 100% !important;
+    width: 200px;
+    display: inline-block;
+}
+
+.row{
+	flex-direction: column;
+	@media (min-width: 992px) {
+		flex-direction: row;
+	}
+}
+
+.extra-info {	
+	display: inline-table;
+	.fiat {
+		font-size: 14px;
+		display: block;
+		text-align: right;
+	}
+}
+
+.transaction-fee {
+	display: block;
+	margin: 0px auto 5px;
+	@media (min-width: 576px) {
+		display: inline-table;
+	}
+}
+
+
+.fiat {
+	margin-left: 10px;
+	font-size: 13px;
+	@media (min-width: 576px) {
+		font-size: 14px;
+	}
+}
+
+.btn-container {
+	text-align: right;
+	@media (min-width: 576px) {
+		display: inline-table;
+		float: right;
 	}
 }