Fix title styles.

frontend/src/app/assets/assets.component.html

@@ -1,11 +1,11 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="Registered assets page header">Registered assets</h1>
-  <br>
-
+  <div class="title-asset">
+    <h1 i18n="Registered assets page header">Registered assets</h1>
+  </div>
   <div class="clearfix"></div>
 
   <form [formGroup]="searchForm" class="form-inline">
-    <div class="input-group m-2">
+    <div class="input-group mb-2">
       <input style="width: 250px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
       <div class="input-group-append">
         <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
@@ -27,7 +27,7 @@
           <td>{{ asset.ticker }}</td>
           <td class="d-none d-md-block">{{ asset.entity && asset.entity.domain }}</td>
           <td><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
-        </tr> 
+        </tr>
       </tbody>
     </table>
 
@@ -52,7 +52,7 @@
           <td><span class="skeleton-loader"></span></td>
           <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
           <td><span class="skeleton-loader"></span></td>
-        </tr> 
+        </tr>
       </tbody>
     </table>
 
@@ -68,4 +68,4 @@
 
 </div>
 
-<br>
+<br>

frontend/src/app/assets/assets.component.scss

@@ -3,4 +3,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}
+.title-asset {
+  h1 {
+    line-height: 1;
+    margin: 0px;
+    padding-bottom: 10px;
+  }
+}

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

@@ -51,12 +51,13 @@
     </div>
 
     <br>
-
-    <h2>
-      <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
-      <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
-      <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
-    </h2>
+    <div class="title-tx">
+      <h2>
+        <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
+        <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
+        <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
+      </h2>
+    </div>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 

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

@@ -74,13 +74,20 @@ h1 {
 
 .tx-link {
   display: block;
-  width: 100%;
-  top: 12px;
+  height: 100%;
+  top: 9px;
   position: relative;
-  @media (min-width: 576px) {
-    top: 14px;
-  }
+	@media (min-width: 576px) {
+    top: 11px;
+	}
   @media (min-width: 768px) {
-    top: 20px;
+    top: 17px;
+  }
+}
+
+.title-tx {
+  h2 {
+    line-height: 1;
+    margin-bottom: 10px;
   }
 }

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

@@ -75,11 +75,13 @@
 
     <br>
 
-    <h2>
-      <ng-template [ngIf]="transactions?.length" i18n="asset.M_of_N">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }}&nbsp;</ng-template>
-      <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset" i18n="Liquid native asset transactions title">Peg In/Out and Burn Transactions</ng-template>
-      <ng-template #defaultAsset i18n="Default asset transactions title">Issuance and Burn Transactions</ng-template>
-    </h2>
+    <div class="title-tx">
+      <h2>
+        <ng-template [ngIf]="transactions?.length" i18n="asset.M_of_N">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }}&nbsp;</ng-template>
+        <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset" i18n="Liquid native asset transactions title">Peg In/Out and Burn Transactions</ng-template>
+        <ng-template #defaultAsset i18n="Default asset transactions title">Issuance and Burn Transactions</ng-template>
+      </h2>
+    </div>
 
     <app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
 

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

