fixed the navbar in responsive layout

abiolaah · Apr 2, 2023 · 4327be1 · 4327be1
1 parent d54a1e5
commit 4327be1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,9 +1,9 @@
 <div class="m-auto">
     <div nz-row nzGutter="0" nzAlign="middle">
-        <div nz-col nzXs="12" nzSm="12" nzMd="8" nzLg="8" nzXl="8">
+        <div nz-col [nzXs]="8" [nzSm]="8" [nzMd]="8" [nzLg]="8" [nzXl]="8">
             <img routerLink="/" class="img-responsive pointer logo" src="/assets/cansurvey-logo.jpg" alt="Logo">
         </div>
-        <div nz-col nzXs="12" nzSm="12" nzMd="16" nzLg="16" nzXl="16" class="text-right">
+        <div nz-col [nzXs]="0" [nzSm]="0" [nzMd]="16" [nzLg]="16" [nzXl]="16" class="text-right">
             <button *ngIf="!auth?.user" (click)="register()" class="m-r-10" nz-button nzType="text">
                 <span nz-icon nzType="carry-out" nzTheme="outline"></span> Register
             </button>
@@ -23,5 +23,25 @@
                 <span nz-icon nzType="logout" nzTheme="outline"></span> Logout
             </button>
         </div>
+        <div nz-col [nzXs]="16" [nzSm]="16" [nzMd]="0" [nzLg]="0" [nzXl]="0" class="text-right">
+            <button *ngIf="!auth?.user" (click)="register()" class="m-r-10" nz-button nzType="text" nz-tooltip nzTooltipTitle="Register">
+                <span nz-icon nzType="carry-out" nzTheme="outline"></span>
+            </button>
+            <button *ngIf="!auth?.user" (click)="login()" class="m-r-10" nz-button nzType="text" nz-tooltip nzTooltipTitle="Login">
+                <span nz-icon nzType="login" nzTheme="outline"></span>
+            </button>
+            <button *ngIf="auth?.user" routerLink="/" class="m-r-10" nz-button nzType="text" nz-tooltip nzTooltipTitle="Home">
+                <span nz-icon nzType="home" nzTheme="outline"></span>
+            </button>
+            <button *ngIf="auth?.user" routerLink="/dashboard" class="m-r-10" nz-button nzType="text" nz-tooltip nzTooltipTitle="Dashboard">
+                <span nz-icon nzType="dashboard" nzTheme="outline"></span>
+            </button>
+            <button *ngIf="auth.user" routerLink="/manage-users" class="m-r-10" nz-button nzType="text" [disabled]="auth.userProfile?.role != 'admin'" nz-tooltip nzTooltipTitle="User">
+                <span nz-icon nzType="user" nzTheme="outline"></span>
+            </button>
+            <button *ngIf="auth?.user" (click)="logout()" class="m-r-10" nz-button nzType="text" nz-tooltip nzTooltipTitle="Logout">
+                <span nz-icon nzType="logout" nzTheme="outline"></span>
+            </button>
+        </div>
     </div>
 </div>
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -16,10 +16,10 @@ <h3>Existing Survey <span class="text-small">(Ordered by created date)</span></h
             <div *ngFor="let survey of surveys;" nz-col [nzSpan]="24">
                 <nz-card class="w-100 m-b-10" nzHoverable [routerLink]="'/survey/' + survey?.id">
                     <div nz-row nzGutter="8">
-                      <div nz-col [nzXs]="8" [nzSm]="8" [nzMd]="8" [nzLg]="4" [nzXl]="4">
+                      <div nz-col [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="4" [nzXl]="4">
                         <img class="img-responsive center-block" [src]="'/assets/cansurvey-logo.jpg'" />
                       </div>
-                      <div nz-col [nzXs]="16" [nzSm]="16" [nzMd]="16" [nzLg]="20" [nzXl]="20">
+                      <div nz-col [nzXs]="24" [nzSm]="16" [nzMd]="16" [nzLg]="20" [nzXl]="20">
                         <h2>{{ survey?.title || "Untitled title" }}</h2>
                         <p>{{ survey?.desc || "" }}</p>
                         <div nz-row nzGutter="8">