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

@@ -1,16 +1,18 @@
 <div class="container-xl">
 
-  <h1 class="float-left mr-3 mb-md-3" i18n="shared.transaction">Transaction</h1>
-
   <ng-template [ngIf]="!isLoading && !error">
 
-    <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">
+    <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
       <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
       <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
       <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
     </button>
-    <div>
-      <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]" style="line-height: 56px;">
+
+
+    <h1 i18n="shared.transaction">Transaction</h1>
+
+    <div class="tx-link">
+      <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
         <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
         <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
       </a>
@@ -18,7 +20,7 @@
     </div>
     <div class="clearfix"></div>
 
-    <div class="box">
+    <div class="box transaction-container">
       <div class="row">
         <div class="col-sm">
           <table class="table table-borderless table-striped">
@@ -56,12 +58,12 @@
               <tr>
                 <td class="td-width" i18n="BSQ burnt amount">Burnt amount</td>
                 <td>
-                  {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
+                  {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
               </tr>
               <tr>
                 <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
                 <td *ngIf="!isLoadingTx; else loadingTxFee">
-                  {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB
+                  {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol">sat/vB</span>
                   &nbsp;
                   <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
                 </td>

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

@@ -1,9 +1,144 @@
-.td-width {
-  width: 175px;
+.adjust-btn-padding {
+	padding: 0.55rem;
+}
+
+.title-block {
+	padding-top: 1px;
 }
 
 @media (max-width: 767.98px) {
-	.td-width {
-		width: 150px;
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
+}
+
+.td-width {
+	width: 150px;
+	@media (min-width: 768px) {
+		width: 175px;
+	}
+}
+
+
+h1 {
+	margin-bottom: 0;
+}
+
+.badge {
+	position: relative;
+	top: -1px;
+}
+
+.btn-small-height {
+	line-height: 1.1;
+}
+
+.arrow-green {
+	color: #1a9436;
+}
+
+.arrow-red {
+	color: #dc3545;
+}
+
+.btn-success {
+	float: right;
+	margin-bottom: 0px;
+	margin-top: 5px;
+}
+
+.tx-link {
+	display: block;
+	width: auto;
+	margin-bottom: 10px;
+    margin-left: 2px;
+	margin-top: 40px;
+    position: absolute;
+	@media (min-width: 700px) {
+	  margin-top: 14px;
+	  margin-left: 10px;
+	  position: relative;	  
+	  text-align: left;
+	  width: 100%;
+	  top: 14px;
+	  left: 10px;
+	}
+  }
+
+.container-xl {
+	margin-bottom: 40px;
+}
+
+.row{
+	flex-direction: column;
+	@media (min-width: 768px) {
+		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;
+	}
+}
+
+.fiat {
+	display: block;
+	font-size: 13px;
+	@media (min-width: 576px){
+		display: inline-block;
+		margin-left: 15px;
+		font-size: 14px;
+		text-align: left;
+	}
+}
+
+h1{
+	font-size: 1.75rem;
+    margin-top: 2px;
+	margin-bottom: 0;
+	float: left;
+    padding-bottom: 40px;
+	@media (min-width: 375px){
+		margin-top: 0px;
+		font-size: 2rem;
+	}
+	@media (min-width: 768px){
+		padding-bottom: 10px;
+	}
+}
+.transaction-container {
+	font-size: 14px;
+	@media (min-width: 576px){
+		font-size: 16px;
+	}
+	tr td {
+		&:last-child{
+			text-align: right;
+			@media (min-width: 768px){
+				text-align: left;
+			}
+		}
 	}
 }