@@ -33,10 +33,20 @@ h1 {
 
 .tx-link {
   display: block;
-  width: 100%;
-  top: 14px;
+  height: 100%;
+  top: 9px;
   position: relative;
+	@media (min-width: 576px) {
+    top: 11px;
+	}
   @media (min-width: 768px) {
-    top: 20px;
+    top: 17px;
   }
 }
+.title-tx {
+  h2 {
+    line-height: 1;
+    margin-bottom: 10px;
+  }
+}
+

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

@@ -162,7 +162,7 @@
     </div>
 
     <div #blockTxTitle id="block-tx-title" class="block-tx-title">
-      <h2 class="float-left">
+      <h2>
         <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
         <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
         <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>

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

@@ -40,10 +40,7 @@
 h1 {
   margin: 0px;
   padding: 0px;
-  @media (min-width: 576px) {
-    float: left;
-    margin-right: 10px;
-  }
+  line-height: 1;
   a {
     &:hover, &:focus{
       text-decoration: none;;
@@ -87,32 +84,23 @@ h1 {
 }
 
 .block-tx-title {
-  padding-top: 10px;
-  display: block;
-  text-align: right;
-  margin-top: -30px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-top: -15px;
+  position: relative;
   @media (min-width: 550px) {
-    margin-top: 0px;
-    padding-top: 10px;
+    margin-top: 1rem;
+    flex-direction: row;
   }
   h2 {
-    display: inline-block;
-    float: left;
-    line-height: 1.6;
+    line-height: 1;
     margin: 0;
-    margin-bottom: -15px;
-    padding-right: 10px;
-    padding-top: 15px;
     position: relative;
-    top: -22px;
-    width: auto;
+    padding-bottom: 10px;
     @media (min-width: 550px) {
-      padding-top: 0px;
-      top: 0px;
-    }
-    @media (min-width: 768px) {
-      padding-top: 5px;
-      line-height: 1;
+      padding-bottom: 0px;
+      align-self: end;
     }
   }
 }
@@ -122,7 +110,7 @@ h1 {
 }
 
 .next-previous-blocks {
-  font-size: 30px;
+  font-size: 28px;
   display: inline-block;
   @media (min-width: 768px) {
     font-size: 36px;
@@ -138,7 +126,7 @@ h1 {
 }
 
 .disable {
-  font-size: 30px;
+  font-size: 28px;
   color: #393e5c73;
   @media (min-width: 768px) {
     font-size: 36px;

frontend/src/app/components/mempool-block/mempool-block.component.html

@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="mempoolBlock$ | async as mempoolBlock">
 
   <div class="title-block">
-    <h1 class="float-left">{{ ordinal$ | async }}</h1>
+    <h1>{{ ordinal$ | async }}</h1>
     <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right">&#10005;</button>
   </div>
 

frontend/src/app/components/mempool-block/mempool-block.component.scss

@@ -24,9 +24,9 @@
 h1 {
   margin: 0px;
   padding: 0px;
+  line-height: 1;
   @media (min-width: 576px) {
     float: left;
-    margin-right: 10px;
   }
 }
 

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

@@ -192,15 +192,19 @@
 
     <br>
 
-    <h2 class="float-left" i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+    <div class="title float-left">
+      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+    </div>
 
-    <button type="button" class="btn btn-outline-info btn-sm float-right mr-1 mt-0 mt-md-2" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+    <button type="button" class="btn btn-outline-info btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
 
     <div class="clearfix"></div>
 
     <app-transactions-list #txList [transactions]="[tx]" [errorUnblinded]="errorUnblinded" [outputIndex]="outputIndex" [transactionPage]="true"></app-transactions-list>
 
-    <h2 class="text-left" i18n="transaction.details">Details</h2>
+    <div class="title">
+      <h2 i18n="transaction.details">Details</h2>
+    </div>
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>

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

@@ -21,28 +21,29 @@
 }
 
 .title-block {
-  height: 100px;
   flex-direction: column;
-  h1 {
-    margin-bottom: 0rem;
-  }
-	@media (min-width: 650px) {
-    height: 80px;
+  @media (min-width: 650px) {
     flex-direction: row;
-    h1 {
-      margin-bottom: 1rem;
-    }
-	}
+  }
+  h1 {
+    margin: 0rem;
+    line-height: 1;
+  }
 }
 .tx-link {
   display: flex;
+  margin-bottom: 0px;
+  margin-top: 8px;
 	@media (min-width: 650px) {
-    margin-left: 15px;
     align-self: end;
-    margin-bottom: 9px;
+    margin-left: 15px;
+    margin-top: 0px;
+    margin-bottom: -3px;
 	}
 	@media (min-width: 768px) {
-    margin-bottom: 2px;
+    margin-bottom: 0px;
+    top: 1px;
+    position: relative;
 	}
 }
 
@@ -71,10 +72,6 @@
 	color: #dc3545;
 }
 
-.btn {
-	margin-top: 5px;
-}
-
 .container-xl {
 	margin-bottom: 40px;
 }
@@ -123,9 +120,26 @@
 	}
 }
 
-.effective-fee-container{
+.effective-fee-container {
 	display: block;
 	@media (min-width: 768px){
 		display: inline-block;
 	}
 }
+
+
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 10px;
+  }
+}
+
+.btn-outline-info {
+  margin-top: -10px;
+	@media (min-width: 768px){
+		display: inline-block;
+    margin-top: 0px;
+	}
+}

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -4,22 +4,22 @@
 }
 .green, .grey, .red {
 	font-size: 16px;
-    top: -2px;
+  top: -2px;
 	position: relative;
 	@media( min-width: 576px){
 		font-size: 19px;
 	}
 }
 .green {
-  	color:#28a745;
+  color:#28a745;
 }
 
 .red {
-  	color:#dc3545;
+  color:#dc3545;
 }
 
 .grey {
-  	color:#6c757d;
+  color:#6c757d;
 }
 
 .mobile-bottomcol {
@@ -43,7 +43,7 @@
 	}
 }
 
-.extra-info {	
+.extra-info {
 	display: none;
 	@media (min-width: 576px) {
 		display: inline-table;
@@ -75,11 +75,11 @@
 	}
 }
 .fiat {
-	margin-left: 10px; 
+	margin-left: 10px;
 }
 
 .tx-page-container {
-	padding: 10px; 
+	padding: 10px;
 	margin-bottom: 10px;
 	margin-top: 10px;
 }
@@ -112,6 +112,10 @@
 	width: 100%;
 	color: #d43131;
 	text-align: right;
-    margin-top: 0px;
-    margin-bottom: 10px;
-}
+  margin-top: 0px;
+  margin-bottom: 10px;
+}
+
+h2 {
+  line-height: 1;
+}

