mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-01 15:31:16 +00:00
fix the 1px gap
This commit is contained in:
Zachary Kain
parent
f453eb9833
commit
411c614408
6 changed files with 89 additions and 101 deletions
|
|
@ -124,7 +124,7 @@ setupTour = (model) ->
|
|||
|
||||
# jquery sticky header on scroll, no need for position fixed
|
||||
initStickyHeader = (model) ->
|
||||
$('.site-header').sticky({topSpacing:1})
|
||||
$('.header-wrap').sticky({topSpacing:1})
|
||||
|
||||
###
|
||||
Sets up "+1 Exp", "Level Up", etc notifications
|
||||
|
|
|
|||
9
styles/app/color-vars.styl
Normal file
9
styles/app/color-vars.styl
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// color variables
|
||||
$worst = rgb(230, 184, 175)
|
||||
$worse = rgb(244, 204, 204)
|
||||
$bad = rgb(252, 229, 205)
|
||||
$neutral = rgb(255, 242, 204)
|
||||
$good = rgb(217, 234, 211)
|
||||
$better = rgb(208, 224, 227)
|
||||
$best = rgb(201, 218, 248)
|
||||
$completed = rgb(217, 217, 217)
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
/* site header
|
||||
-------------------- */
|
||||
|
||||
.site-header
|
||||
.header-wrap
|
||||
width: 100% // this is for the sticky
|
||||
height: 10em
|
||||
padding: 2.5em 1.5em 2em
|
||||
padding: 2.25em 1.5em 2em
|
||||
z-index: 1
|
||||
background: #f5f5f5
|
||||
border-bottom: 1px solid #ccc
|
||||
margin-top: -1px
|
||||
|
||||
.user-menu
|
||||
position: absolute
|
||||
|
|
@ -29,6 +30,9 @@
|
|||
content: '▾'
|
||||
float: right
|
||||
|
||||
|
||||
/* flyout navigation pattern
|
||||
----------------------------- */
|
||||
.stacked > li
|
||||
display:list-item
|
||||
> a
|
||||
|
|
@ -62,89 +66,71 @@
|
|||
border-top: 0
|
||||
}
|
||||
|
||||
/* hero box
|
||||
-------------------- */
|
||||
.site-header
|
||||
display: table
|
||||
margin: 0 auto
|
||||
width: 100%
|
||||
|
||||
.progress
|
||||
position: relative
|
||||
height: 2em
|
||||
.bar
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
color: #111
|
||||
float: right
|
||||
margin-right: 1em
|
||||
line-height: 2
|
||||
.hero-avatar, .party-member-avatar
|
||||
display: table-cell
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main-avatar-wrap {
|
||||
border-right: 1px solid grey;
|
||||
padding-right: 20px
|
||||
}
|
||||
.party-avatar-wrap {
|
||||
float: left;
|
||||
}
|
||||
.progress-bars {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
@media (min-width: 37.5em)
|
||||
.site-header
|
||||
width: 80%
|
||||
@media (min-width: 60em)
|
||||
.site-header
|
||||
width: 60%
|
||||
|
||||
$worse = rgb(244, 204, 204)
|
||||
$neutral = rgb(255, 242, 204)
|
||||
|
||||
.progress-bars
|
||||
.hero-avatar, .party-member-avatar
|
||||
padding: 0
|
||||
margin: 0
|
||||
.progress
|
||||
vertical-align: top
|
||||
|
||||
.hero-avatar
|
||||
width: 90px
|
||||
|
||||
.party-member-avatar
|
||||
width: 90px
|
||||
|
||||
|
||||
/* progress bars
|
||||
-------------------- */
|
||||
.hero-stats
|
||||
padding: 0 0.5em
|
||||
display: table-cell
|
||||
vertical-align: middle
|
||||
|
||||
.meter, .bar
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
|
||||
.meter
|
||||
position: relative
|
||||
background: white
|
||||
opacity: 1
|
||||
outline: 1px solid rgba(0,0,0,0.2)
|
||||
outline-offset: -1px
|
||||
overflow: hidden
|
||||
box-shadow: none
|
||||
margin-bottom: 1em
|
||||
overflow: visible // firefox outline fix
|
||||
margin-bottom: 1.5em
|
||||
height: 2em
|
||||
|
||||
.bar
|
||||
background-image: none
|
||||
background: none
|
||||
border: 1px solid rgba(0,0,0,0.2)
|
||||
border: 0
|
||||
box-shadow: none
|
||||
height: 100%
|
||||
|
||||
.progress-danger .bar
|
||||
|
||||
.health .bar
|
||||
background-color: darken($worse, 38%)
|
||||
|
||||
.progress-warning .bar
|
||||
.experience .bar
|
||||
background-color: darken($neutral, 30%)
|
||||
|
||||
|
||||
/* hero box
|
||||
-------------------- */
|
||||
.hero-box
|
||||
display: table
|
||||
margin: 0 auto
|
||||
|
||||
.hero-box > [class^="hero-"]
|
||||
display: table-cell
|
||||
vertical-align: top
|
||||
|
||||
@media (min-width: 37.5em)
|
||||
.hero-box
|
||||
width: 70%
|
||||
@media (min-width: 60em)
|
||||
.hero-box
|
||||
width: 70%
|
||||
|
||||
.main-avatar-wrap, .party-avatar-wrap
|
||||
display: inline-block
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.main-avatar-wrap
|
||||
width: 105px
|
||||
|
||||
.party-avatar-wrap
|
||||
|
||||
.hero-progress
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.hero-party-member
|
||||
width: 105px
|
||||
.meter-text
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 1em
|
||||
z-index: 1
|
||||
color: #111
|
||||
line-height: 2
|
||||
|
|
@ -2,14 +2,7 @@
|
|||
// ========================
|
||||
|
||||
// color variables
|
||||
$worst = rgb(230, 184, 175)
|
||||
$worse = rgb(244, 204, 204)
|
||||
$bad = rgb(252, 229, 205)
|
||||
$neutral = rgb(255, 242, 204)
|
||||
$good = rgb(217, 234, 211)
|
||||
$better = rgb(208, 224, 227)
|
||||
$best = rgb(201, 218, 248)
|
||||
$completed = rgb(217, 217, 217)
|
||||
@import "./color-vars.styl";
|
||||
|
||||
// array of keywords and their associated color vars
|
||||
$stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best)
|
||||
|
|
|
|||
|
|
@ -1,34 +1,35 @@
|
|||
<header:>
|
||||
{#unless equal(_user.preferences.hideHeader,true)}
|
||||
<div class='hero-box'>
|
||||
<header class="site-header" role="banner">
|
||||
<!-- avatar -->
|
||||
<figure class="hero-avatar main-avatar-wrap">
|
||||
<app:avatar:avatar profile={_user} main="true" />
|
||||
<figure class="hero-avatar">
|
||||
<app:avatar:avatar profile={_user} main="true">
|
||||
</figure>
|
||||
|
||||
<!-- progress bars -->
|
||||
<div class="hero-progress progress-bars">
|
||||
<div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
|
||||
<!-- stat bars -->
|
||||
<div class="hero-stats">
|
||||
<div class="meter health" 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>
|
||||
<span class="meter-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="meter experience" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></div>
|
||||
<span class="progress-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>
|
||||
{/}
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
|
||||
</span>
|
||||
<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>
|
||||
{/}
|
||||
<i class=icon-star></i> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
<!-- hiding the button until we revamp stats/graphs -->
|
||||
<!-- <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="
|
||||
<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>
|
||||
|
|
@ -45,6 +46,5 @@
|
|||
</figure>
|
||||
{{/}}
|
||||
{{/}}
|
||||
<!-- close hero box -->
|
||||
</div>
|
||||
</header>
|
||||
{/}
|
||||
|
|
@ -25,13 +25,13 @@
|
|||
<Header:>
|
||||
<app:modals:modals />
|
||||
<ui:connectionAlert>
|
||||
<header class="container-fluid site-header">
|
||||
<div class="header-wrap">
|
||||
|
||||
{#if _undo}<a x-bind="click:undo" class='label undo-button'>Undo</a>{/}
|
||||
|
||||
<app:settings:menu />
|
||||
<app:header:header />
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<Body:>
|
||||
<br/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue