sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-08-01 15:31:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implement avatar variable system with data attributes and css. LIKE A BOSS

Browse source
This commit is contained in:
Zachary Kain 2013-03-19 00:04:24 -04:00
parent 507a0fc3c9
commit 915c86d8ba
3 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
styles/app/avatar.styl
View file

@ -22,17 +22,9 @@ future re: pets and whatnot, this is just temporary.
transition: padding 0.13s ease-out, border 0.25s ease-out, background 0.25s ease-out
outline: 1px solid rgba(0,0,0,0.1)
// vertically center avatar sprite
// depending on if they have a pet
.herobox[data-haspet="hasPet"]
padding-top: 2em
.herobox:not([data-haspet="hasPet"])
padding-top: 1.75em
// the hero's info frame
.herobox:after
content: attr(data-name) ": " "lv " attr(data-level) // " " attr(data-class)
opacity: 0 // hidden by default
content: attr(data-name) " – " "lvl " attr(data-level) // " " attr(data-class)
position: absolute
top: 0
display: block
@ -44,18 +36,37 @@ future re: pets and whatnot, this is just temporary.
background: darken($good, 15%)
transition: opacity 0.2s ease-out
// info revealed on hover/focus for party
// always visible on the user's own avatar
.herobox:after
opacity: 0
.herobox[data-checkuser="isUser"]:after
opacity: 1
// make it a bit special
background darken($better, 15%)
// vertically center avatar sprite
// depending on if they have a pet
.herobox[data-checkpet="hasPet"]
padding-top: 2em
.herobox:not([data-checkpet="hasPet"])
padding-top: 1.75em
// if it is the user's avatar, check if
// they have a pet and pad accordingly
.herobox[data-checkpet="hasPet"][data-checkuser="isUser"]
padding-top: 3.25em
// expose hero info on hover, taking
// into account the extra pet space
.herobox:hover, .herobox:focus
background: desaturate(lighten($better, 30%), 10%)
&:after
opacity: 1
.herobox[data-haspet="hasPet"]
.herobox[data-checkpet="hasPet"]
&:hover, &:focus
padding-top: 3.25em
.herobox:not([data-haspet="hasPet"])
.herobox:not([data-checkpet="hasPet"])
&:hover, &:focus
padding-top: 2.5em

3
views/app/avatar.html
View file

@ -27,7 +27,8 @@
<figure class="herobox"
data-name="{@profile.auth.local.username}"
data-level="{@profile.stats.lvl}"
data-haspet="{#if @profile.items.pet}hasPet{/}"
data-checkpet="{#if @profile.items.pet}hasPet{/}"
data-checkuser="{#if equal(@profile.id, _user.id)}isUser{/}"
data-toggle='modal' data-target='#avatar-modal' data-uid="{@profile.id}" x-bind="click:profileChangeActive">
<div class='character-sprites'>
{#unless @minimal}{#if @profile.items.pet}<img class="pet" src='img/sprites/{@profile.items.pet.icon}' />{/}{/}

3
views/app/header.html
View file

@ -28,6 +28,9 @@
</div>
<!-- party -->
<!-- I have an idea to use this loop for the user's herobox/avatar as well
NOTE TO SELF: Ask Tyler if some kind of inter-leaving is possible
where we can put ONE of the results of this loop BEFORE the progress bars, and the rest after-->
{{#each _partyMembers as :member}}
{{#unless equal(:member.id, _userId)}}
<div class="herobox-wrap">