mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-01 07:21:15 +00:00
add separate game-pane from tasks-pane, make layout smoother #828
This commit is contained in:
Tyler Renelle
parent
584eb3e936
commit
60b5783689
10 changed files with 261 additions and 221 deletions
|
|
@ -22,6 +22,10 @@ module.exports.app = (appExports, model) ->
|
|||
appExports.profileChangeActive = (e, el) ->
|
||||
uid = $(el).attr('data-uid')
|
||||
model.ref '_profileActive', model.at("users.#{uid}")
|
||||
model.set '_profileActiveMain', user.get('id') is uid
|
||||
browser.setupTooltips(model)
|
||||
|
||||
appExports.toggleGamePane = ->
|
||||
model.set '_gamePane', !model.get('_gamePane')
|
||||
$('[rel=tooltip]').tooltip()
|
||||
$('[rel=popover]').popover()
|
||||
|
||||
|
|
|
|||
12
styles/app/game-pane.styl
Normal file
12
styles/app/game-pane.styl
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.full-width
|
||||
width: 100%
|
||||
|
||||
.border-right
|
||||
border-right: 1px solid #ddd
|
||||
|
||||
.game-tabs a
|
||||
cursor:pointer
|
||||
|
||||
.tab-notification
|
||||
color: #fff;
|
||||
background-color: #51a351
|
||||
|
|
@ -22,6 +22,8 @@
|
|||
@import "./header.styl";
|
||||
@import "./scrollbars.styl";
|
||||
|
||||
@import "./game-pane.styl";
|
||||
|
||||
// fix exploding to very wide for some reason
|
||||
.datepicker
|
||||
width: 210px
|
||||
|
|
|
|||
|
|
@ -1,46 +1,6 @@
|
|||
<modals:>
|
||||
<app:modals:modal modalId="avatar-modal">
|
||||
{#if _profileActiveMain}
|
||||
<span class='option-box pull-right wallet'>
|
||||
<app:rewards:userTokens />
|
||||
</span>
|
||||
|
||||
{#with _user.preferences}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle='tab' href="#profileCustomize">Avatar</a></li>
|
||||
<li><a data-toggle='tab' href="#profileEdit">Profile</a></li>
|
||||
{#if _user.flags.dropsEnabled}
|
||||
<li><a data-toggle='tab' data-target="#profileInventory">Inventory</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profileMarket">Market</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profileStable">Stable</a></li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="profileCustomize">
|
||||
<app:avatar:customize />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileEdit">
|
||||
<app:avatar:profile user="{_user}" main="true" />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileInventory">
|
||||
<app:avatar:inventory />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileMarket">
|
||||
<app:avatar:market />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileStable">
|
||||
<app:pets:stable />
|
||||
</div>
|
||||
</div>
|
||||
{/}
|
||||
{else}
|
||||
<app:avatar:profile profile={_profileActive} />
|
||||
{/}
|
||||
<app:avatar:profile profile={_profileActive} />
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
|
|
@ -86,10 +46,6 @@
|
|||
</figure>
|
||||
|
||||
<customize:>
|
||||
<!-- user avatar preview -->
|
||||
<figure class="avatar-window">
|
||||
<app:avatar:avatar profile={_user} minimal="true" />
|
||||
</figure>
|
||||
|
||||
<!-- customization options -->
|
||||
{#with _user.preferences as :p}
|
||||
|
|
@ -140,79 +96,76 @@
|
|||
{/}
|
||||
{/}
|
||||
|
||||
<profile-edit:>
|
||||
<!--<a class='btn btn-success' x-bind="click:profileSave">Save</a>-->
|
||||
<!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
|
||||
<img class='pull-right' src="{_user.profile.imageUrl}" />
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileImageUrl">Photo Url</label>
|
||||
<div class="controls">
|
||||
<input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileFullName">Full Name</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileBlurb">Blurb</label>
|
||||
<div class="controls">
|
||||
<textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileWebsite">Websites</label>
|
||||
<div class="controls">
|
||||
<form x-bind="submit:profileAddWebsite">
|
||||
<input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
|
||||
</form>
|
||||
</div>
|
||||
<ul>
|
||||
<!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
|
||||
{#each _user.profile.websites as :website}
|
||||
<li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
|
||||
{/}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<profile:>
|
||||
<div class='row-fluid'>
|
||||
<div class='span6 well'>
|
||||
{#if and(_profileEditing, _profileActiveMain)}
|
||||
<a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
||||
<!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak -->
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileImageUrl">Photo Url</label>
|
||||
<div class="controls">
|
||||
<input type="url" id="profileImageUrl" value="{_user.profile.imageUrl}" placeholder="Image Url"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileFullName">Full Name</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="profileFullName" placeholder="Full Name" value="{_user.profile.name}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileBlurb">Blurb</label>
|
||||
<div class="controls">
|
||||
<textarea id="profileBlurb" placeholder="Blurb" >{_user.profile.blurb}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="profileWebsite">Websites</label>
|
||||
<div class="controls">
|
||||
<form x-bind="submit:profileAddWebsite">
|
||||
<input type="url" id="profileWebsite" value="{_newProfileWebsite}" placeholder="Add Website"/>
|
||||
</form>
|
||||
</div>
|
||||
<ul>
|
||||
<!-- would prefer if there were and index in #each, instead using data-website to search with indexOf -->
|
||||
{#each _user.profile.websites as :website}
|
||||
<li>{:website} <a data-website="{:website}" x-bind="click:profileRemoveWebsite"><i class='icon-remove'></i></a></li>
|
||||
{/}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<a class='btn btn-success' x-bind="click:profileSave">Save</a>
|
||||
{else}
|
||||
<h3>
|
||||
{#if _profileActive.profile.name}
|
||||
{_profileActive.profile.name}
|
||||
{else}
|
||||
{username(_profileActive.auth, _profileActive.profile.name)}
|
||||
<div class='span6'>
|
||||
<h3>
|
||||
{#if _profileActive.profile.name}
|
||||
{_profileActive.profile.name}
|
||||
{else}
|
||||
{username(_profileActive.auth, _profileActive.profile.name)}
|
||||
{/}
|
||||
{#if _profileActiveMain}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
|
||||
</h3>
|
||||
{#if _profileActive.profile.imageUrl}
|
||||
<img src="{_profileActive.profile.imageUrl}" />
|
||||
{/}
|
||||
{#if _profileActive.profile.blurb}
|
||||
<p>{_profileActive.profile.blurb}</p>
|
||||
{/}
|
||||
{#if _profileActive.profile.websites}
|
||||
<ul>
|
||||
{#each _profileActive.profile.websites as :website}
|
||||
<li>{:website}</li>
|
||||
{/}
|
||||
{#if _profileActiveMain}<a class='btn pull-right' x-bind="click:profileEdit">Edit</a>{/}
|
||||
</h3>
|
||||
{#if _profileActive.profile.imageUrl}
|
||||
<img src="{@user.profile.imageUrl}" />
|
||||
{/}
|
||||
{#if _profileActive.profile.blurb}
|
||||
<p>{_profileActive.profile.blurb}</p>
|
||||
{/}
|
||||
{#if _profileActive.profile.websites}
|
||||
<ul>
|
||||
{#each _profileActive.profile.websites as :website}
|
||||
<li>{:website}</li>
|
||||
{/}
|
||||
</ul>
|
||||
{/}
|
||||
</ul>
|
||||
{/}
|
||||
</div>
|
||||
|
||||
<div class='span6'>
|
||||
<h3>Achievements</h3>
|
||||
<app:avatar:achievements />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<rest:>
|
||||
|
|
|
|||
65
views/app/game-pane.html
Normal file
65
views/app/game-pane.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<main:>
|
||||
<div class="module full-width">
|
||||
|
||||
<span class='option-box pull-right wallet'>
|
||||
<app:rewards:userTokens />
|
||||
</span>
|
||||
|
||||
<ul class="nav nav-tabs game-tabs">
|
||||
<li class="active"><a data-toggle='tab' data-target="#profileCustomize"><i class='icon-user'></i> Profile</a></li>
|
||||
<li class='{#if _user.party.invitation}tab-notification{/}'>
|
||||
<a data-toggle='tab' data-target="#profileParty"><i class='icon-heart'></i> Party</a>
|
||||
</li>
|
||||
{#if _user.flags.dropsEnabled}
|
||||
<li><a data-toggle='tab' data-target="#profileInventory"><i class='icon-gift'></i> Inventory</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profileStable"><i class='icon-leaf'></i> Stable</a></li>
|
||||
{/if}
|
||||
<li><a data-toggle='tab' data-target="#profileTavern"><i class='icon-glass'></i> Tavern</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profileAchievements"><i class='icon-certificate'></i> Achievements</a></li>
|
||||
<li><a data-toggle='tab' data-target="#profileSettings"><i class='icon-wrench'></i> Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane active" id="profileCustomize">
|
||||
<div class='row-fluid'>
|
||||
<div class='span6 border-right'>
|
||||
<app:avatar:customize />
|
||||
</div>
|
||||
<div class='span6'>
|
||||
<app:avatar:profile-edit />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileParty">
|
||||
<app:party:party />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileAchievements">
|
||||
<app:avatar:achievements />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileInventory">
|
||||
<div class='row-fluid'>
|
||||
<div class='span6 border-right'>
|
||||
<app:avatar:inventory />
|
||||
</div>
|
||||
<div class='span6'>
|
||||
<app:avatar:market />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileStable">
|
||||
<app:pets:stable />
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="profileSettings">
|
||||
{{#if _loggedIn}}
|
||||
<app:settings:settings-pane />
|
||||
{{/}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
<import: src="settings">
|
||||
<import: src="party">
|
||||
<import: src="pets">
|
||||
<import: src="game-pane">
|
||||
|
||||
<Title:>
|
||||
HabitRPG | Gamify Your Life
|
||||
|
|
@ -36,9 +37,14 @@
|
|||
<div id="notification-area"></div>
|
||||
<div id="wrap">
|
||||
<app:alerts:flash />
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
<div id="exp-chart" style="display:none;"></div>
|
||||
|
||||
<div id=main class="grid">
|
||||
<app:tasks:taskLists />
|
||||
{#if _gamePane}
|
||||
<app:game-pane:main />
|
||||
{else}
|
||||
<app:tasks:taskLists />
|
||||
{/}
|
||||
</div>
|
||||
</div>
|
||||
<app:footer:footer />
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
<app:avatar:modals />
|
||||
<app:settings:modals />
|
||||
<app:party:modals />
|
||||
<app:pets:modals />
|
||||
|
||||
<!-- Game Over Modal -->
|
||||
|
|
|
|||
|
|
@ -1,46 +1,41 @@
|
|||
<modals:>
|
||||
<app:modals:modal modalId="party-modal">
|
||||
{#if _user.party.current}
|
||||
<h2>{{_party.name}}</h2>
|
||||
<table class="table table-striped">
|
||||
{{#each _partyMembers as :member}}
|
||||
<tr><td>{{username(:member.auth, :member.profile.name)}}</td><td>({{:member.id}})</td></tr>
|
||||
{{/}}
|
||||
</table>
|
||||
<form class=form-inline x-bind="submit: partyInvite">
|
||||
{#if _partyError}
|
||||
<div class='alert alert-danger'>{_partyError}</div>
|
||||
{/}
|
||||
<div class='control-group'>
|
||||
<input type="text" class="input-medium" placeholder="User Id" value="{_newPartyMember}">
|
||||
<input type="submit" class="btn" value="Invite" />
|
||||
</div>
|
||||
</form>
|
||||
<a class='btn btn-danger' x-bind="click: partyLeave">Leave</a>
|
||||
|
||||
{else if _user.party.invitation}
|
||||
<!-- TODO show by whom -->
|
||||
<h2>You're Invited To {_party.name}</h2>
|
||||
<a class='btn btn-success' x-bind="click: partyAccept">Accept</a>
|
||||
<a class='btn btn-danger' x-bind="click: partyReject">Reject</a>
|
||||
|
||||
{else}
|
||||
<h2>Create A Party</h2>
|
||||
<!-- Not in a party , no invites - create a new one -->
|
||||
<p>You are not in a party. You can either create one and invite friends, or if you want to join an existing party, have them enter:</p>
|
||||
<pre class=prettyprint>{_user.id}</pre>
|
||||
<form class=form-inline x-bind="submit: partyCreate">
|
||||
{#if _partyError}
|
||||
<div class='alert alert-danger'>{_partyError}</div>
|
||||
{/}
|
||||
<div class=control-group>
|
||||
<input type="text" class="input-medium" placeholder="Party Name" value="{_newParty}" />
|
||||
<input type="submit" class="btn" value="Create" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<party:>
|
||||
{#if _user.party.current}
|
||||
<h2>{{_party.name}}</h2>
|
||||
<table class="table table-striped">
|
||||
{{#each _partyMembers as :member}}
|
||||
<tr><td>{{username(:member.auth, :member.profile.name)}}</td><td>({{:member.id}})</td></tr>
|
||||
{{/}}
|
||||
</table>
|
||||
<form class=form-inline x-bind="submit: partyInvite">
|
||||
{#if _partyError}
|
||||
<div class='alert alert-danger'>{_partyError}</div>
|
||||
{/}
|
||||
<@footer>
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</@footer>
|
||||
</app:modals:modal>
|
||||
<div class='control-group'>
|
||||
<input type="text" class="input-medium" placeholder="User Id" value="{_newPartyMember}">
|
||||
<input type="submit" class="btn" value="Invite" />
|
||||
</div>
|
||||
</form>
|
||||
<a class='btn btn-danger' x-bind="click: partyLeave">Leave</a>
|
||||
|
||||
{else if _user.party.invitation}
|
||||
<!-- TODO show by whom -->
|
||||
<h2>You're Invited To {_party.name}</h2>
|
||||
<a class='btn btn-success' x-bind="click: partyAccept">Accept</a>
|
||||
<a class='btn btn-danger' x-bind="click: partyReject">Reject</a>
|
||||
|
||||
{else}
|
||||
<h2>Create A Party</h2>
|
||||
<!-- Not in a party , no invites - create a new one -->
|
||||
<p>You are not in a party. You can either create one and invite friends, or if you want to join an existing party, have them enter:</p>
|
||||
<pre class=prettyprint>{_user.id}</pre>
|
||||
<form class=form-inline x-bind="submit: partyCreate">
|
||||
{#if _partyError}
|
||||
<div class='alert alert-danger'>{_partyError}</div>
|
||||
{/}
|
||||
<div class=control-group>
|
||||
<input type="text" class="input-medium" placeholder="Party Name" value="{_newParty}" />
|
||||
<input type="submit" class="btn" value="Create" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<inventory:>
|
||||
<div class='row-fluid'>
|
||||
<div class='span6 well'>
|
||||
<div class='{#if _hatchEgg}span6{/} well'>
|
||||
<menu type="list" class="inventory-list">
|
||||
<li class="customize-menu">
|
||||
<menu label="Eggs" class='pets-menu'>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,50 @@
|
|||
<modals:>
|
||||
{{#if _loggedIn}}
|
||||
<app:modals:modal modalId="settings-modal" header="Settings">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#" data-target="#settings-settings">General</a></li>
|
||||
<li><a data-toggle="tab" href="#" data-target="#settings-api">API</a></li>
|
||||
</ul>
|
||||
<settings-pane:>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#" data-target="#settings-settings">General</a></li>
|
||||
<li><a data-toggle="tab" href="#" data-target="#settings-api">API</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active personal-options" id="settings-settings">
|
||||
<h4>Custom Day Start</h4>
|
||||
<div class="option-group option-short">
|
||||
<input class="option-content option-time" type="number" min=0 max=24 value={_user.preferences.dayStart}>
|
||||
<span class="input-suffix">:00 (24h clock)</span>
|
||||
</div>
|
||||
<div>
|
||||
<small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<h4>Misc</h4>
|
||||
<button x-bind="click:toggleHeader" class="btn">{#if _user.preferences.hideHeader}Show Header{else}Hide Header{/}</button>
|
||||
<br/><br/>
|
||||
<app:avatar:rest />
|
||||
|
||||
{{#if _user.auth.local}}
|
||||
<hr/>
|
||||
<h4>Change Password</h4>
|
||||
<derby-auth:changePassword />
|
||||
{{/}}
|
||||
|
||||
<hr/>
|
||||
<h4>Danger Zone</h4>
|
||||
<a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
|
||||
<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
|
||||
<a class='btn btn-danger' data-target="#delete-modal" data-toggle="modal" rel=tooltip title="Delete your account.">Delete</a>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings-api">
|
||||
<small>Copy these for use in third party applications.</small>
|
||||
<h6>User ID</h6>
|
||||
<pre class=prettyprint>{_user.id}</pre>
|
||||
|
||||
<h6>API Token</h6>
|
||||
<pre class=prettyprint>{_user.apiToken}</pre>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active personal-options" id="settings-settings">
|
||||
<h4>Custom Day Start</h4>
|
||||
<div class="option-group option-short">
|
||||
<input class="option-content option-time" type="number" min=0 max=24 value={_user.preferences.dayStart}>
|
||||
<span class="input-suffix">:00 (24h clock)</span>
|
||||
</div>
|
||||
<div>
|
||||
<small>Habit defaults to check and reset your dailies at midnight each day. You can customize that here (Enter number between 0 and 24).</small>
|
||||
</div>
|
||||
|
||||
<@footer>
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</@footer>
|
||||
</app:modals:modal>
|
||||
<hr/>
|
||||
<h4>Misc</h4>
|
||||
<button x-bind="click:toggleHeader" class="btn">{#if _user.preferences.hideHeader}Show Header{else}Hide Header{/}</button>
|
||||
<br/><br/>
|
||||
<app:avatar:rest />
|
||||
|
||||
{{#if _user.auth.local}}
|
||||
<hr/>
|
||||
<h4>Change Password</h4>
|
||||
<derby-auth:changePassword />
|
||||
{{/}}
|
||||
|
||||
<hr/>
|
||||
<h4>Danger Zone</h4>
|
||||
<a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal" rel=tooltip title="Resets your entire account (dangerous).">Reset</a>
|
||||
<a class='btn btn-danger' data-target="#restore-modal" data-toggle="modal" rel=tooltip title="Restores attributes to your character.">Restore</a>
|
||||
<a class='btn btn-danger' data-target="#delete-modal" data-toggle="modal" rel=tooltip title="Delete your account.">Delete</a>
|
||||
</div>
|
||||
<div class="tab-pane" id="settings-api">
|
||||
<small>Copy these for use in third party applications.</small>
|
||||
<h6>User ID</h6>
|
||||
<pre class=prettyprint>{_user.id}</pre>
|
||||
|
||||
<h6>API Token</h6>
|
||||
<pre class=prettyprint>{_user.apiToken}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modals:>
|
||||
{{#if _loggedIn}}
|
||||
<app:modals:modal modalId="reset-modal" header="Reset">
|
||||
<p>This resets your entire account - your tasks will be deleted and your character will start over.</p>
|
||||
<p>This is highly discouraged because you'll lose historical data, which is useful for graphing your progress over time. However, some people find it useful in the beginning after playing with the app for a while.</p>
|
||||
|
|
@ -136,18 +131,27 @@
|
|||
|
||||
<menu:>
|
||||
<div class="user-menu">
|
||||
{{#unless _loggedIn}}
|
||||
<button class="task-action-btn tile solid" href="#" data-target="#login-modal" data-toggle="modal">Login / Register</button>
|
||||
{{else}}
|
||||
<ul class="nav site-nav">
|
||||
<li class="flyout">
|
||||
<h1 class="task-action-btn tile solid user-reporter">{#if _user.party.invitation}<i class='icon-bell'></i> {/}{{username(_user.auth, _user.profile.name)}}</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><a class="task-action-btn tile solid" data-target="#party-modal" data-toggle="modal">{#if _user.party.invitation}<i class='icon-bell'></i> {/}Party</a></li>
|
||||
<li><a class="task-action-btn tile solid" href="/logout">Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{{/}}
|
||||
<table>
|
||||
<tr style='vertical-align:top;'>
|
||||
<td>
|
||||
<a class="pull-left btn {#if _gamePane}active{/}" style='cursor:pointer' x-bind='click:toggleGamePane' rel=tooltip title="Toggle Tasks / Game Options" data-placement=bottom>
|
||||
{#if _user.party.invitation}<i class='icon-bell'></i> {/}<img src="/favicon.ico" />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{#unless _loggedIn}}
|
||||
<button class="task-action-btn tile solid" style='cursor:pointer' data-target="#login-modal" data-toggle="modal">Login / Register</button>
|
||||
{{else}}
|
||||
<ul class="nav site-nav">
|
||||
<li class="flyout">
|
||||
<h1 class="task-action-btn tile solid user-reporter">{{username(_user.auth, _user.profile.name)}}</h1>
|
||||
<ul class="flyout-content nav stacked">
|
||||
<li><a class="task-action-btn tile solid" href="/logout">Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{{/}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue