Files
DiceCloud/rpg-docs/client/views/characterList/characterList.html
2017-09-28 11:47:03 +02:00

89 lines
2.7 KiB
HTML

<template name="characterList">
<app-header-layout has-scrolling-region fullbleed>
<app-header class="app-grey white-text" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div style="font-weight: 300;">Characters</div>
</app-toolbar>
</app-header>
<div class="padded">
{{#if currentUser}}
{{#if characters.count}}
<div class="character-list layout horizontal wrap">
{{# each charactersWithNoParty}}
{{> characterCard}}
{{/each}}
{{> gridPadding class="character-card flex layout vertical" num=12}}
</div>
{{# each party in parties}}
<div class="party" data-id={{party._id}}>
{{#with party}}
<div class="partyHeader clickable paper-font-title padded">
{{name}}
<iron-icon icon="create"></iron-icon>
</div>
{{/with}}
<div class="character-list layout horizontal wrap">
{{# each charactersInParty party._id}}
{{> characterCard}}
{{/each}}
{{> gridPadding class="character-card flex layout vertical" num=12}}
</div>
</div>
{{/each}}
{{else}}
<div layout vertical center center-justified class="padded">
<div>You don't seem to have any characters yet</div>
<paper-button class="addCharacter red-button" raised>Add Character</paper-button>
</div>
{{/if}}
{{else}}
<div layout vertical center center-justified class="padded">
<div>You must sign in to view your characters</div>
</div>
{{/if}}
<div class="fab-buffer"></div>
{{#fabMenu}}
<div>
<paper-fab icon="social:group"
class="addParty"
mini>
</paper-fab>
{{#simpleTooltip class="always"}} New Party {{/simpleTooltip}}
</div>
<div>
<paper-fab icon="face"
class="addCharacter"
mini>
</paper-fab>
{{#simpleTooltip class="always"}} New Character {{/simpleTooltip}}
</div>
{{/fabMenu}}
</div>
</app-header-layout>
</template>
<template name="characterCard">
<a class="character-card flex layout vertical end-justified" href="{{characterPath this}}">
<iron-image class="fit {{colorClass}}"
sizing="cover" preload fade src={{picture}}>
</iron-image>
{{#unless picture}}
<div class="fit initials layout vertical center center-justified">
{{initials name}}
</div>
{{/unless}}
<paper-item>
<paper-item-body two-lines>
<div class="name white87">
{{name}}
</div>
<div secondary style="color: #8a8a8a; color: rgba(255,255,255,0.87);">
{{alignment}} {{gender}} {{race}}
</div>
</paper-item-body>
</paper-item>
<paper-ripple></paper-ripple>
</a>
</template>