Add fixed notifications to FormWrapper component

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>

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: {

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;
 }