mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-31 19:20:25 +00:00
rewrite header markup, reduce fiddly avatar css, improve mobile layout
This commit is contained in:
Zachary Kain
parent
c2dd51959f
commit
7a24b39edc
3 changed files with 84 additions and 64 deletions
|
|
@ -1,24 +1,3 @@
|
|||
#character
|
||||
float:none
|
||||
margin:0px auto
|
||||
|
||||
td#bars
|
||||
padding-top: 10px
|
||||
|
||||
#bars
|
||||
.progress
|
||||
position: relative
|
||||
height: 25px
|
||||
.bar
|
||||
height: 25px
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 3px
|
||||
color: black
|
||||
|
||||
|
||||
// basic avatar sprite group
|
||||
.avatar
|
||||
cursor: pointer
|
||||
|
|
@ -36,8 +15,6 @@
|
|||
|
||||
// main and party avatars
|
||||
.main-avatar, .party-avatar
|
||||
margin-top: -12px
|
||||
|
||||
.character-sprites
|
||||
top: -15px
|
||||
|
||||
|
|
|
|||
|
|
@ -29,15 +29,61 @@ html,body,p,h1,ul,li,table,tr,th,td
|
|||
white-space: nowrap
|
||||
position:fixed
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
z-index: 1000
|
||||
|
||||
#head .pull-right
|
||||
margin-right: 2%
|
||||
margin-right: 0
|
||||
margin-left: 1%
|
||||
|
||||
.modal
|
||||
whitespace:normal
|
||||
|
||||
.dropdown-menu
|
||||
right: 0
|
||||
left: auto
|
||||
|
||||
.char-status
|
||||
// border: 1px dotted grey
|
||||
|
||||
.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: 25px
|
||||
.bar
|
||||
height: 25px
|
||||
border: 1px solid black
|
||||
.progress-text
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 3px
|
||||
color: black
|
||||
|
||||
@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
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -205,8 +205,9 @@ do a find for the string after "→"
|
|||
<Header:>
|
||||
<app:modalDialogs />
|
||||
<ui:connectionAlert>
|
||||
<div id="head">
|
||||
<div id="head" class="container-fluid">
|
||||
|
||||
<!-- options menu -->
|
||||
<div class='pull-right'>
|
||||
{#unless _loggedIn}
|
||||
<a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
|
||||
|
|
@ -232,52 +233,48 @@ do a find for the string after "→"
|
|||
{/}
|
||||
</div>
|
||||
|
||||
<div class='container-fluid'>
|
||||
<!-- main header -->
|
||||
<div class="row-fluid">
|
||||
<div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
|
||||
|
||||
<!-- avatar -->
|
||||
<figure class="main-avatar-wrap">
|
||||
<app:avatar profile={_user} main="true" />
|
||||
</figure>
|
||||
|
||||
<div class='row-fluid'>
|
||||
<div id=character class='{#if gt(_partyMembers.length,1)}span8{else}span5{/}'>
|
||||
<table>
|
||||
<tr>
|
||||
<!-- party -->
|
||||
{#each _partyMembers as :member}
|
||||
{#unless equal(:member.id, _userId)}
|
||||
<figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
|
||||
<app:avatar profile={:member} party="true" />
|
||||
</figure>
|
||||
{/}
|
||||
{/}
|
||||
|
||||
<!-- Avatar -->
|
||||
<td>
|
||||
<app:avatar profile={_user} main="true" />
|
||||
</td>
|
||||
<!-- progress bars -->
|
||||
<div class="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> {round(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bars -->
|
||||
<td id="bars" style="width:{#if gt(_partyMembers.length,1)}75%{else}90%{/};">
|
||||
<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> {round(_user.stats.hp)} / 50</span>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></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> {round(_user.stats.exp)} / {_tnl}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Party -->
|
||||
{#each _partyMembers as :member}
|
||||
{#unless equal(:member.id, _userId)}
|
||||
<td rel="tooltip" title="{username(:member.auth)}" data-placement="bottom" >
|
||||
<app:avatar profile={:member} party="true" />
|
||||
</td>
|
||||
{/}
|
||||
<div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
|
||||
<div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></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>
|
||||
{/}
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
|
||||
</span>
|
||||
</div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
</div>
|
||||
<!-- end .char-status -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- end .row-fluid -->
|
||||
</div>
|
||||
|
||||
<!-- end #head -->
|
||||
</div>
|
||||
|
||||
<Body:>
|
||||
|
|
|
|||
Loading…
Reference in a new issue