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/statistics/chartist.component.scss

@@ -0,0 +1,6 @@
+.ct-legend{
+    top: 130px;
+    @media (min-width: 653px) {
+        top: 90px;
+    }
+}

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

@@ -1,21 +1,17 @@
-<div class="container-xl" style="max-width: 100%;">
-
-  <div class="row">
-    <div class="col-lg-12" *ngIf="loading">
+<div class="container-graph">
+  <div>
+    <div *ngIf="loading">
       <div class="text-center">
         <h3 i18n="statistics.loading-graphs">Loading graphs...</h3>
         <br>
         <div class="spinner-border text-light"></div>
       </div>
     </div>
-
-    <div class="col-lg-12">
-
+    <div>
       <div class="card mb-3" *ngIf="mempoolStats.length">
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-
-          <form [formGroup]="radioGroupForm" style="float: right;" (click)="saveGraphPreference()">
+          <form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
             <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
@@ -64,11 +60,8 @@
               [options]="transactionsWeightPerSecondOptions">
             </app-chartist>
           </div>
-  
         </div>
       </div>
     </div>
-
   </div>
-
 </div>

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

@@ -1,7 +1,13 @@
+.container-graph {
+  padding: 0px 15px;
+}
+
 .card-header {
   border-bottom: 0;
-  background-color: none;
-  font-size: 20px;
+  font-size: 18px;
+  @media (min-width: 465px) {
+    font-size: 20px;
+  }
 }
 
 .card {
@@ -15,12 +21,23 @@
   margin-right: 10px;
 }
 
-@media (max-width: 767.98px) {
- .container-xl {
-    padding: 0;
-  }
-  .card-body {
+.card-body {
+  @media (max-width: 767.98px) {
     padding-left: 0;
     padding-right: 0;
   }
 }
+
+.formRadioGroup{
+  margin-top: 6px;
+  @media (min-width: 653px) {
+    float: right;
+    margin-top: 0px;
+  }
+  .btn-sm {
+    font-size: 10px;
+    @media (min-width: 768px) {
+      font-size: 14px;
+    }
+  }
+}