From d74677628bca92a21451eab5392c5c1e0a1bc4d4 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Mon, 19 Apr 2021 10:01:04 -0300
Subject: [PATCH] New UI for responsive navbar. (#458)

New UI for responsive navbar.
fixes #458
---
 .../master-page/master-page.component.html    |  4 +-
 .../master-page/master-page.component.scss    | 60 ++++++++++++++++---
 .../search-form/search-form.component.scss    | 45 +++++++++++++-
 .../app/dashboard/dashboard.component.html    |  2 +-
 .../app/dashboard/dashboard.component.scss    |  9 +++
 frontend/src/styles.scss                      |  1 +
 6 files changed, 109 insertions(+), 12 deletions(-)

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 084038b75..4c6112e8a 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -26,7 +26,7 @@
   </div>
 
   <div class="navbar-collapse" id="navbarCollapse">
-    <ul class="navbar-nav mr-auto pt-2 pb-2 pb-md-0 pt-md-0 {{ network.val }}">
+    <ul class="navbar-nav {{ network.val }}">
       <ng-template [ngIf]="network.val === 'bisq'" [ngIfElse]="notBisq">
         <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
           <a class="nav-link" [routerLink]="['/bisq']" (click)="collapse()"><fa-icon [icon]="['fas', 'list']" [fixedWidth]="true" i18n-title="master-page.transactions" title="Transactions"></fa-icon></a>
@@ -62,7 +62,7 @@
         <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
       </li>
     </ul>
-    <app-search-form location="top" (searchTriggered)="collapse()"></app-search-form>
+    <app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
   </div>
 </nav>
 </header>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 3c0e31490..cac4681d7 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -8,14 +8,16 @@ fa-icon {
 
 .navbar {
   z-index: 100;
+  min-height: 64px;
 }
 
 li.nav-item {
+  margin: auto 10px;
   padding-left: 10px;
   padding-right: 10px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar {
     padding: 0rem 2rem;
   }
@@ -26,17 +28,50 @@ li.nav-item {
     margin-right: 16px;
   }
   li.nav-item {
+    margin: auto 0px;
     padding: 10px;
   }
 }
 
-li.nav-item a {
-  color: #ffffff;
+.navbar-nav {
+  background: #212121;
+  bottom: 0;
+  box-shadow: 0px 0px 15px 0px #000;
+  flex-direction: row;
+  left: 0;
+  justify-content: center;
+  position: fixed;
+  width: 100%;
 }
 
-.navbar-nav {
-  flex-direction: row;
-  justify-content: center;
+@media (min-width: 992px) {
+  .navbar-nav {
+    background: transparent;
+    box-shadow: none;
+    position: relative;
+    width: auto;
+  }
+}
+
+.navbar-collapse {
+  flex-basis: auto;
+  justify-content: flex-end;
+}
+
+@media (min-width: 992px) {
+  .navbar-collapse {
+    justify-content: space-between;
+  }
+}
+
+.navbar-brand {
+  width: 60%;
+}
+
+@media (min-width: 576px) {
+  .navbar-brand {
+    width: 140px;
+  }
 }
 
 nav {
@@ -81,5 +116,16 @@ nav {
 
 .dropdown-item {
   display: flex;
-  align-items:center;
+  align-items: center;
 }
+
+@media (min-width: 992px) {
+  .search-form-container {
+    width: 100%;
+    max-width: 500px;
+    padding-left: 15px;
+  }
+}
+.navbar-dark .navbar-nav .nav-link {
+  color: #f1f1f1;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index d80a0bb16..b6aa14d04 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -5,12 +5,53 @@
   text-overflow: ellipsis;
 }
 
+form {
+  margin-top: 5px;
+}
+
+@media (min-width: 576px) {
+  form {
+    margin-top: 0px;
+    margin-left: 8px;
+  }
+}
+
+@media (min-width: 992px) {
+  form {
+    width: 100%;
+  }
+}
+
+.btn-block {
+  width: 58.55px;
+}
+
 .search-box-container {
   width: 100%;
 }
 
-@media (min-width: 992px) {
+.search-box-container input {
+  border: 0px;
+}
+
+.search-box-container .btn {
+  width: 100px;
+}
+
+@media (min-width: 768px) {
   .search-box-container {
-    width: 350px;
+    min-width: 400px;
+  }
+}
+
+@media (min-width: 992px) {
+  .search-box-container {
+    min-width: 260px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .search-box-container {
+    min-width: 300px;
   }
 }
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 60e419795..d789ed074 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -1,5 +1,5 @@
 
-<div class="container-xl mt-2">
+<div class="container-xl mt-2 dashboard-container">
 
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 931483668..c58ce1bb4 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -1,3 +1,12 @@
+.dashboard-container {
+  padding-bottom: 60px;
+}
+@media (min-width: 992px) {
+  .dashboard-container {
+    padding-bottom: 0px;
+  }
+}
+
 .card {
   background-color: #1d1f31;
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 1458aed8c..6262ebeed 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -54,6 +54,7 @@ html, body {
 
 body {
   background-color: #11131f;
+  min-width: 320px;
 }
 
 .container {