extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-04-02 20:06:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add fixed notifications to FormWrapper component

Browse Source
This commit is contained in:
Bubka 2020-05-07 14:02:03 +02:00
parent 9963bdea41
commit b5646d00a2
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/FormWrapper.vue
View File

@ -4,8 +4,8 @@
<h1 class="title" v-html="title" v-if="title"></h1> <h1 class="title" v-html="title" v-if="title"></h1>
<slot /> <slot />
<p v-if="showTag"> <p v-if="showTag">
<notification :message="fail" type="is-danger" v-if="fail" /> <notification :message="fail" type="is-danger" isFixed="hasFixedNotification" v-if="fail" />
<notification :message="success" type="is-success" v-if="success" /> <notification :message="success" type="is-success" isFixed="hasFixedNotification" v-if="success" />
</p> </p>
</div> </div>
</div> </div>
@ -42,6 +42,11 @@
type: String, type: String,
default: '' default: ''
}, },
hasFixedNotification: {
type: Boolean,
default: false
},
} }
} }
</script> </script>

7
resources/js/components/Notification.vue
View File

@ -1,5 +1,5 @@
<template> <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> <button class="delete" v-if="isDeletable" @click="close"></button>
{{ message }} {{ message }}
</div> </div>
@ -30,6 +30,11 @@
type: Boolean, type: Boolean,
default: true, default: true,
}, },
isFixed: {
type: Boolean,
default: false
}
}, },
methods: { methods: {

10
resources/sass/app.scss vendored
View File

@ -315,6 +315,16 @@ footer .field.is-grouped {
justify-content: center; 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 { .file .tag {
margin-left: 0.75rem; margin-left: 0.75rem;
} }