From b5646d00a2c94b8082d9e52a7eeba4e1fecf2bc3 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 7 May 2020 14:02:03 +0200
Subject: [PATCH] Add fixed notifications to FormWrapper component

---
 resources/js/components/FormWrapper.vue  |  9 +++++++--
 resources/js/components/Notification.vue |  7 ++++++-
 resources/sass/app.scss                  | 10 ++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/FormWrapper.vue b/resources/js/components/FormWrapper.vue
index 8edf0c8d..0a2d31c8 100644
--- a/resources/js/components/FormWrapper.vue
+++ b/resources/js/components/FormWrapper.vue
@@ -4,8 +4,8 @@
             <h1 class="title" v-html="title" v-if="title"></h1>
             <slot />
             <p v-if="showTag">
-                <notification :message="fail" type="is-danger" v-if="fail" />
-                <notification :message="success" type="is-success" v-if="success" />
+                <notification :message="fail" type="is-danger" isFixed="hasFixedNotification" v-if="fail" />
+                <notification :message="success" type="is-success" isFixed="hasFixedNotification" v-if="success" />
             </p>
         </div>
     </div>    
@@ -42,6 +42,11 @@
                 type: String,
                 default: ''
             },
+
+            hasFixedNotification: {
+                type: Boolean,
+                default: false
+            },
         }
     }
 </script>
\ No newline at end of file
diff --git a/resources/js/components/Notification.vue b/resources/js/components/Notification.vue
index 66a3afb7..08488781 100644
--- a/resources/js/components/Notification.vue
+++ b/resources/js/components/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="notification" :class="type" v-if="show">
+    <div class="notification" :class="[type, isFixed ? 'is-fixed' : '']" v-if="show">
         <button class="delete" v-if="isDeletable" @click="close"></button>
         {{ message }}
     </div>
@@ -30,6 +30,11 @@
                 type: Boolean,
                 default: true,
             },
+
+            isFixed: {
+                type: Boolean,
+                default: false
+            }
         },
 
         methods: {
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 915855a4..1aa70a54 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -315,6 +315,16 @@ footer .field.is-grouped {
   justify-content: center;
 }
 
+.notification.is-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 0;
+  padding: 0.5rem 2.5rem 0.5rem 1.5rem;
+  text-align: center;
+}
+
 .file .tag {
   margin-left: 0.75rem;
 }