frontend/src/styles.scss

@@ -197,18 +197,21 @@ body {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 80px;
 }
 
 .title-address, .title-asset {
   color: #FFF;
-  padding-top: 20px;
   padding-bottom: 10px;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 80px;
-  margin-top: -20px;
+  flex-direction: column;
+  margin-bottom: 7px;
+  @media (min-width: 576px) {
+    flex-direction: row;
+    margin-bottom: 0px;
+  }
+  h1 {
+    line-height: 1;
+  }
 }
 
 .smaller-text {
@@ -300,7 +303,7 @@ html:lang(ru) .card-title {
         left: -1px;
         position: relative;
       }
-      &:nth-child(4){
+      &:nth-child(4) {
         display: none;
       }
     }
@@ -391,10 +394,10 @@ html:lang(ru) .card-title {
         left: -1px;
         position: relative;
       }
-      &:nth-child(4){
+      &:nth-child(4) {
         display: none;
       }
-      &:nth-child(5){
+      &:nth-child(5) {
         display: none;
       }
     }
@@ -469,10 +472,10 @@ html:lang(ru) .card-title {
 
   thead {
     th {
-      &:nth-child(4){
+      &:nth-child(4) {
         display: table-cell;
       }
-      &:nth-child(5){
+      &:nth-child(5) {
         display: table-cell;
       }
     }
@@ -664,7 +667,7 @@ h1, h2, h3 {
   }
 }
 
-.flex{
+.flex {
 	display: flex;
 }
 
@@ -685,125 +688,124 @@ th {
 .reserved { color: #ff8c00 }
 
 .rtl-layout {
-    .fa-arrow-alt-circle-right {
-        @extend .fa-arrow-alt-circle-right;
-        -webkit-transform: scaleX(-1);
-        transform: scaleX(-1);
-    }
+  .fa-arrow-alt-circle-right {
+    @extend .fa-arrow-alt-circle-right;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+  }
 
-    .table td {
-        text-align: right;
-        .fiat {
-          @extend .fiat;
-          margin-left: 0px !important;
-          margin-right: 15px;
-        }
+  .table td {
+    text-align: right;
+    .fiat {
+      @extend .fiat;
+      margin-left: 0px !important;
+      margin-right: 15px;
     }
+  }
 
-    .table th {
-        text-align: right;
+  .table th {
+    text-align: right;
+  }
+
+  .title-block {
+    text-align: right;
+  }
+
+  .mr-3 {
+    @extend .ml-3;
+    margin-right: 0 !important;
+  }
+
+  .mr-1 {
+      @extend .ml-1;
+  }
+
+  .float-left {
+    float: right !important;
+  }
+
+  .float-right {
+    float: left !important;
+  }
+
+  .text-left {
+    text-align: right !important;
+  }
+
+  .text-right {
+    text-align: left !important;
+  }
+
+  .bitcoin-block {
+      direction: rtl;
+  }
+
+  .next-previous-blocks {
+    @extend .next-previous-blocks;
+    direction: ltr;
+  }
+
+  .tx-link {
+    @extend .tx-link;
+    margin-left: 0px;
+    margin-right: 10px;
+  }
+
+  .pagination-container {
+    @extend .pagination-container;
+    ul {
+      @extend ul;
+      padding-left: 0px;
+      padding-right: 5px;
     }
+  }
 
-    .title-block {
-        text-align: right;
+  .search-box-container {
+    @extend .search-box-container;
+    margin-right: 0 !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .code {
+    @extend .code;
+    text-align: left !important;
+    direction: ltr;
+    .subtitle {
+      @extend .subtitle;
+      direction: rtl;
+      text-align: right !important;
     }
+  }
 
-    .mr-3 {
-        @extend .ml-3;
-        margin-right: 0 !important;
-    }
-
-    .mr-1 {
-        @extend .ml-1;
-    }
-
-    .float-left {
-        float: right !important;
-    }
-
-    .float-right {
-        float: left !important;
-    }
-
-    .text-left {
-        text-align: right !important;
-    }
-
-    .text-right {
-        text-align: left !important;
-    }
-
-    .bitcoin-block {
-        direction: rtl;
-    }
-
-    .next-previous-blocks {
-      @extend .next-previous-blocks;
+  .container-graph {
+    @extend .container-graph;
+    .formRadioGroup {
+      @extend .formRadioGroup;
       direction: ltr;
     }
+  }
 
-    .tx-link {
-      @extend .tx-link;
-      margin-left: 0px;
+  .mempool-graph {
+    @extend .mempool-graph;
+    direction: ltr;
+  }
+  .title-block {
+    .title {
+      float: right;
+    }
+  }
+  .container-buttons {
+    float: left !important;
+    width: auto !important;
+  }
+  .tx-link {
+    margin-right: 0px;
+    @media (min-width: 768px) {
       margin-right: 10px;
     }
-
-    .pagination-container {
-      @extend .pagination-container;
-      ul {
-        @extend ul;
-        padding-left: 0px;
-        padding-right: 5px;
-      }
-    }
-
-    .search-box-container {
-      @extend .search-box-container;
-      margin-right: 0 !important;
-      margin-left: 0.5rem !important;
-    }
-
-    .code {
-      @extend .code;
-      text-align: left !important;
-      direction: ltr;
-      .subtitle {
-        @extend .subtitle;
-        direction: rtl;
-        text-align: right !important;
-      }
-    }
-
-    .container-graph {
-      @extend .container-graph;
-      .formRadioGroup {
-        @extend .formRadioGroup;
-        direction: ltr;
-      }
-    }
-
-    .mempool-graph {
-      @extend .mempool-graph;
-      direction: ltr;
-    }
-    .title-block {
-      .title {
-        float: right;
-      }
-    }
-    .container-buttons {
-      float: left !important;
-      width: auto !important;
-    }
-    .tx-link {
-      margin-right: 0px;
-      @media (min-width: 768px) {
-        margin-right: 10px;
-      }
-    }
+  }
 }
 
-
 .scriptmessage {
 	overflow: hidden;
 	display: inline-block;
@@ -880,7 +882,7 @@ th {
       padding: 0;
     }
 
-    .collapsed{
+    .collapsed {
       background-color: #2d3348;
       color: #1bd8f4;
     }