mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-18 15:17:25 +01:00
ee82f5a774
* wip: footer * pin bootstrap-vue * compact footer and fixes * compact header * fix member details in other views * fix first party member in header * fix unread notifications badge color * sync + menu fixes * loading bar styles * new filter button * create button * create fixes * quick add * fix quick add inputs * tooltips for create buttons * fix create task moda * fix class badge * fixed footer links * revert change that caused problems with tests and old browsers * misc
55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template lang="pug">
|
|
.class-badge.d-flex.justify-content-center
|
|
.align-self-center.svg-icon(v-html="icons[memberClass]")
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
.class-badge {
|
|
$badge-size: 32px;
|
|
|
|
width: $badge-size;
|
|
height: $badge-size;
|
|
background: $white;
|
|
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
|
border-radius: 100px;
|
|
|
|
&.under-avatar {
|
|
position: absolute;
|
|
left: calc(50% - (16px));
|
|
bottom: -($badge-size / 2);
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import warriorIcon from 'assets/svg/warrior.svg';
|
|
import rogueIcon from 'assets/svg/rogue.svg';
|
|
import healerIcon from 'assets/svg/healer.svg';
|
|
import wizardIcon from 'assets/svg/wizard.svg';
|
|
|
|
export default {
|
|
props: {
|
|
memberClass: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
warrior: warriorIcon,
|
|
rogue: rogueIcon,
|
|
healer: healerIcon,
|
|
wizard: wizardIcon,
|
|
}),
|
|
};
|
|
},
|
|
};
|
|
</script> |