KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

seasoned messages looks better when messages contains only title.

Browse Source
This commit is contained in:
Kevin
2020-04-09 20:23:35 +02:00
committed by KevinMidboe
parent 188477ab64
commit 65bbc453e6
1 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ui/SeasonedMessages.vue
View File

@@ -3,8 +3,8 @@
<div class="message" v-for="(message, index) in reversedMessages" :class="message.type || 'warning'" :key="index"> <div class="message" v-for="(message, index) in reversedMessages" :class="message.type || 'warning'" :key="index">
<span class="pinstripe"></span> <span class="pinstripe"></span>
<div> <div>
<h2>{{ message.title || defaultTitles[message.type] }}</h2> <h2 class="title">{{ message.title || defaultTitles[message.type] }}</h2>
<span>{{ message.message }}</span> <span v-if="message.message" class="message">{{ message.message }}</span>
</div> </div>
<button class="dismiss" @click="clicked(message)">X</button> <button class="dismiss" @click="clicked(message)">X</button>
@@ -41,14 +41,7 @@ export default {
const removedMessage = [...this.messages].filter(mes => mes !== e) const removedMessage = [...this.messages].filter(mes => mes !== e)
this.$emit('update:messages', removedMessage) this.$emit('update:messages', removedMessage)
} }
}, }
// watch: {
// messages(propState, oldState) {
// const newMessage = propState.filter(msg => !this.localMessages.includes(msg))
// console.log('newMessage', newMessage)
// this.localMessages = this.localMessages.concat(newMessage)
// }
// }
} }
</script> </script>
@@ -70,7 +63,6 @@ export default {
.message { .message {
width: 100%; width: 100%;
max-width: 35rem; max-width: 35rem;
min-height: 75px;
display: flex; display: flex;
margin-top: 1rem; margin-top: 1rem;
@@ -78,12 +70,12 @@ export default {
color: $text-color-70; color: $text-color-70;
> div { > div {
margin: 6px 24px; margin: 10px 24px;
width: 100%; width: 100%;
} }
h2 { .title {
font-weight: 300; font-weight: 300;
letter-spacing: 0.25px; letter-spacing: 0.25px;
margin: 0; margin: 0;
@@ -91,10 +83,11 @@ export default {
color: $text-color; color: $text-color;
transition: color .5s ease; transition: color .5s ease;
} }
span { .message {
font-weight: 300; font-weight: 300;
color: $text-color-70; color: $text-color-70;
transition: color .5s ease; transition: color .5s ease;
margin: 0.2rem 0 0.5rem;
} }
@include mobile-only { @include mobile-only {
@@ -112,9 +105,8 @@ export default {
} }
.pinstripe { .pinstripe {
height: 100%;
width: 0.5rem; width: 0.5rem;
// background-color: $color-error-highlight; background-color: $color-error-highlight;
} }
.dismiss { .dismiss {