mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-31 19:20:25 +00:00
rebuilt header boiiii. Tested FF, Safari, Chrome
This commit is contained in:
Zachary Kain
parent
e18c53f97f
commit
8284693d0f
4 changed files with 39 additions and 128 deletions
|
|
@ -124,7 +124,7 @@ setupTour = (model) ->
|
|||
|
||||
# jquery sticky header on scroll, no need for position fixed
|
||||
initStickyHeader = (model) ->
|
||||
# $('.site-header').sticky({topSpacing:1})
|
||||
$('.site-header').sticky({topSpacing:1})
|
||||
|
||||
###
|
||||
Sets up "+1 Exp", "Level Up", etc notifications
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
@import "./alerts.styl";
|
||||
@import "./helpers.styl";
|
||||
@import "./responsive.styl";
|
||||
@import "./header.styl";
|
||||
|
||||
@import "./scrollbars.styl";
|
||||
|
||||
|
|
@ -33,96 +34,6 @@ hr
|
|||
border-color: rgba(0,0,0,0.1)
|
||||
|
||||
|
||||
/* Header
|
||||
-------------------------------------------------- */
|
||||
|
||||
.site-header
|
||||
padding: 0 0.75em 0.75em
|
||||
background: #f5f5f5
|
||||
border: 1px solid #ccc
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
z-index: 1
|
||||
|
||||
.site-header .pull-right
|
||||
margin-right: 0
|
||||
margin-left: 1%
|
||||
|
||||
.modal
|
||||
whitespace:normal
|
||||
|
||||
.user-menu {
|
||||
text-align: right
|
||||
position: relative
|
||||
top: 1em
|
||||
}
|
||||
|
||||
.dropdown-menu
|
||||
right: 0
|
||||
left: auto
|
||||
|
||||
.main-avatar-wrap
|
||||
margin: 0 5px 0 0
|
||||
float: left
|
||||
|
||||
.party-avatar-wrap
|
||||
margin: 0
|
||||
float: right
|
||||
|
||||
.progress-bars
|
||||
// padding-top: 15px
|
||||
|
||||
.progress
|
||||
position: relative
|
||||
height: 2em
|
||||
.bar
|
||||
height: 2em
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
color: #111
|
||||
float: right
|
||||
margin-right: 1em
|
||||
line-height: 2
|
||||
|
||||
@media (max-width: 600px) {
|
||||
// .char-status {
|
||||
// padding-top: 30px
|
||||
// }
|
||||
.main-avatar-wrap {
|
||||
border-right: 1px solid grey;
|
||||
padding-right: 20px
|
||||
}
|
||||
.party-avatar-wrap {
|
||||
float: left;
|
||||
}
|
||||
.progress-bars {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
|
||||
$worse = rgb(244, 204, 204)
|
||||
$neutral = rgb(255, 242, 204)
|
||||
|
||||
.progress-bars
|
||||
.progress
|
||||
border-radius: 0
|
||||
background: white
|
||||
opacity: 1
|
||||
outline: 1px solid rgba(0,0,0,0.3)
|
||||
overflow: hidden
|
||||
outline-offset: -1px
|
||||
box-shadow: none
|
||||
.bar
|
||||
background-image: none
|
||||
border: 1px solid rgba(0,0,0,0.3)
|
||||
box-shadow: none
|
||||
|
||||
.progress-danger .bar
|
||||
background-color: darken($worse, 40%)
|
||||
|
||||
.progress-warning .bar
|
||||
background-color: darken($neutral, 40%)
|
||||
|
||||
|
||||
/* Footer
|
||||
|
|
@ -223,14 +134,3 @@ $neutral = rgb(255, 242, 204)
|
|||
top: 0;
|
||||
right: 0px;
|
||||
z-index: 1001;
|
||||
|
||||
|
||||
/* hero box
|
||||
-------------------- */
|
||||
@media (min-width: 37.5em)
|
||||
.hero-box
|
||||
width: 70%
|
||||
|
||||
@media (min-width: 60em)
|
||||
.hero-box
|
||||
width: 50%
|
||||
|
|
|
|||
|
|
@ -2,33 +2,12 @@
|
|||
{#unless equal(_user.preferences.hideHeader,true)}
|
||||
<div class='hero-box'>
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<figure class="hero-avatar main-avatar-wrap">
|
||||
<app:avatar:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
|
||||
<!-- party -->
|
||||
{{#each _partyMembers as :member}}
|
||||
{{#unless equal(:member.id, _userId)}}
|
||||
<figure class="party-avatar-wrap" 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 -->
|
||||
|
||||
<app:avatar:avatar profile={{:member}} party="true" />
|
||||
</figure>
|
||||
{{/}}
|
||||
{{/}}
|
||||
|
||||
<!-- progress bars -->
|
||||
<div class="progress-bars">
|
||||
<div class="hero-progress progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
|
||||
<span class="progress-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
|
|
@ -45,5 +24,27 @@
|
|||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- party -->
|
||||
{{#each _partyMembers as :member}}
|
||||
{{#unless equal(:member.id, _userId)}}
|
||||
<figure class="hero-party-member party-avatar-wrap" 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 -->
|
||||
|
||||
<app:avatar:avatar profile={{:member}} party="true" />
|
||||
</figure>
|
||||
{{/}}
|
||||
{{/}}
|
||||
<!-- close hero box -->
|
||||
</div>
|
||||
{/}
|
||||
|
|
@ -136,9 +136,19 @@
|
|||
<menu:>
|
||||
<div class="user-menu">
|
||||
{#unless _loggedIn}
|
||||
<a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
|
||||
<button class="task-action-btn tile solid" href="#" data-target="#login-modal" data-toggle="modal">Login / Register</button>
|
||||
{else}
|
||||
<div class="btn-group">
|
||||
<ul class="nav site-nav">
|
||||
<li class="flyout">
|
||||
<h1 class="task-action-btn tile solid user-reporter">{username(_user.auth)}</h1>
|
||||
<ul class="flyout-content nav stacked">
|
||||
<li><a class="task-action-btn tile solid" data-target="#settings-modal" data-toggle="modal">Settings</a></li>
|
||||
<li>{#if _user.flags.partyEnabled}<a class="task-action-btn tile solid" data-target="#party-modal" data-toggle="modal">Party</a>{/}</li>
|
||||
<li><a class="task-action-btn tile solid" href="/logout">Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <div class="btn-group">
|
||||
<button class="btn btn-small">
|
||||
{#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
|
||||
{username(_user.auth)}
|
||||
|
|
@ -155,6 +165,6 @@
|
|||
{/}
|
||||
<li><a href='/logout'>Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
{/}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue