Matteo Pagliazzi
8f5a0cfe79
* add achievements to user * add placeholder strings * add to achievements to common script * add onboarding achievements category * add notifications * more notifications * award achievements * wip notification panel * add achievements icons and copy * do not count onboarding tasks for the created task achievement * add notes * sprites, fixes and completion status and reward * add onboarding panel * add toggle * fix toggle size * fix tests * fix typo * add notification * start adding modal * fix remove button positionin, timeout, progress bar * modal + fixes * disable broken social links from level up modal * change toggle icon color on hover * add border bottom to onboarding guide panel * add collapse animation * expanded onboarding on first open * onboarding: flip toggle colors * onboarding: show progress bar all the time * onboarding: fix panel closing on click * onboarding modal: add close icon and fix padding * wip: add migration for existing users * fix titles in guide * fix achievements copy * do not award completed task achievement when direction is down * start implementing new achievements * start migrating client * remove social links from achievements modals * prevent skipping tutorial + fix achievement notification * sync fixes * start redesign achievement modal * misc fixes to achievements, polish generic achievement modal and hatched pet modal * add special badge for onboarding * fix badge condition * modals fixes * hatched pet modal: add close icon * fix badge typo * fix justin button * new scrolling behavior for dropdowns * fix strings capitalization * add common tests * add api unit tests * add date check * achievements modal polishing * typos * add toggle for achievements categories * typo * fix test * fix edit avatar modal cannot be closed * finish migration and correct launch date * fix migration * migration fixes * fix tests
41 lines
764 B
Vue
41 lines
764 B
Vue
<template functional>
|
|
<span
|
|
class="message-count d-flex align-items-center justify-content-center"
|
|
:class="{'top-count': props.top === true, 'top-count-gray': props.gray === true}"
|
|
v-html="props.badge || props.count"
|
|
></span>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '~@/assets/scss/colors.scss';
|
|
|
|
.message-count {
|
|
background-color: $blue-50;
|
|
border-radius: 50%;
|
|
height: 20px;
|
|
width: 20px;
|
|
float: right;
|
|
color: $white;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
|
|
svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
.message-count.top-count {
|
|
position: absolute;
|
|
right: 0.3em;
|
|
top: -0.8em;
|
|
padding: 0.2em;
|
|
background-color: $red-50;
|
|
}
|
|
|
|
.message-count.top-count-gray {
|
|
background-color: $gray-200;
|
|
}
|
|
</style>
|