mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-31 19:20:25 +00:00
MASSIVE HEADER CHANGES OH SHIT
This commit is contained in:
Zachary Kain
parent
411c614408
commit
507a0fc3c9
8 changed files with 155 additions and 94 deletions
|
|
@ -124,7 +124,7 @@ setupTour = (model) ->
|
|||
|
||||
# jquery sticky header on scroll, no need for position fixed
|
||||
initStickyHeader = (model) ->
|
||||
$('.header-wrap').sticky({topSpacing:1})
|
||||
$('.header-wrap').sticky({topSpacing:0})
|
||||
|
||||
###
|
||||
Sets up "+1 Exp", "Level Up", etc notifications
|
||||
|
|
|
|||
|
|
@ -42,4 +42,6 @@ module.exports.viewHelpers = (view) ->
|
|||
view.fn "and", -> _.reduce arguments, (cumm, curr) -> cumm && curr
|
||||
view.fn "or", -> _.reduce arguments, (cumm, curr) -> cumm || curr
|
||||
|
||||
view.fn "truarr", (num) ->
|
||||
return num-1
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,71 @@
|
|||
// basic avatar sprite group
|
||||
.avatar
|
||||
cursor: pointer
|
||||
position: relative
|
||||
width: 90px
|
||||
height: 90px
|
||||
/* herobox & avatar
|
||||
======================
|
||||
* this is the canonical `herobox` avatar component
|
||||
* it can be placed anywhere on the site and look the
|
||||
* way it's supposed to. TODO: add variables for show/
|
||||
* or hiding user metadata in different situations
|
||||
|
||||
.character-sprites
|
||||
position: absolute
|
||||
Seeing as the sprites might change drastically in the
|
||||
future re: pets and whatnot, this is just temporary.
|
||||
---------------------------------------------------- */
|
||||
|
||||
.lvl
|
||||
position: absolute
|
||||
bottom: 0px
|
||||
right: 10px
|
||||
// basic herobox styles
|
||||
.herobox
|
||||
height: 10.5em // higher to acct for the name area
|
||||
width: 10em
|
||||
max-width: 10em
|
||||
margin: 0 // need this b/c of bootstrap, remove or reset later
|
||||
padding: 0 // push down the sprite
|
||||
position: relative
|
||||
cursor: pointer
|
||||
background: #f5f5f5
|
||||
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)
|
||||
|
||||
// main and party avatars
|
||||
.main-avatar, .party-avatar
|
||||
.character-sprites
|
||||
top: -15px
|
||||
// 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
|
||||
position: absolute
|
||||
top: 0
|
||||
display: block
|
||||
width: 100%
|
||||
line-height: 2
|
||||
color: black
|
||||
text-align: center
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1)
|
||||
background: darken($good, 15%)
|
||||
transition: opacity 0.2s ease-out
|
||||
|
||||
// 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"]
|
||||
&:hover, &:focus
|
||||
padding-top: 3.25em
|
||||
|
||||
.herobox:not([data-haspet="hasPet"])
|
||||
&:hover, &:focus
|
||||
padding-top: 2.5em
|
||||
|
||||
|
||||
.character-sprites span
|
||||
position: absolute
|
||||
// positioning the sprites, etc
|
||||
.herobox
|
||||
.character-sprites
|
||||
width: 6.428571429em // 90px
|
||||
height: 6.428571429em
|
||||
margin: 0 auto
|
||||
|
||||
.character-sprites span, .pet
|
||||
position: absolute
|
||||
|
|
@ -1,30 +1,31 @@
|
|||
/* site header
|
||||
/* header wrapper
|
||||
-------------------- */
|
||||
|
||||
.header-wrap
|
||||
width: 100% // this is for the sticky
|
||||
height: 10em
|
||||
padding: 2.25em 1.5em 2em
|
||||
padding: 0
|
||||
z-index: 1
|
||||
background: #f5f5f5
|
||||
border-bottom: 1px solid #ccc
|
||||
margin-top: -1px
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2)
|
||||
// margin-top: -1px
|
||||
overflow: hidden
|
||||
|
||||
/* login/menu buttons
|
||||
--------------------- */
|
||||
.user-menu
|
||||
position: absolute
|
||||
top: 0.5em
|
||||
right: 0.5em
|
||||
font-size: 0.85em
|
||||
.tile
|
||||
cursor: pointer
|
||||
font-weight: 400
|
||||
color: #494949
|
||||
color: hsla(0, 0%, 15%, 0.8)
|
||||
background-color: darken($better, 10%)
|
||||
background-color: darken($better, 5%)
|
||||
&:hover, &:focus
|
||||
background-color: darken($best, 20%)
|
||||
background-color: darken($good, 15%)
|
||||
&:active
|
||||
background-color: darken($best, 30%)
|
||||
color: white
|
||||
background-color: darken($good, 25%)
|
||||
|
||||
.user-reporter:after
|
||||
content: '▾'
|
||||
|
|
@ -66,39 +67,39 @@
|
|||
border-top: 0
|
||||
}
|
||||
|
||||
/* hero box
|
||||
|
||||
/* header layout
|
||||
-------------------- */
|
||||
.site-header
|
||||
display: table
|
||||
margin: 0 auto
|
||||
width: 100%
|
||||
height: 10.5em
|
||||
|
||||
.hero-avatar, .party-member-avatar
|
||||
display: table-cell
|
||||
|
||||
@media (min-width: 37.5em)
|
||||
@media (min-width: 42.5em)
|
||||
.site-header
|
||||
width: 80%
|
||||
width: 75%
|
||||
@media (min-width: 60em)
|
||||
.site-header
|
||||
width: 60%
|
||||
|
||||
.hero-avatar, .party-member-avatar
|
||||
padding: 0
|
||||
margin: 0
|
||||
vertical-align: top
|
||||
|
||||
.hero-avatar
|
||||
width: 90px
|
||||
|
||||
.party-member-avatar
|
||||
width: 90px
|
||||
// margin: 0 auto
|
||||
width: 66%
|
||||
@media (min-width: 70em)
|
||||
.site-header
|
||||
width: 70%
|
||||
|
||||
|
||||
// this is a wrapper for avatars in the header
|
||||
// inside this is the actual `herobox` module
|
||||
// that can be used anywhere on the site
|
||||
.herobox-wrap
|
||||
display: table-cell
|
||||
vertical-align: middle
|
||||
width: 10em
|
||||
height: 10.5em
|
||||
|
||||
/* progress bars
|
||||
-------------------- */
|
||||
.hero-stats
|
||||
padding: 0 0.5em
|
||||
padding: 0 1.25em
|
||||
margin: 0
|
||||
display: table-cell
|
||||
vertical-align: middle
|
||||
|
||||
|
|
@ -112,25 +113,39 @@
|
|||
opacity: 1
|
||||
outline: 1px solid rgba(0,0,0,0.2)
|
||||
outline-offset: -1px
|
||||
overflow: visible // firefox outline fix
|
||||
margin-bottom: 1.5em
|
||||
height: 2em
|
||||
|
||||
overflow: hidden // firefox outline fix
|
||||
height: 2.25em
|
||||
margin: 0 0 1em
|
||||
cursor: help;
|
||||
color: #111
|
||||
&:last-of-type
|
||||
margin-bottom: 0
|
||||
&:after
|
||||
content: attr(title)
|
||||
position: absolute
|
||||
left: -1em
|
||||
top 0.4em
|
||||
font-weight: 400
|
||||
z-index: -1
|
||||
transition: all 0.25s ease-out
|
||||
|
||||
.bar
|
||||
background: none
|
||||
border: 1px solid rgba(0,0,0,0.2)
|
||||
border: 1px solid rgba(0,0,0,0.1)
|
||||
height: 100%
|
||||
transition: width 0.25s ease-out
|
||||
|
||||
.meter:hover:after
|
||||
left: 1em
|
||||
z-index: 1
|
||||
|
||||
.health .bar
|
||||
background-color: darken($worse, 38%)
|
||||
background: darken($worse, 38%)
|
||||
.experience .bar
|
||||
background-color: darken($neutral, 30%)
|
||||
background: darken($neutral, 30%)
|
||||
|
||||
.meter-text
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 1em
|
||||
right: 0.5em
|
||||
z-index: 1
|
||||
color: #111
|
||||
line-height: 2
|
||||
line-height: 2.25
|
||||
|
|
@ -28,6 +28,8 @@ html,body,p,h1,ul,li,table,tr,th,td
|
|||
-moz-box-sizing: border-box
|
||||
box-sizing: border-box
|
||||
|
||||
* { font-family: "Lato", sans-serif }
|
||||
|
||||
hr
|
||||
border-top: 0
|
||||
border-bottom: 1px solid #ddd
|
||||
|
|
@ -58,12 +60,11 @@ hr
|
|||
}
|
||||
|
||||
/* Customizations to make footer sticky */
|
||||
/*html, body {height: 100%;}*/
|
||||
/*html, body {height: 100%;}*/
|
||||
#wrap
|
||||
min-height: 100%
|
||||
z-index:-1
|
||||
#main
|
||||
/*overflow:auto;*/
|
||||
#main
|
||||
padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
{#if equal(_user.flags.algosNotification,'show')}
|
||||
<div class='alert alert-success'>
|
||||
<a x-bind="click:closeAlgosNotification" class=pull-right>[x]</a>
|
||||
<a x-bind="click:closeAlgosNotification" class=pull-right>✕</a>
|
||||
<p>New features! Custom day start, new and better algorithms, authentication enhancements. See <a target="_blank" href="http://habitrpg.tumblr.com/post/44468869138/custom-day-start-better-algorithms-auth-enhancements">details here.</a>
|
||||
"Hey, I had more Exp before this roll-out!" <a data-target="#restore-modal" data-toggle=modal>Restore your Exp here.</a></p>
|
||||
</div>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
{#if equal(_user.flags.onliesNotification, 'show')}
|
||||
<div class='alert alert-success'>
|
||||
<a x-bind="click:closeOnliesNotification " class=pull-right>[x]</a>
|
||||
<a x-bind="click:closeOnliesNotification " class=pull-right>✕</a>
|
||||
<p>
|
||||
"Onlies" now gain / lose value just like other habits, and are reset back to 0 at the beginning of each day.
|
||||
See <a target="_blank" href="https://trello.com/card/shading-onlies/50e5d3684fe3a7266b0036d6/67">details here</a>, and
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
{#if equal(_user.flags.priorityNotification, 'show')}
|
||||
<div class='alert alert-success'>
|
||||
<a x-bind="click:closePriorityNotification" class=pull-right>[x]</a>
|
||||
<a x-bind="click:closePriorityNotification" class=pull-right>✕</a>
|
||||
<p>New Feature: Priority Multiplier! You can now multiply "more important" tasks on a 1x, 1.5x, or 2x scale. <a target="_blank" href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17">See details</a>.</p>
|
||||
</div>
|
||||
{/}
|
||||
|
|
@ -24,9 +24,13 @@
|
|||
</app:modals:modal>
|
||||
|
||||
<avatar:>
|
||||
<div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='modal' data-target='#avatar-modal' data-uid="{@profile.id}" x-bind="click:profileChangeActive">
|
||||
{#unless @minimal}{#if @profile.items.pet}<img src='img/sprites/{@profile.items.pet.icon}' />{/}{/}
|
||||
<figure class="herobox"
|
||||
data-name="{@profile.auth.local.username}"
|
||||
data-level="{@profile.stats.lvl}"
|
||||
data-haspet="{#if @profile.items.pet}hasPet{/}"
|
||||
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}' />{/}{/}
|
||||
{#with @profile.preferences as :p}
|
||||
<span class='{:p.gender}_skin_{:p.skin}'></span>
|
||||
<span class='{:p.gender}_hair_{:p.hair}'></span>
|
||||
|
|
@ -41,9 +45,8 @@
|
|||
{/}
|
||||
</div>
|
||||
{{#unless @minimal}}
|
||||
<div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
|
||||
{{/}}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<customize:>
|
||||
<!-- user avatar preview -->
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
<header:>
|
||||
{#unless equal(_user.preferences.hideHeader,true)}
|
||||
<header class="site-header" role="banner">
|
||||
<header class="site-header" role="banner" data-partySize="{#if gt(_partyMembers.length,1)}{truarr(_partyMembers.length)}{else}0{/}">
|
||||
<!-- avatar -->
|
||||
<figure class="hero-avatar">
|
||||
<app:avatar:avatar profile={_user} main="true">
|
||||
</figure>
|
||||
<div class="herobox-wrap">
|
||||
<app:avatar:avatar profile={_user}>
|
||||
</div>
|
||||
|
||||
<!-- stat bars -->
|
||||
<div class="hero-stats">
|
||||
<div class="meter health" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="meter health" title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="meter-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<div class="meter experience" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="meter experience" title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></div>
|
||||
<span class="meter-text">
|
||||
{#if _user.history.exp}
|
||||
<a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>
|
||||
{/}
|
||||
<!-- disabled chart for now, it doesn't work -->
|
||||
<!-- {#if _user.history.exp} -->
|
||||
<!-- <a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a> -->
|
||||
<!-- {/} -->
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -29,21 +30,12 @@
|
|||
<!-- party -->
|
||||
{{#each _partyMembers as :member}}
|
||||
{{#unless equal(:member.id, _userId)}}
|
||||
<figure class="party-member-avatar" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
|
||||
<div>
|
||||
<div class='progress progress-danger' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
|
||||
</div>
|
||||
<div class='progress progress-warning' style='height:5px;'>
|
||||
<div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
|
||||
</div>
|
||||
<div>GP: {{floor(:member.stats.gp)}}</div>
|
||||
</div>
|
||||
">
|
||||
<!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
|
||||
|
||||
<div class="herobox-wrap">
|
||||
<app:avatar:avatar profile={{:member}} party="true" />
|
||||
</figure>
|
||||
<!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
|
||||
<!-- I've re-implemented the rollover using the actual `herobox`/avatar template and data-attributes.
|
||||
This Derby template idea would have been really handy but this is pretty versatile, and keeps it all in the avatar section -->
|
||||
</div>
|
||||
{{/}}
|
||||
{{/}}
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Reference in a new issue