From 292bab200ed18bb7c8186b66305536865025c17a Mon Sep 17 00:00:00 2001
From: Priyansh <43826321+priyanshiiit@users.noreply.github.com>
Date: Wed, 18 Aug 2021 21:48:12 +0530
Subject: [PATCH] Updated mobile  view for dropdown (#717)

Dropdown menu with dynamic positioning
---
 .../bisq-master-page/bisq-master-page.component.html       | 4 ++--
 .../bisq-master-page/bisq-master-page.component.ts         | 7 ++++++-
 .../liquid-master-page/liquid-master-page.component.html   | 4 ++--
 .../liquid-master-page/liquid-master-page.component.ts     | 4 ++++
 .../app/components/master-page/master-page.component.html  | 4 ++--
 .../app/components/master-page/master-page.component.ts    | 4 ++++
 6 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
index 44a3bc178..9904b41c3 100644
--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
@@ -10,11 +10,11 @@
     </ng-container>
   </a>
 
-  <div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+  <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
       <img src="./resources/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
-    <div ngbDropdownMenu>
+    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
       <a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
       <a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
       <a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
index 4d828dbac..4bb21a414 100644
--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
@@ -11,7 +11,8 @@ export class BisqMasterPageComponent implements OnInit {
   connectionState$: Observable<number>;
   navCollapsed = false;
   env: Env;
-
+  isMobile = window.innerWidth <= 767.98;
+  
   constructor(
     private stateService: StateService,
   ) { }
@@ -24,4 +25,8 @@ export class BisqMasterPageComponent implements OnInit {
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
+
+  onResize(event: any) {
+    this.isMobile = window.innerWidth <= 767.98;
+  }
 }
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index c2710cf3a..02a7adeca 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -10,11 +10,11 @@
     </ng-container>
   </a>
 
-  <div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+  <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
       <img src="./resources/liquid-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
-    <div ngbDropdownMenu>
+    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
       <a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
       <a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
       <a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
index 1b9e72e4f..4d495c34e 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
@@ -26,4 +26,8 @@ export class LiquidMasterPageComponent implements OnInit {
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
+
+  onResize(event: any) {
+    this.isMobile = window.innerWidth <= 767.98;
+  }
 }
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 2eb6fd0df..6e6379f49 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -11,11 +11,11 @@
     </ng-container>
   </a>
 
-  <div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+  <div (window:resize)="onResize($event)" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
       <img src="./resources/{{ network.val === '' ? 'bitcoin' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
-    <div ngbDropdownMenu>
+    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
       <button ngbDropdownItem class="mainnet" routerLink="/"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</button>
       <button ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</button>
       <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index d8fb7c1b3..32466afa7 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -28,4 +28,8 @@ export class MasterPageComponent implements OnInit {
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
+
+  onResize(event: any) {
+    this.isMobile = window.innerWidth <= 767.98;
+  }
 }