diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2018-05-12 10:51:46 +0200 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2018-12-13 16:59:22 +0100 |
| commit | 12246fefe3b65318809cfc1d0f1bab8a55e9fef2 (patch) | |
| tree | 4e3bce821fd949d68541501fb6fdc542bb03a0c2 | |
| parent | 919206c153aad4b3a158597e7519cf9f9addc262 (diff) | |
| download | brokentalents-12246fefe3b65318809cfc1d0f1bab8a55e9fef2.tar.gz brokentalents-12246fefe3b65318809cfc1d0f1bab8a55e9fef2.zip | |
TalentImage: Adjust proportions to fit talent circle
| -rw-r--r-- | src/TalentImage.vue | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/src/TalentImage.vue b/src/TalentImage.vue index b52887e..b7cb78c 100644 --- a/src/TalentImage.vue +++ b/src/TalentImage.vue @@ -1,12 +1,13 @@ <template> - <div v-if="rarity !== 'unknown' && rarity" class="talent-image" :style="`background-image: url('dist/assets/talent-icons-small/${hero}/${hero}_${rarity}.png'); width: ${size}px; height: ${size}px`"> + <div v-if="rarity !== 'unknown' && rarity" + class="talent-image" + :style="`background-image: url('dist/assets/talent-icons-small/${hero}/${hero}_${rarity}.png'); width: ${size}px; height: ${size}px`"> </div> </template> <style scoped> .talent-image { - /* background-color: red; */ - background-size: 150px; + background-size: 230%; border-radius: 50%; background-position: center center; } @@ -25,13 +26,13 @@ export default Vue.component('talent-image', { rarity: maps.getTalentRarity(this.entry.Talent), }; }, - + watch: { entry: function(newEntry, oldEntry) { // This is needed so component will recalculate whenever there is a change on entry this.hero = maps.getHero(this.entry.Actor); this.rarity = maps.getTalentRarity(this.entry.Talent); - } + } } }); </script> |