From 120e032c993567f127af3a77c7b984d0485926cb Mon Sep 17 00:00:00 2001
From: ewandor <ewandor@dorfsvald.net>
Date: Sun, 12 Feb 2023 20:28:18 +0100
Subject: [PATCH] displaying fash message at the bottom

---
 front/app/src/app/app.component.html          |  4 +-
 .../flashmessages.component.html              | 37 ++++++++++---------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/front/app/src/app/app.component.html b/front/app/src/app/app.component.html
index 85c4857e..1cca5c03 100644
--- a/front/app/src/app/app.component.html
+++ b/front/app/src/app/app.component.html
@@ -4,11 +4,11 @@
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
-        <sidenav></sidenav>
+        <sidenav class="sticky-top"></sidenav>
       </div>
       <div class="col py-3">
-        <flashmessages></flashmessages>
         <router-outlet></router-outlet>
+        <flashmessages></flashmessages>
       </div>
     </div>
   </div>
diff --git a/front/app/src/app/layout/flashmessages/flashmessages.component.html b/front/app/src/app/layout/flashmessages/flashmessages.component.html
index c5e3fbfd..76e969d8 100644
--- a/front/app/src/app/layout/flashmessages/flashmessages.component.html
+++ b/front/app/src/app/layout/flashmessages/flashmessages.component.html
@@ -1,18 +1,19 @@
-<ngb-toast
-  *ngFor="let flashmessage of flashmessagesService.toasts"
-  [header]="flashmessage.type" [autohide]="true" [delay]="flashmessage.delay || 1500"
-  (hiddden)="flashmessagesService.remove(flashmessage)"
->
-    <ng-container [ngSwitch]="flashmessage.type">
-        <div *ngSwitchCase="'Success'" class="alert alert-success" role="alert">
-            {{flashmessage.body}}
-        </div>
-        <div *ngSwitchCase="'Info'" class="alert alert-primary" role="alert">
-            {{flashmessage.body}}
-        </div>
-        <div *ngSwitchCase="'Error'" class="alert alert-danger" role="alert">
-            {{flashmessage.body}}
-        </div>
-    </ng-container>
-</ngb-toast>
-
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <ngb-toast
+      *ngFor="let flashmessage of flashmessagesService.toasts"
+      [header]="flashmessage.type" [autohide]="true" [delay]="flashmessage.delay || 1500"
+      (hiddden)="flashmessagesService.remove(flashmessage)"
+    >
+        <ng-container [ngSwitch]="flashmessage.type">
+            <div *ngSwitchCase="'Success'" class="alert alert-success" role="alert">
+                {{flashmessage.body}}
+            </div>
+            <div *ngSwitchCase="'Info'" class="alert alert-primary" role="alert">
+                {{flashmessage.body}}
+            </div>
+            <div *ngSwitchCase="'Error'" class="alert alert-danger" role="alert">
+                {{flashmessage.body}}
+            </div>
+        </ng-container>
+    </ngb-toast>
+</div>