alerts-ui: Add collapsible effect

AlexITC · Apr 22, 2018 · 7e19294 · 7e19294
1 parent e749195
commit 7e19294
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 8 deletions.
diff --git a/alerts-ui/src/app/app-navbar/app-navbar.component.css b/alerts-ui/src/app/app-navbar/app-navbar.component.css
@@ -0,0 +1,3 @@
+.left-padding {
+  padding-left: 15px;
+}
diff --git a/alerts-ui/src/app/app-navbar/app-navbar.component.html b/alerts-ui/src/app/app-navbar/app-navbar.component.html
@@ -1,6 +1,13 @@
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container-fluid">
     <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" [attr.aria-expanded]="!collapsed"
+        (click)="toggleCollapse()" [ngClass]="{'collapsed': collapsed}">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
       <a routerLink="/" class="navbar-brand">
         <img src="assets/bitcoin.png" alt="Logo">
       </a>
@@ -9,7 +16,7 @@
       </a>
     </div>
 
-    <div class="collapse navbar-collapse">
+    <div class="collapse navbar-collapse" id="navbar-collapse" [ngClass]="{'in': !collapsed}">
       <ul class="nav navbar-nav">
         <li *ngFor="let tab of tabs" [ngClass]="{ 'active': isSelected(tab.path) }">
           <!-- TODO: check why [hidden] attribute is not working -->
@@ -19,7 +26,7 @@
 
       <ul class="nav navbar-nav navbar-right">
         <li *ngIf="isAuthenticated()">
-          <p class="navbar-text">{{getAuthenticatedUser()}}</p>
+          <p class="navbar-text left-padding">{{getAuthenticatedUser()}}</p>
         </li>
         <li *ngIf="isAuthenticated()">
           <a href="#" (click)="logout()">{{'label.logout' | translate}}</a>
@@ -32,7 +39,7 @@
           <a routerLink="/login">{{'label.login' | translate}}</a>
         </li>
         <!-- language -->
-        <li class="dropdown" dropdown>
+        <li class="dropdown left-padding" dropdown>
           <div class="navbar-form">
             <div class="btn-group" dropdown>
               <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">

diff --git a/alerts-ui/src/app/app-navbar/app-navbar.component.ts b/alerts-ui/src/app/app-navbar/app-navbar.component.ts
@@ -23,6 +23,8 @@ export class AppNavbarComponent implements OnInit {
     { label: 'label.newCurrencyAlerts', path: '/new-currency-alerts', authRequired: true }
   ];
 
+  public collapsed = true;
+
   constructor(
     private authService: AuthService,
     private navigatorService: NavigatorService,
@@ -36,6 +38,10 @@ export class AppNavbarComponent implements OnInit {
   ngOnInit() {
   }
 
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+  }
+
   /* tabs */
   isSelected(path: string): boolean {
     if (!path.startsWith('/')) {

diff --git a/alerts-ui/src/app/home/home.component.css b/alerts-ui/src/app/home/home.component.css
@@ -1,4 +1,3 @@
-
 .home-description {
   font-weight: bold;
 }
@@ -15,4 +14,12 @@
 
 #home-supported-exchanges {
   font-size: 20px;
-}
+}
+
+.max-width {
+  max-width: 100%;
+}
+
+.container {
+  padding-top: 70px;
+}
diff --git a/alerts-ui/src/app/home/home.component.html b/alerts-ui/src/app/home/home.component.html
@@ -47,13 +47,13 @@ <h2>{{'home.descripion' | translate}}</h2>
     <label id="home-examples">{{'home.examples' | translate}}</label>
     <div class="panel panel-default">
       <div class="panel-body">
-        <img src="assets/new-currencies-email.png" alt="New Currency Email">
+        <img class="max-width" src="assets/new-currencies-email.png" alt="New Currency Email">
       </div>
       <div class="panel-footer">{{'home.newCurrenciesAlertExample' | translate}}</div>
     </div>
     <div class="panel panel-default">
       <div class="panel-body">
-        <img src="assets/price-alert-email.png" alt="Price Alert Email">
+        <img class="max-width" src="assets/price-alert-email.png" alt="Price Alert Email">
       </div>
       <div class="panel-footer">{{'home.priceAlertExample' | translate}}</div>
     </div>