fix navbar

Author: SergeyPirogov

src/app/episode-details/episode-details.component.html

@@ -61,7 +61,7 @@ <h2>{{episode.name}}</h2>
             <td *ngIf="currentUser.isAdmin" class="control-block">
                 <button type="button" class="btn btn-outline-danger btn-sm item" (click)="editTheme(theme)">Edit</button>
                 <button type="button" class="btn btn-outline-info btn-sm item" (click)="unlinkThemes(episode.id, theme.id)">Unlink</button>
-            </td>  
+            </td>
           </tr>
           </tbody>
         </table>

src/app/episode-list/episode-list.component.html

@@ -18,8 +18,8 @@
             </div>
         </form>
 
-        <ul *ngFor="let episode of episodes" class="list-group">
-          <li class="list-group-item d-flex justify-content-between align-items-center" [ngClass]="{'active': episode?.id == selectedEpisode?.id}">
+        <ul class="list-group mb-4">
+          <li *ngFor="let episode of episodes"  class="mb-2 list-group-item d-flex justify-content-between align-items-center" [ngClass]="{'active': episode?.id == selectedEpisode?.id}">
             <span (click)="onSelect(episode)" class="episode-name justify-content-between"> 
               {{ episode.name }}
               <span class="badge badge-light badge-pill">{{ (episode.themeList | filter: true).length }}/{{ episode.themeList.length }}</span> 
@@ -28,7 +28,6 @@
               <i style="color: red" class="fa fa-remove"></i>
             </a>
           </li>
-      </ul> 
+        </ul> 
     </div>
-  
   </div>

src/app/ui/header/header.component.css

@@ -1,3 +1,11 @@
 .nav-button {
     margin-right: 10px;
+}
+
+a.user_name {
+    color: darkgray
+}
+
+.custom {
+    width: 85px !important;
 }

src/app/ui/header/header.component.html

@@ -1,17 +1,26 @@
-<nav class="navbar navbar-dark bg-dark mb-2">
+<nav class="navbar navbar-dark navbar-expand-md bg-dark mb-2">
+
     <a class="navbar-brand" href="/">QAGuild</a>
-    <div class="navbar-expand mr-auto">
-      <div class="navbar-nav">
-          <button *ngIf="isLogged()" type="button" class="btn btn-outline-light mx-2" (click)="goHome()">Home</button>
-          <a href="/patrons-list" *ngIf="isLogged() && isAdmin()" role="button" class="btn btn-outline-light mx-2" (click)="patronsList()">Patrons</a>
-          <button *ngIf="isLogged() && isAdmin()" type="button" class="btn btn-outline-light mx-2" (click)="users()">Users</button>
-          <button *ngIf="isLogged()" type="button" class="btn btn-outline-light mx-2" (click)="topics()">Topics</button>
-      </div>
-    </div>
-    <div class="navbar-expand ml-auto navbar-nav">
-      <div class="navbar-nav">
-        <a *ngIf="isLogged()" class="nav-item nav-link">{{ getCurrentUserName() }}</a>
-        <button *ngIf="isLogged()" type="button" class="btn btn-outline-light mx-2" (click)="logout()">Logout</button>
-      </div>
+    
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+            <li class="nav-item">
+              <button *ngIf="isLogged()" type="button" class="custom btn btn-outline-light mx-1 m-1" (click)="goHome()">Home</button>
+            </li>
+            <li class="nav-item">
+                <a href="/patrons-list" *ngIf="isLogged() && isAdmin()" role="button" class="custom btn btn-outline-light mx-1 m-1" (click)="patronsList()">Patrons</a>
+            </li>
+            <li class="nav-item">
+                <button *ngIf="isLogged() && isAdmin()" type="button" class="custom btn btn-outline-light mx-1 m-1" (click)="users()">Users</button>
+            </li>
+            <li class="nav-item">
+                <button *ngIf="isLogged()" type="button" class="custom btn btn-outline-light mx-1 m-1" (click)="topics()">Topics</button>
+            </li>
+      </ul>
+      <button *ngIf="isLogged()" type="button" class="custom btn btn-outline-light mx-1 m-1" (click)="logout()">Logout</button>
     </div>
   </nav>

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:5000"
+  apiUrl: "https://qaguild.online/api"
 };
 
 /*