New UI for responsive navbar. (#458)

New UI for responsive navbar. fixes #458
mempool · Apr 19, 2021 · d746776 · d746776
1 parent f0d46d6
commit d746776
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 10 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
@@ -26,7 +26,7 @@ <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n=
   </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 @@ <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n=
         <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
@@ -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%;
+}
+
+@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;
+}
diff --git 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%;
 }
 
+.search-box-container input {
+  border: 0px;
+}
+
+.search-box-container .btn {
+  width: 100px;
+}
+
+@media (min-width: 768px) {
+  .search-box-container {
+    min-width: 400px;
+  }
+}
+
 @media (min-width: 992px) {
   .search-box-container {
-    width: 350px;
+    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
@@ -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
@@ -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
@@ -54,6 +54,7 @@ html, body {
 
 body {
   background-color: #11131f;
+  min-width: 320px;
 }
 
 .container {