Updated character lists to Polymer 1
This commit is contained in:
Stefan Zermatten
@@ -1,10 +1,32 @@
|
||||
.characterCards {
|
||||
padding: 4px;
|
||||
.character-card{
|
||||
background-color: #fff;
|
||||
height: 300px;
|
||||
min-width: 250px;
|
||||
max-width: 500px;
|
||||
flex-basis: 300px;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.characterCard{
|
||||
width: 272px;
|
||||
margin: 4px;
|
||||
min-width: 272px;
|
||||
flex-grow: 1;
|
||||
.character-card .image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.character-card .initials {
|
||||
font-size: 100px;
|
||||
color: rgba(255,255,255,0.1);
|
||||
background: linear-gradient(-8deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
.character-card paper-item {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.character-card .name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.character-card paper-ripple {
|
||||
color: #fff ;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,61 @@
|
||||
<template name="characterList">
|
||||
<app-toolbar class="app-grey white-text">
|
||||
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
|
||||
<div flex>
|
||||
Characters
|
||||
</div>
|
||||
</app-toolbar>
|
||||
<div class="scroll-y" fit>
|
||||
{{#if currentUser}}
|
||||
{{#if characters.count}}
|
||||
<div layout horizontal wrap class="characterCards">
|
||||
{{# each characters}}
|
||||
{{#with characterDetails}}
|
||||
{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
{{> gridPadding class="characterCard" num=12}}
|
||||
</div>
|
||||
<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 characters}}
|
||||
<a class="character-card flex layout vertical" href="/character/{{_id}}">
|
||||
<div class="flex image">
|
||||
<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}}
|
||||
</div>
|
||||
<paper-item>
|
||||
<paper-item-body two-lines>
|
||||
<div class="name">
|
||||
{{name}}
|
||||
</div>
|
||||
<div secondary>
|
||||
{{alignment}} {{gender}} {{race}}
|
||||
</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
<paper-ripple></paper-ripple>
|
||||
</a>
|
||||
{{/each}}
|
||||
{{> gridPadding class="character-card flex layout vertical" num=12}}
|
||||
</div>
|
||||
{{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 don't seem to have any characters :(</div>
|
||||
<paper-button class="addCharacter red-button" raised>Add Character</paper-button>
|
||||
<div>You must sign in to view your characters</div>
|
||||
</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>
|
||||
<paper-fab class="floatyButton addCharacter"
|
||||
icon="add"
|
||||
title="Add"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Add"
|
||||
hero-id="main"></paper-fab>
|
||||
</div>
|
||||
</template>
|
||||
<div class="fab-buffer"></div>
|
||||
<paper-fab class="floatyButton addCharacter"
|
||||
icon="add"
|
||||
title="Add"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Add"
|
||||
hero-id="main"></paper-fab>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
|
||||
@@ -1,20 +1,26 @@
|
||||
Template.characterList.helpers({
|
||||
characterDetails: function(){
|
||||
var char = Characters.findOne(
|
||||
this._id,
|
||||
{fields: {name: 1, gender: 1, alignment: 1, race:1, color: 1}}
|
||||
characters(){
|
||||
var userId = Meteor.userId();
|
||||
return Characters.find(
|
||||
{
|
||||
$or: [
|
||||
{readers: userId},
|
||||
{writers: userId},
|
||||
{owner: userId},
|
||||
]
|
||||
},
|
||||
{
|
||||
fields: {name: 1, picture: 1, color: 1, race: 1, alignment: 1, gender: 1},
|
||||
sort: {name: 1},
|
||||
}
|
||||
);
|
||||
char.title = char.name;
|
||||
char.field = "base";
|
||||
char.class = "characterCard";
|
||||
return char;
|
||||
}
|
||||
});
|
||||
},
|
||||
initials(name){
|
||||
return name.replace(/[^A-Z]/g, "");
|
||||
},
|
||||
})
|
||||
|
||||
Template.characterList.events({
|
||||
"tap .characterCard": function(event, instance){
|
||||
Router.go("characterSheet", {_id: this._id});
|
||||
},
|
||||
"tap .addCharacter": function(event, template) {
|
||||
GlobalUI.showDialog({
|
||||
heading: "New Character",
|
||||
|
||||
@@ -1,23 +1,9 @@
|
||||
.singleLineItem {
|
||||
color: black;
|
||||
color: rgba(0, 0, 0, 0.870588);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
padding: 8px 0 8px 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
prevent character names from wrapping
|
||||
*/
|
||||
|
||||
.singleLineItem iron-icon {
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.singleLineItem div {
|
||||
text-overflow: ellipsis;
|
||||
/* Required for text-overflow to do anything */
|
||||
.character-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template name="characterSideList">
|
||||
<core-item icon="social:people" label="Characters"></core-item>
|
||||
{{#if characters.count}}
|
||||
<div>
|
||||
<div class="side-list">
|
||||
{{#each characters}}
|
||||
<a href={{pathFor route="characterSheet" data=this}}
|
||||
class="singleLineItem characterRepresentative"
|
||||
layout horizontal center>
|
||||
<iron-icon icon="image:brightness-1"></iron-icon>
|
||||
<div>{{name}}</div>
|
||||
<a href={{pathFor route="characterSheet" data=this}} tabindex="-1" class="side-list-character">
|
||||
<paper-item class="short">
|
||||
<div class="character-name">
|
||||
{{name}}
|
||||
</div>
|
||||
</paper-item>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ Template.characterSideList.helpers({
|
||||
sort: {name: 1},
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Template.characterSideList.events({
|
||||
|
||||
Reference in New Issue
Block a user