krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-15 13:47:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Redesign: Fixes 09/21 (#9062)

Browse Source 
* fix(notifications): click to clear

* fix(chat): no italic/gray typing in Tavern

* fix(tutorial): tighter Justin modal

* fix(modal): revert changes to avatar editing

* fix(avatar): let edit modal be big
This commit is contained in:
Sabe Jones
2017-09-22 22:27:00 -05:00
committed by GitHub
parent cbdb0bc3e3
commit dde63b619f
3 changed files with 101 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
website/client/components/creatorIntro.vue
View File

@@ -1,16 +1,16 @@
<template lang="pug"> <template lang="pug">
b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='true', :class='{"page-2": modalPage > 1 && !editing}') b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true', :hide-footer='true', :class='{"page-2": modalPage > 1 && !editing}')
.section.row.welcome-section(v-if='modalPage === 1 && !editing') .section.row.welcome-section(v-if='modalPage === 1 && !editing')
.col-6.offset-3.text-center .col-6.offset-3.text-center
h3(v-once) {{$t('welcomeTo')}} h3(v-once) {{$t('welcomeTo')}}
.svg-icon.logo(v-html='icons.logoPurple') .svg-icon.logo(v-html='icons.logoPurple')
.section.avatar-section.row(:class='{"page-2": modalPage === 2}') .avatar-section.row(:class='{"page-2": modalPage === 2}')
.col-6.offset-3 .col-6.offset-3
.user-creation-bg(v-if='!editing') .user-creation-bg(v-if='!editing')
avatar(:member='user', :avatarOnly='!editing') avatar(:member='user', :avatarOnly='!editing', :class='{"edit-avatar": editing}')
.section(v-if='modalPage === 2') .section(v-if='modalPage === 2', :class='{"edit-modal": editing}')
// @TODO Implement in V2 .section.row // @TODO Implement in V2 .section.row
.col-12.text-center .col-12.text-center
button.btn.btn-secondary(v-once) {{$t('randomize')}} button.btn.btn-secondary(v-once) {{$t('randomize')}}
@@ -19,7 +19,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
div(:class='{"col-3": !editing, "col-2 offset-1": editing}') div(:class='{"col-3": !editing, "col-2 offset-1": editing}')
.menu-item(@click='changeTopPage("body", "size")') .menu-item(@click='changeTopPage("body", "size")')
.svg-icon(v-html='icons.bodyIcon') .svg-icon(v-html='icons.bodyIcon')
strong(v-once) {{$t('body')}} strong(v-once) {{$t('bodyBody')}}
div(:class='{"col-3": !editing, "col-2": editing}') div(:class='{"col-3": !editing, "col-2": editing}')
.menu-item(@click='changeTopPage("skin", "color")') .menu-item(@click='changeTopPage("skin", "color")')
.svg-icon(v-html='icons.skinIcon') .svg-icon(v-html='icons.skinIcon')
@@ -37,11 +37,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.svg-icon(v-html='icons.backgroundsIcon') .svg-icon(v-html='icons.backgroundsIcon')
strong(v-once) {{$t('backgrounds')}} strong(v-once) {{$t('backgrounds')}}
#body.section.customize-section(v-if='activeTopPage === "body"') #body.section.customize-section(v-if='activeTopPage === "body"')
.row.sub-menu.col-6.offset-3.text-center .row.sub-menu.text-center
.col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}') .col-3.offset-3.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
strong(v-once) {{$t('size')}} strong(v-once) {{$t('size')}}
.col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}') .col-3.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
strong(v-once) {{$t('shirt')}} strong(v-once) {{$t('shirt')}}
.row(v-if='activeSubPage === "size"') .row(v-if='activeSubPage === "size"')
.col-12.customize-options.size-options .col-12.customize-options.size-options
.option(v-for='option in ["slim", "broad"]', :class='{active: user.preferences.size === option}') .option(v-for='option in ["slim", "broad"]', :class='{active: user.preferences.size === option}')
@@ -62,8 +62,8 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("shirt", specialShirtKeys)', @click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }} button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("shirt", specialShirtKeys)', @click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }}
#skin.section.customize-section(v-if='activeTopPage === "skin"') #skin.section.customize-section(v-if='activeTopPage === "skin"')
.row.sub-menu.col-6.offset-3.text-center .row.sub-menu.col-6.offset-3.text-center
.col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}') .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
strong(v-once) {{$t('color')}} strong(v-once) {{$t('color')}}
.row .row
.col-12.customize-options .col-12.customize-options
.option(v-for='option in ["ddc994", "f5a76e", "ea8349", "c06534", "98461a", "915533", "c3e1dc", "6bd049"]', .option(v-for='option in ["ddc994", "f5a76e", "ea8349", "c06534", "98461a", "915533", "c3e1dc", "6bd049"]',
@@ -81,23 +81,23 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.col-12.text-center .col-12.text-center
button.btn.btn-secondary.purchase-all(v-if='!hideSet(set) && !userOwnsSet("skin", set.keys)', @click='unlock(`skin.${set.keys.join(",skin.")}`)') {{ $t('purchaseAll') }} button.btn.btn-secondary.purchase-all(v-if='!hideSet(set) && !userOwnsSet("skin", set.keys)', @click='unlock(`skin.${set.keys.join(",skin.")}`)') {{ $t('purchaseAll') }}
#hair.section.customize-section(v-if='activeTopPage === "hair"') #hair.section.customize-section(v-if='activeTopPage === "hair"')
.row.sub-menu.col-6.offset-3.text-center .row.sub-menu.text-center
.col-2.offset-1.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}') .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
strong(v-once) {{$t('color')}} strong(v-once) {{$t('color')}}
.col-2.text-center.sub-menu-item(@click='changeSubPage("style")', :class='{active: activeSubPage === "style"}', v-if='editing') .col-4.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
strong(v-once) {{$t('style')}} strong(v-once) {{$t('bangs')}}
.col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}') .col-3.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
strong(v-once) {{$t('bangs')}} strong(v-once) {{$t('ponytail')}}
.col-3.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}') .row.sub-menu.text-center
strong(v-once) {{$t('ponytail')}} .col-3.offset-3.text-center.sub-menu-item(@click='changeSubPage("style")', :class='{active: activeSubPage === "style"}', v-if='editing')
.col-2.text-center.sub-menu-item(@click='changeSubPage("facialhair")', :class='{active: activeSubPage === "facialhair"}', v-if='editing') strong(v-once) {{$t('style')}}
.col-3.text-center.sub-menu-item(@click='changeSubPage("facialhair")', :class='{active: activeSubPage === "facialhair"}', v-if='editing')
strong(v-once) {{$t('facialhair')}} strong(v-once) {{$t('facialhair')}}
#hair-color.section.customize-section(v-if='activeSubPage === "color"') #hair-color.row(v-if='activeSubPage === "color"')
.row .col-12.customize-options
.col-12.customize-options .option(v-for='option in ["white", "brown", "blond", "red", "black"]',
.option(v-for='option in ["white", "brown", "blond", "red", "black"]', :class='{active: user.preferences.hair.color === option}')
:class='{active: user.preferences.hair.color === option}') .color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
.color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
//.row(v-if='editing') //.row(v-if='editing')
.col-12.customize-options(v-if='editing') .col-12.customize-options(v-if='editing')
.option(v-for='option in premiumHairColors', .option(v-for='option in premiumHairColors',
@@ -180,18 +180,22 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.col-12.text-center .col-12.text-center
button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair6Keys, "mustache")', @click='unlock(`hair.mustache.${baseHair6Keys.join(",hair.mustache.")}`)') {{ $t('purchaseAll') }} button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair6Keys, "mustache")', @click='unlock(`hair.mustache.${baseHair6Keys.join(",hair.mustache.")}`)') {{ $t('purchaseAll') }}
#extra.section.container.customize-section(v-if='activeTopPage === "extra"') #extra.section.container.customize-section(v-if='activeTopPage === "extra"')
.row.sub-menu.col-6.offset-3.text-center .row.sub-menu
.col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}') .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
strong(v-once) {{$t('glasses')}} strong(v-once) {{$t('glasses')}}
.col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}') .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
strong(v-once) {{$t('wheelchair')}} strong(v-once) {{$t('wheelchair')}}
.col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}') .col-3.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
strong(v-once) {{$t('flower')}} strong(v-once) {{$t('flower')}}
.row.sub-menu(v-if='editing')
.col-4.offset-4.text-center.sub-menu-item(@click='changeSubPage("ears")' :class='{active: activeSubPage === "ears"}')
strong(v-once) {{$t('animalEars')}}
.row(v-if='activeSubPage === "glasses"') .row(v-if='activeSubPage === "glasses"')
.col-12.customize-options .col-12.customize-options
.option(v-for='option in eyewear', :class='{active: option.active}') .option(v-for='option in eyewear', :class='{active: option.active}')
.sprite.customize-option(:class="`eyewear_special_${option.key}`", @click='option.click') .sprite.customize-option(:class="`eyewear_special_${option.key}`", @click='option.click')
#animal-ears.col-12.customize-options(v-if='editing') #animal-ears.row(v-if='activeSubPage === "ears"')
.section.col-12.customize-options
.option(v-for='option in animalEars', .option(v-for='option in animalEars',
:class='{active: option.active, locked: option.locked}') :class='{active: option.active, locked: option.locked}')
.sprite.customize-option(:class="`headAccessory_special_${option.key}`", @click='option.click') .sprite.customize-option(:class="`headAccessory_special_${option.key}`", @click='option.click')
@@ -201,7 +205,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.col-12.text-center .col-12.text-center
button.btn.btn-secondary.purchase-all(v-if='!animalEarsOwned', @click='unlock(animalEarsUnlockString)') {{ $t('purchaseAll') }} button.btn.btn-secondary.purchase-all(v-if='!animalEarsOwned', @click='unlock(animalEarsUnlockString)') {{ $t('purchaseAll') }}
#wheelchairs.row(v-if='activeSubPage === "wheelchair"') #wheelchairs.row(v-if='activeSubPage === "wheelchair"')
.col-12.customize-options.weelchairs .col-12.customize-options
.option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}') .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
| None | None
.option(v-for='option in ["black", "blue", "green", "pink", "red", "yellow"]', .option(v-for='option in ["black", "blue", "green", "pink", "red", "yellow"]',
@@ -221,28 +225,28 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
popover-placement='right', popover-append-to-body='true', popover-placement='right', popover-append-to-body='true',
ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)') ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)')
#backgrounds.section.container.customize-section(v-if='activeTopPage === "backgrounds"') #backgrounds.section.container.customize-section(v-if='activeTopPage === "backgrounds"')
.row.col-12.text-center.set-title .row.text-center.set-title
strong {{backgroundShopSets[0].text}} strong {{backgroundShopSets[0].text}}
.row.incentive-background-row .row.incentive-background-row
.col-2(v-for='bg in backgroundShopSets[0].items', .col-2(v-for='bg in backgroundShopSets[0].items',
@click='buy("background." + bg.key)', @click='buy("background." + bg.key)',
:popover-title='bg.text', :popover-title='bg.text',
:popover='bg.notes', :popover='bg.notes',
popover-trigger='mouseenter') popover-trigger='mouseenter')
.incentive-background(:class='[`background_${bg.key}`]') .incentive-background(:class='[`background_${bg.key}`]')
.small-rectangle .small-rectangle
.row.sub-menu.col-6.offset-3 .row.sub-menu.col-10.offset-1
.col-3.text-center.sub-menu-item(@click='changeSubPage("2017")', :class='{active: activeSubPage === "2017"}') .col-3.text-center.sub-menu-item(@click='changeSubPage("2017")', :class='{active: activeSubPage === "2017"}')
strong(v-once) 2017 strong(v-once) 2017
.col-3.text-center.sub-menu-item(@click='changeSubPage("2016")', :class='{active: activeSubPage === "2016"}') .col-3.text-center.sub-menu-item(@click='changeSubPage("2016")', :class='{active: activeSubPage === "2016"}')
strong(v-once) 2016 strong(v-once) 2016
.col-3.text-center.sub-menu-item(@click='changeSubPage("2015")', :class='{active: activeSubPage === "2015"}') .col-3.text-center.sub-menu-item(@click='changeSubPage("2015")', :class='{active: activeSubPage === "2015"}')
strong(v-once) 2015 strong(v-once) 2015
.col-3.text-center.sub-menu-item(@click='changeSubPage("2014")', :class='{active: activeSubPage === "2014"}') .col-3.text-center.sub-menu-item(@click='changeSubPage("2014")', :class='{active: activeSubPage === "2014"}')
strong(v-once) 2014 strong(v-once) 2014
.row.customize-menu(v-for='(sets, key) in backgroundShopSetsByYear') .row.customize-menu(v-for='(sets, key) in backgroundShopSetsByYear')
.col-12.row(v-for='set in sets', v-if='activeSubPage === key') .row(v-for='set in sets', v-if='activeSubPage === key')
.col-6.offset-3.text-center.set-title .col-8.offset-2.text-center.set-title
strong {{set.text}} strong {{set.text}}
.col-12(v-if='showPlainBackgroundBlurb(set.identifier, set.items)') {{ $t('incentiveBackgroundsUnlockedWithCheckins') }} .col-12(v-if='showPlainBackgroundBlurb(set.identifier, set.items)') {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
.col-4.text-center.customize-option.background-button(v-for='bg in set.items', .col-4.text-center.customize-option.background-button(v-for='bg in set.items',
@@ -273,7 +277,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.col-12.text-center .col-12.text-center
h2 I want to work on: h2 I want to work on:
.section.row .section.row
.col-4.offset-2 .col-6
.task-option .task-option
label.custom-control.custom-checkbox label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='work', v-model='taskCategories') input.custom-control-input(type="checkbox", value='work', v-model='taskCategories')
@@ -294,7 +298,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
input.custom-control-input(type="checkbox", value='school', v-model='taskCategories') input.custom-control-input(type="checkbox", value='school', v-model='taskCategories')
span.custom-control-indicator span.custom-control-indicator
span.custom-control-description(v-once) {{ $t('school') }} span.custom-control-description(v-once) {{ $t('school') }}
.col-4 .col-6
.task-option .task-option
label.custom-control.custom-checkbox label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='chores', v-model='taskCategories') input.custom-control-input(type="checkbox", value='chores', v-model='taskCategories')
@@ -313,7 +317,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing') .section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing')
.col-12 .col-12
.justin-message .justin-message.d-flex.flex-column.justify-content-center
.featured-label .featured-label
span.rectangle span.rectangle
span.text Justin span.text Justin
@@ -347,7 +351,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
<style> <style>
.page-2 #avatar-modal__BV_body_ { .page-2 #avatar-modal__BV_body_ {
margin-top: 8em; margin-top: 9em;
} }
.page-2 .modal-content { .page-2 .modal-content {
@@ -385,13 +389,17 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
margin-top: 2em; margin-top: 2em;
} }
.avatar-section.page-2 { .edit-modal {
min-height: 150px; margin-top: 10em;
}
.row.sub-menu + .row.sub-menu {
margin-top: 0.5em;
} }
.welcome-section { .welcome-section {
margin-top: 5em; margin-top: 2.5em;
margin-bottom: 5em; margin-bottom: 2.5em;
} }
.logo { .logo {
@@ -408,7 +416,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.avatar { .avatar {
position: absolute; position: absolute;
top: -23px; top: -22px;
left: 4em;
}
.edit-avatar {
left: 9.2em; left: 9.2em;
} }
@@ -438,17 +450,25 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
height: 52px; height: 52px;
background-image: url('~client/assets/images/justin_textbox.png'); background-image: url('~client/assets/images/justin_textbox.png');
} }
p {
margin: auto;
}
p + p {
margin-top: 1em;
}
} }
.justin-message-section { .justin-message-section {
margin-top: 6em; margin-top: 4em;
margin-bottom: 6em; margin-bottom: 2em;
} }
.justin-message-section.top { .justin-message-section.top {
position: absolute; position: absolute;
top: -16em; top: -16em;
left: 13em; left: 3.5em;
} }
.circles { .circles {
@@ -490,6 +510,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.sub-menu-item { .sub-menu-item {
text-align: center; text-align: center;
border-bottom: 2px solid #f9f9f9;
} }
.sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active { .sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active {
@@ -516,8 +537,8 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
padding: .5em; padding: .5em;
height: 100px; height: 90px;
width: 100px; width: 90px;
margin-bottom: .5em; margin-bottom: .5em;
margin-right: .5em; margin-right: .5em;
@@ -556,11 +577,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
.customize-section { .customize-section {
background-color: #f9f9f9; background-color: #f9f9f9;
padding-top: 1em; padding-top: 1em;
min-height: 250px; min-height: 280px;
} }
.interests-section { .interests-section {
margin-top: 7em; margin-top: 3em;
.task-option { .task-option {
margin: 0 auto; margin: 0 auto;
@@ -570,7 +591,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
#backgrounds { #backgrounds {
.set-title { .set-title {
margin-top: 3em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
@@ -665,7 +686,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
} }
.gem-amount { .gem-amount {
margin-top: 2em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
.gem { .gem {

7
website/client/components/groups/tavern.vue
View File

@@ -10,7 +10,7 @@
h3(v-once) {{ $t('tavernChat') }} h3(v-once) {{ $t('tavernChat') }}
.row .row
textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition') textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', :class='{"user-entry": newMessage}', @keydown='updateCarretPosition')
autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat') autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }} button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }} button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
@@ -167,6 +167,11 @@
padding: .5em; padding: .5em;
} }
.user-entry {
font-style: normal;
color: $black;
}
.hr { .hr {
width: 100%; width: 100%;
height: 20px; height: 20px;

2
website/client/components/snackbars/notification.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
transition(name="fade") transition(name="fade")
.notification.callout.animated(:class="classes", v-if='show') .notification.callout.animated(:class="classes", v-if='show', @click='show = false')
.row(v-if='notification.type === "error"') .row(v-if='notification.type === "error"')
.text.col-12 .text.col-12
div(v-html='notification.text') div(v-html='notification.text')