jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite all css to scss and refactor html

Browse Source
This commit is contained in:
Stefan Zermatten
2015-05-15 16:55:05 +02:00
parent e40dd196e6
commit 061f1fd0a5
43 changed files with 748 additions and 841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
rpg-docs/client/views/character/features/features.html
View File

@@ -1,7 +1,7 @@
<template name="features">
<div fit>
<div class="scroll-y" fit>
<div class="containers">
<div class="column-container">
<!--expertiseDice-->
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
<!--ki-->
@@ -14,22 +14,22 @@
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
<!--Attacks-->
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div flex>
<div class="containerName subhead">Attacks</div>
</div>
<!--<paper-icon-button class="black54" id="addAttackButton" icon="add"></paper-icon-button>-->
<paper-shadow class="card">
<div class="top white">
Attacks
</div>
<div class="containerMain listPadded">
<div class="bottom list">
{{#each attacks}}
<div class="itemSlot">
<paper-item class="white attack" hero-id="main" {{detailHero}}>
<div layout horizontal class="fullwidth">
<div class="headline rightPadded" layout horizontal center>
<div class="item-slot">
<div class="flexible attack item"
hero-id="main" {{detailHero}}>
<div layout horizontal>
<div class="headline"
style="margin-right: 16px;"
layout horizontal center>
{{evaluateSigned ../_id attackBonus}}
</div>
<div layout vertical flex>
<div flex layout vertical>
<div class="body2">
{{name}}
</div>
@@ -43,34 +43,32 @@
{{/if}}
</div>
</div>
</paper-item>
</div>
</div>
{{/each}}
</div>
</paper-shadow>
<!--Proficiencies-->
<paper-shadow class="card container" hero-id="main" {{detailHero "proficiencies"}}>
<div id="proficiencies"
class="whiteTop"
layout horizontal center>
<div class="containerName subhead">Proficiencies</div>
<paper-shadow class="card">
<div class="white top">
Proficiencies
</div>
<div flex class="containerMain listPadded">
<div flex class="bottom list">
{{#if weaponProfs.count}}
<div class="list-subhead" layout horizontal center>Weapons</div>
<div class="subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> proficiencyListItem}}
{{/each}}
{{#if armorProfs.count}}
<div class="list-subhead" layout horizontal center>Armor</div>
<div class="subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> proficiencyListItem}}
{{/each}}
{{#if toolProfs.count}}
<div class="list-subhead" layout horizontal center>Tools</div>
<div class="subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> proficiencyListItem}}
@@ -80,23 +78,42 @@
<!--features-->
{{#each features}}
<paper-shadow class="card container featureCard" hero-id="main" {{detailHero}}>
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<paper-ripple fit></paper-ripple>
<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
<paper-ripple fit></paper-ripple>
<paper-shadow class="card featureCard"
hero-id="main" {{detailHero}}>
<div class="top {{colorClass}} subhead"
layout horizontal
hero-id="toolbar" {{detailHero}}>
<div flex hero-id="title" {{detailHero}}>
{{name}}
</div>
{{#if hasUses}}
<div style="margin-right: 8px">
{{usesLeft}}/{{usesValue}}
</div>
{{/if}}
{{#if canEnable}}
<core-tooltip label="Feature enabled" position="left">
<paper-checkbox class="enabledCheckbox" checked={{enabled}}></paper-checkbox>
<core-tooltip label="Feature enabled"
position="left">
<paper-checkbox class="enabledCheckbox"
checked={{enabled}}>
</paper-checkbox>
</core-tooltip>
{{/if}}
</div>
{{#if description}}<div flex class="containerMain body1 featureDescription">{{description}}</div>{{/if}}
{{#if description}}
<div flex class="bottom text"
>{{description}}</div>
{{/if}}
{{#if hasUses}}
<div class="containerFoot" layout horizontal center end-justified>
<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
<div layout horizontal center end-justified>
<paper-button class="useFeature"
disabled={{noUsesLeft}}>
Use
</paper-button>
<paper-button class="resetFeature"
disabled={{usesFull}}>
Reset
</paper-button>
</div>
{{/if}}
</paper-shadow>
@@ -119,18 +136,28 @@
<template name="resource">
{{#if char.attributeBase name}}
<paper-shadow class="card container" hero-id="main" {{detailHero name char._id}} layout horizontal>
<div class="containerLeft {{getColor}}" hero-id="toolbar" {{detailHero name char._id}} >
<div class="resourceButtons">
<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
<paper-shadow class="card"
hero-id="main" {{detailHero name char._id}}
layout horizontal>
<div class="left {{getColor}} display1 white-text"
hero-id="toolbar" {{detailHero name char._id}}
layout horizontal center>
<div style="margin-right: 8px;">
<paper-icon-button class="resourceUp"
icon="arrow-drop-up"
disabled={{cantIncrement}}>
</paper-icon-button>
<paper-icon-button class="resourceDown"
icon="arrow-drop-down"
disabled={{cantDecrement}}>
</paper-icon-button>
</div>
<div class="resourceValue">{{char.attributeValue name}}</div>
<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
<div>{{char.attributeValue name}}</div>
<!--<div>/{{char.attributeBase name}}</div>-->
</div>
<div class="containerRight clickable" flex relative horizontal layout center>
<div class="right clickable"
flex layout horizontal center>
{{title}}
<paper-ripple fit></paper-ripple>
</div>
</paper-shadow>
{{/if}}

4
rpg-docs/client/views/character/features/features.js
View File

@@ -65,7 +65,7 @@ Template.features.events({
}
});
},
"tap .featureCard .containerTop": function(event){
"tap .featureCard .top": function(event){
var featureId = this._id;
var charId = Template.parentData()._id;
GlobalUI.setDetail({
@@ -128,7 +128,7 @@ Template.resource.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .containerRight": function(event, instance) {
"tap .right": function(event, instance) {
GlobalUI.setDetail({
template: "attributeDialog",
data: {name: this.title, statName: this.name, charId: this.char._id},

152
rpg-docs/client/views/character/inventory/inventory.css
View File

@@ -1,152 +0,0 @@
div#stats {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.containers {
-webkit-column-width: 300px;
-moz-column-width: 300px;
column-width: 300px;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
-moz-column-fill: balance;
column-fill: balance;
padding: 8px;
}
.containerLeft {
padding: 16px 16px 16px 24px;
display: flex;
justify-content: center;
flex-direction: row;
border-radius: 2px 0 0 2px;
/* same style as display-1 */
font-size: 34px;
font-weight: 400;
color: #ffffff;
color: rgba(255,255,255,0.54);
letter-spacing: 0;
}
.statCard .containerLeft {
padding: 16px;
}
.containerRight {
padding: 16px;
/* same style as subhead */
font-size: 16px;
font-weight: 400;
margin: 0;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.resourceValue {
display: inline-block;
}
.resourceMax {
display: inline-block;
align-self: flex-end;
/* same style as subhead */
font-size: 16px;
font-weight: 400;
margin: 0;
color: #fff;
color: rgba(255,255,255,0.54);
letter-spacing: 0.010em;
}
.resourceMax:before {
content: "/";
}
.resourceButtons {
margin: -16px 8px -16px -16px;
align-self: center;
}
.resourceButtons paper-icon-button{
width: 32px;
height: 32px;
padding: 0;
display: block;
}
.resourceButtons paper-icon-button[disabled]{
color: rgba(255, 255, 255, 0.26);
}
.resourceButtons /deep/ core-icon {
width: 32px;
height: 32px;
}
.containerTop {
cursor: pointer;
padding: 16px;
position: relative;
border-radius: 2px 2px 0 0;
}
.equipmentTop {
padding: 16px;
border-bottom: rgba(0,0,0,0.12) solid 1px;
}
.containerMain {
padding: 16px;
}
.equipmentMain {
padding-bottom: 16px;
}
.inventoryItem {
background: white;
transition: box-shadow 0.3s ease,
opacity 0.5s ease-in-out;
height: 40px;
margin: 1px 0 1px 0;
font-size: 16px;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010em;
}
.inventoryItem core-icon, .inventoryItem paper-icon-button {
color: rgba(0,0,0,0.54);
}
.inventoryItem core-icon {
margin-right: 16px;
}
.inventoryItem /deep/ .button-content {
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
}
.inventoryItem[hero] {
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
}
.itemSlot {
background-color: rgb(232, 232, 232);
background-color: rgba(0, 0, 0, 0.1);
}
#inventory .containerMain {
padding: 0 0 16px 0;
}

102
rpg-docs/client/views/character/inventory/inventory.html
View File

@@ -1,73 +1,95 @@
<template name="inventory">
<div fit>
<div id="inventory" class="scroll-y" fit>
<div class="containers">
<div class="column-container">
<!--Net Worth-->
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
<div class="indigo white-text subhead padded leftRound" layout horizontal center>
<paper-shadow class="card" layout horizontal>
<div class="indigo white-text subhead left">
Net Worth
</div>
<div class="padded" layout horizontal center>
<div class="right" flex>
{{valueString netWorth}}
</div>
</paper-shadow>
<!--Weight Carried-->
<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
<div class="green white-text subhead padded leftRound" layout horizontal center>
<paper-shadow class="card" layout horizontal>
<div class="green white-text subhead left">
Weight Carried
</div>
<div class="padded" layout horizontal center>
<div class="right" flex>
{{round weightCarried}}lbs
</div>
</paper-shadow>
<!--Equipment-->
<paper-shadow class="card container equipmentContainer">
<div class="equipmentTop" layout horizontal center>
<div class="containerName subhead" flex>
<paper-shadow class="card equipmentContainer">
<div class="white top" layout horizontal center>
<div class="subhead" flex>
Equipment
</div>
<div class="caption" style="margin-right: 8px">{{valueString equipmentValue}}</div>
<div class="caption">{{round equipmentWeight}}lbs</div>
<div class="caption" style="margin-right: 8px">
{{valueString equipmentValue}}
</div>
<div class="caption">
{{round equipmentWeight}}lbs
</div>
</div>
<div flex class="equipmentMain">
<div flex class="bottom list">
{{#if attuned.count}}
<div class="list-subhead" layout horizontal center>Attuned</div>
<div class="subhead">Attuned</div>
{{/if}}
{{#each attuned}}
{{>inventoryItem}}
{{/each}}
{{#if attuned.count}}<div class="list-subhead" layout horizontal center>Equipment</div>{{/if}}
{{#if attuned.count}}
<div class="subhead">Equipment</div>
{{/if}}
{{#each equipment}}
{{>inventoryItem}}
{{/each}}
</div>
</paper-shadow>
<!--Carried Items-->
<paper-shadow class="card container carriedContainer">
<div class="equipmentTop" layout horizontal center>
<div class="containerName subhead" flex>
<paper-shadow class="card carriedContainer">
<div class="white top" layout horizontal center>
<div class="subhead">
Carried
</div>
<div class="caption" style="margin-right: 8px">{{valueString carriedValue}}</div>
<div class="caption">{{round carriedWeight}}lbs</div>
<div class="caption" style="margin-right: 8px">
{{valueString carriedValue}}
</div>
<div class="caption">
{{round carriedWeight}}lbs
</div>
</div>
<div flex class="containerMain">
<div flex class="bottom list">
{{#each carriedItems}}
{{>inventoryItem}}
{{/each}}
</div>
</paper-shadow>
{{#each containers}}
<paper-shadow class="card container itemContainer" hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
<div class="caption" style="margin-right: 8px">{{round totalWeight}}lbs</div>
<paper-shadow class="card itemContainer"
hero-id="main" {{detailHero}}>
<div class="top {{colorClass}}"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div class="subhead" flex
hero-id="title" {{detailHero}}>
{{name}}
</div>
<div class="caption" style="margin-right: 8px">
{{valueString totalValue}}
</div>
<div class="caption" style="margin-right: 8px">
{{round totalWeight}}lbs
</div>
<core-tooltip label="Container carried" position="left">
<paper-checkbox class="carriedCheckbox" checked={{isCarried}}></paper-checkbox>
<paper-checkbox class="carriedCheckbox"
checked={{isCarried}}>
</paper-checkbox>
</core-tooltip>
</div>
<div flex class="containerMain">
<div class="bottom list">
{{#each items ../_id _id}}
{{>inventoryItem}}
{{/each}}
@@ -78,17 +100,31 @@
<div class="fab-buffer"></div>
</div>
{{#if canEditCharacter _id}}
<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>
<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
<paper-fab-menu id="inventoryAddMenu"
icon="add"
closeIcon="close"
duration="0.3">
<paper-fab-menu-item id="addItem"
icon="note-add"
color="#d23f31"
tooltip="Item">
</paper-fab-menu-item>
<paper-fab-menu-item id="addContainer"
icon="work"
color="#d23f31"
tooltip="Container">
</paper-fab-menu-item>
</paper-fab-menu>
{{/if}}
</div>
</template>
<template name="inventoryItem">
<div class="itemSlot">
<paper-item class="inventoryItem {{hidden}}" hero-id="main" noink {{detailHero}} layout horizontal draggable="true">
<div class="item-slot">
<paper-item class="item inventoryItem {{hidden}}" noink
hero-id="main" {{detailHero}}
layout horizontal
draggable="true">
{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
</paper-item>
</div>

2
rpg-docs/client/views/character/inventory/inventory.js
View File

@@ -145,7 +145,7 @@ Template.inventory.events({
heroId: itemId,
});
},
"tap .containerTop": function(event){
"tap .itemContainer .top": function(event){
GlobalUI.setDetail({
template: "containerDialog",
data: {containerId: this._id, charId: this.charId},

84
rpg-docs/client/views/character/journal/journal.html
View File

@@ -1,67 +1,91 @@
<template name="journal">
<div fit>
<div id="journal" class="scroll-y" fit>
<div class="containers">
<div class="column-container">
<!--Experience Table-->
<paper-shadow class="card container experiencesCard" hero-id="main" {{detailHero}}>
<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div class="containerName subhead" flex>Experience</div>
<div class="subhead">{{experience}} XP</div>
<paper-shadow class="card experiencesCard"
hero-id="main" {{detailHero}}>
<div class="top white subhead"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div flex>Experience</div>
<div >{{experience}} XP</div>
<paper-icon-button class="black54" id="addXP" icon="add"></paper-icon-button>
</div>
<div class="containerMain experiences">
<div class="bottom list">
{{#each experiences}}
<div class="itemSlot">
<paper-item class="inventoryItem experience" hero-id="main" {{detailHero}} layout horizontal>
<div flex>{{name}}</div><div class="xpValue">{{value}}</div>
</paper-item>
<div class="item-slot">
<div class="item experience"
hero-id="main" {{detailHero}}
layout horizontal center>
<div flex>{{name}}</div>
<div class="xpValue">{{value}}</div>
</div>
</div>
{{/each}}
</div>
{{#if moreExperiencesOrCollapse}}
<div class="containerFoot" layout="" horizontal="" center="" end-justified="">
<paper-button id="moreExperiences" disabled={{notMoreExperiences}}>Load More</paper-button>
<paper-button id="lessExperiences" disabled={{cantCollapse}}>Collapse</paper-button>
<div layout horizontal center end-justified>
<paper-button id="moreExperiences"
disabled={{notMoreExperiences}}>
Load More
</paper-button>
<paper-button id="lessExperiences"
disabled={{cantCollapse}}>
Collapse
</paper-button>
</div>
{{/if}}
</paper-shadow>
<!--Class Table-->
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<paper-shadow class="card"
hero-id="main" {{detailHero}}>
<div class="white top"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div flex>
<div class="containerName subhead">Level {{level}}</div>
<div class="containerName subhead">
Level {{level}}
</div>
{{#if nextLevelXP}}
<div class="caption">
Next Level: {{nextLevelXP}}XP
</div>
{{/if}}
</div>
<paper-icon-button class="black54" id="addClassButton" icon="add"></paper-icon-button>
<paper-icon-button class="black54"
id="addClassButton"
icon="add">
</paper-icon-button>
</div>
<div class="containerMain experiences">
<div class="itemSlot">
<paper-item class="inventoryItem race" hero-id="main" {{detailHero "race" _id}} layout horizontal>
<div class="bottom list">
<div class="item-slot">
<div class="item race"
hero-id="main" {{detailHero "race" _id}}
layout horizontal center>
{{race}}
</paper-item>
</div>
</div>
{{#each classes}}
<div class="itemSlot">
<paper-item class="inventoryItem class" hero-id="main" {{detailHero}} layout horizontal>
<div class="item-slot">
<div class="item class"
hero-id="main" {{detailHero}}
layout horizontal center>
{{name}}&nbsp;{{level}}
</paper-item>
</div>
</div>
{{/each}}
</div>
</paper-shadow>
<!--Notes-->
{{#each notes}}
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<div class="containerTop {{colorClass}} noteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div flex>
<div class="containerName subhead">{{name}}</div>
</div>
<paper-shadow class="card" hero-id="main" {{detailHero}}>
<div class="top {{colorClass}} noteTop subhead"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
{{name}}
</div>
<div class="containerMain preline">{{description}}</div>
<div class="bottom text">{{description}}</div>
</paper-shadow>
{{/each}}
</div>

32
rpg-docs/client/views/character/journal/noteDialog/noteDialog.html
View File

@@ -3,16 +3,28 @@
{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
<div class="prewrap">{{description}}</div>
{{else}}
<!--Name-->
<div horizontal layout>
<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
</div>
<!--Description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="noteDescriptionInput" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
{{> noteDialogEdit}}
{{/baseDialog}}
{{/with}}
</template>
<template name="noteDialogEdit">
<!--Name-->
<div horizontal layout>
<paper-input id="noteNameInput"
label="Name"
floatinglabel
value={{name}}
flex>
</paper-input>
</div>
<!--Description, formatting this nicely breaks it, leave it as is-->
<paper-input-decorator label="Description"
floatinglabel
layout vertical>
<paper-autogrow-textarea>
<textarea id="noteDescriptionInput"
value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
</template>

19
rpg-docs/client/views/character/journal/noteDialog/noteDialog.js
View File

@@ -1,5 +1,7 @@
Template.noteDialog.onRendered(function(){
updatePolymerInputs(this);
Template.noteDialog.helpers({
note: function(){
return Notes.findOne(this.noteId);
}
});
Template.noteDialog.events({
@@ -11,6 +13,13 @@ Template.noteDialog.events({
GlobalUI.deletedToast(instance.data.noteId, "Notes", "Note");
GlobalUI.closeDetail();
},
});
Template.noteDialogEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.noteDialogEdit.events({
"change #noteNameInput, input #noteNameInput": function(event){
var value = event.currentTarget.value;
Notes.update(this._id, {$set: {name: value}});
@@ -20,9 +29,3 @@ Template.noteDialog.events({
Notes.update(this._id, {$set: {description: value}});
},
});
Template.noteDialog.helpers({
note: function(){
return Notes.findOne(this.noteId);
}
});

23
rpg-docs/client/views/character/persona/persona.html
View File

@@ -1,7 +1,7 @@
<template name="persona">
<div fit>
<div id="persona" class="scroll-y" fit>
<div class="containers">
<div class="column-container">
{{#with characterDetails}}
{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
{{/with}}
@@ -11,11 +11,11 @@
{{> containerCard characterField "bonds" "Bonds"}}
{{> containerCard characterField "flaws" "Flaws"}}
{{> containerCard characterField "backstory" "Background"}}
<paper-shadow class="card container">
<div class="containerTop whiteTop" layout horizontal center>
<div class="containerName subhead" flex>Languages</div>
<paper-shadow class="card">
<div class="white top subhead">
Languages
</div>
<div flex class="containerMain listPadded">
<div class="bottom list">
{{#each languages}}
{{> proficiencyListItem}}
{{/each}}
@@ -31,10 +31,15 @@
</template>
<template name="containerCardHelper">
<paper-shadow class="card container {{class}}" hero-id="main" {{detailHero field ../_id}}>
<div class="containerTop {{colorClass}} {{topClass}}" hero-id="toolbar" layout horizontal center {{detailHero field ../_id}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero field ../_id}}>{{title}}</div>
<paper-shadow class="card {{class}}"
hero-id="main" {{detailHero field ../_id}}>
<div class="top subhead {{colorClass}} {{topClass}}"
hero-id="toolbar" {{detailHero field ../_id}}>
<div class="subhead" flex
hero-id="title" {{detailHero field ../_id}}>
{{title}}
</div>
</div>
<div flex class="containerMain prewrap">{{> UI.contentBlock}}</div>
<div class="bottom text">{{> UI.contentBlock}}</div>
</paper-shadow>
</template>

13
rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html
View File

@@ -1,8 +1,11 @@
<template name="proficiencyListItem">
<div class="itemSlot">
<paper-item noink class="white proficiencyItem" hero-id="main" {{detailHero}}>
<core-icon icon="{{profIcon}}" class="black54"></core-icon>
<div class="sideMargin">{{getName}}</div>
</paper-item>
<div class="item-slot">
<div class="proficiency item small"
hero-id="main" {{detailHero}}
layout horizontal center>
<core-icon icon="{{profIcon}}"
style="margin-right: 16px;"></core-icon>
<div flex>{{getName}}</div>
</div>
</div>
</template>

2
rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js
View File

@@ -14,7 +14,7 @@ Template.proficiencyListItem.helpers({
});
Template.proficiencyListItem.events({
"tap .proficiencyItem": function(event, instance){
"tap .proficiency": function(event, instance){
openParentDialog(this.parent, this.charId, this._id);
}
});

119
rpg-docs/client/views/character/spells/spells.html
View File

@@ -1,84 +1,120 @@
<template name="spells">
<div fit>
<div id="spells" class="scroll-y" fit>
<div class="spellsContainer" layout horizontal start wrap>
<div style="padding: 4px;"
layout horizontal start wrap>
{{#if hasSlots}}
<paper-shadow class="card container spellSlotContainer" hero-id="main" {{detailHero}}>
<div class="containerTop whiteTop" layout horizontal center>
<div class="containerName subhead" hero-id="title" flex>Spell Slots</div>
<paper-shadow class="card"
style="margin: 4px;"
hero-id="main" {{detailHero}}>
<div class="white top subhead"
layout horizontal center>
Spell Slots
</div>
<div flex class="containerMain">
<div class="bottom list">
{{#each levels}}{{#if showSlots ..}}
<div class="itemSlot">
<paper-item class="inventoryItem spellSlot" hero-id="main" {{detailHero slotStatName ../_id}} layout horizontal>
<div class="slotName">
<div class="item-slot">
<div class="item spellSlot"
hero-id="main" {{detailHero slotStatName ../_id}}
layout horizontal center>
<div style="margin-right: 16px">
{{name}}
</div>
<div flex layout horizontal center>
{{#each slotBubbles ..}}
<paper-icon-button class="slotBubble" icon={{icon}} disabled={{disabled}}></paper-icon-button>
<paper-icon-button class="slotBubble"
icon={{icon}}
disabled={{disabled}}>
</paper-icon-button>
{{/each}}
</div>
</paper-item>
</div>
</div>
{{/if}}{{/each}}
</div>
</paper-shadow>
{{/if}}
{{#each spellLists}}
<paper-shadow class="card container spellList" hero-id="main" {{detailHero}} flex>
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<paper-shadow class="card spellList" flex
hero-id="main" {{detailHero}}
style="margin: 4px;">
<div class="top {{colorClass}}"
hero-id="toolbar" {{detailHero}}
layout horizontal center>
<div flex>
<div class="containerName subhead">{{name}}</div>
<div class="subhead">{{name}}</div>
<div class="caption">
{{#if saveDC}}
Save DC: {{evaluate charId saveDC}}
<div style="width: 16px; display: inline-block;"></div>
<span style="margin-right: 16px;">
Save DC: {{evaluate charId saveDC}}
</span>
{{/if}}
{{#if attackBonus}}
Attack Bonus: {{evaluateSigned charId attackBonus}}
<span>
Attack Bonus: {{evaluateSigned charId attackBonus}}
</span>
{{/if}}
</div>
</div>
{{#if settings.showUnprepared}}
{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{evaluate charId maxPrepared}}</div>{{/if}}
<core-tooltip label="Done" position="left">
<paper-icon-button class="finishPrep" icon="done"></paper-icon-button>
</core-tooltip>
{{#if maxPrepared}}
<div class="subhead">
{{numPrepared}} / {{evaluate charId maxPrepared}}
</div>
{{/if}}
<core-tooltip label="Done"
position="left">
<paper-icon-button class="finishPrep"
icon="done">
</paper-icon-button>
</core-tooltip>
{{else}}
<core-tooltip label="Change prepared spells" position="left">
<paper-icon-button class="prepSpells" icon="book"></paper-icon-button>
<core-tooltip label="Change prepared spells"
position="left">
<paper-icon-button class="prepSpells"
icon="book">
</paper-icon-button>
</core-tooltip>
{{/if}}
</div>
<div class="containerMain">
<div class="bottom list column-container">
{{#each levels}}
<div class="spellLevel">
{{#if spellCount .. ../../_id}}
<div class="list-subhead" layout horizontal center>
<div class="subhead">
{{name}}
</div>
{{/if}}
{{#each spells ../_id ../../_id}}
{{#if showSpell ../../settings.showUnprepared}}
<div class="itemSlot">
<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}}
layout horizontal center>
<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
<div class="item-slot">
<div class="tall spell item"
hero-id="main" {{detailHero}}
layout horizontal center>
<core-icon icon="social:whatshot"
style="color: {{hexColor color}};"
style="color: {{hexColor color}};
margin-right: 16px;"
></core-icon>
<div flex layout vertical>
<div>{{name}}</div>
<div class="caption">
{{school}} {{castingTime}}
{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
{{school}}
{{castingTime}}
{{#if ritual}}
(ritual)
{{/if}}
{{#if spellComponents}}
- {{spellComponents}}
{{/if}}
</div>
</div>
{{#if ../../settings.showUnprepared}}
<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
<paper-checkbox class="preparedCheckbox"
checked={{isPrepared}}
disabled={{cantUnprepare}}>
</paper-checkbox>
{{/if}}
</paper-item>
</div>
</div>
{{/if}}
{{/each}}
@@ -92,9 +128,20 @@
</div>
</div>
{{#if canEditCharacter _id}}
<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
<paper-fab-menu-item id="addSpell" icon="note-add" color="#d23f31" tooltip="Spell"></paper-fab-menu-item>
<paper-fab-menu-item id="addSpellList" icon="work" color="#d23f31" tooltip="Spell List"></paper-fab-menu-item>
<paper-fab-menu id="inventoryAddMenu"
icon="add"
closeIcon="close"
duration="0.3">
<paper-fab-menu-item id="addSpell"
icon="note-add"
color="#d23f31"
tooltip="Spell">
</paper-fab-menu-item>
<paper-fab-menu-item id="addSpellList"
icon="work"
color="#d23f31"
tooltip="Spell List">
</paper-fab-menu-item>
</paper-fab-menu>
{{/if}}
</template>

2
rpg-docs/client/views/character/spells/spells.js
View File

@@ -170,7 +170,7 @@ Template.spells.events({
heroId: charId + stat,
});
},
"tap .containerTop": function(event){
"tap .spellList .top": function(event){
GlobalUI.setDetail({
template: "spellListDialog",
data: {spellListId: this._id, charId: this.charId},

2
rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
View File

@@ -1,5 +1,5 @@
<template name="abilityMiniCard">
<paper-shadow class="card abilityMiniCard"
<paper-shadow class="card abilityMiniCard clickable"
hero-id="main" {{detailHero ability ../_id}}
layout horizontal>
<div class="left white-text {{color}}"

2
rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
View File

@@ -1,6 +1,6 @@
<!-- needs name, char, and statName -->
<template name="attributeDialog">
{{#baseDialog title=name class=colorClass hideEdit=true}}
{{#baseDialog title=name class=color hideEdit=true}}
{{> attributeDialogView}}
{{/baseDialog}}
</template>

8
rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js
View File

@@ -93,6 +93,14 @@ var abilities = {
charisma: {name: "Charisma"},
};
Template.attributeDialog.helpers({
color: function(){
if (this.color) return this.color + " white-text";
var char = Characters.findOne(this.charId, {fields: {color: 1}});
if (char) return getColorClass(char.color);
},
});
Template.attributeDialogView.helpers({
or: function(a, b, c){
return a || b || c;

20
rpg-docs/client/views/character/stats/healthCard/healthCard.html
View File

@@ -2,19 +2,21 @@
<paper-shadow class="card container healthCard"
hero-id="main" {{detailHero "hitPoints" _id}}
layout horizontal wrap>
<div class="green white-text subhead padded leftRound"
<div class="green white-text subhead left"
hero-id="toolbar" {{detailHero "hitPoints" _id}}
layout vertical center>
layout vertical center center-justified>
<div class="hitPointTitle clickable">Hit Points</div>
<paper-icon-button class="white54" id="addTempHP" icon="add"></paper-icon-button>
</div>
<div class="padded" flex layout vertical center-justified style="min-width: 180px;">
<paper-slider id="hitPointSlider"
value={{attributeValue "hitPoints"}}
max={{attributeBase "hitPoints"}}
editable pin
role="slider"
></paper-slider>
<div class="right" flex layout vertical center-justified style="min-width: 180px;">
<div layout horizontal>
<paper-slider id="hitPointSlider"
value={{attributeValue "hitPoints"}}
max={{attributeBase "hitPoints"}}
editable pin
role="slider"
></paper-slider>
</div>
{{#each tempHitPoints}}
<div>
{{name}}

15
rpg-docs/client/views/character/stats/hitDice/hitDice.css
View File

@@ -1,15 +0,0 @@
.hit-dice paper-icon-button {
display: block;
height: 32px;
padding: 0;
width: 32px;
}
.hit-dice paper-icon-button[disabled] {
color: rgba(255, 255, 255, 0.2);
}
.hit-dice paper-icon-button /deep/ core-icon {
height: 32px;
width: 32px;
}

7
rpg-docs/client/views/character/stats/hitDice/hitDice.js
View File

@@ -30,7 +30,12 @@ Template.hitDice.events({
var title = "d" + this.diceNum + " Hit Dice";
GlobalUI.setDetail({
template: "attributeDialog",
data: {name: title, statName: this.name, charId: charId},
data: {
name: title,
statName: this.name,
charId: charId,
color: "green",
},
heroId: charId + this.name,
});
},

2
rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
View File

@@ -1,6 +1,6 @@
<!-- needs name, char, and skillName -->
<template name="skillDialog">
{{#baseDialog title=name class=colorClass hideEdit=true}}
{{#baseDialog title=name class=color hideEdit=true}}
{{> skillDialogView}}
{{/baseDialog}}
</template>

8
rpg-docs/client/views/character/stats/skillDialog/skillDialog.js
View File

@@ -93,6 +93,14 @@ var abilities = {
charisma: {name: "Charisma"},
};
Template.skillDialog.helpers({
color: function(){
if (this.color) return this.color + " white-text";
var char = Characters.findOne(this.charId, {fields: {color: 1}});
if (char) return getColorClass(char.color);
},
});
Template.skillDialogView.helpers({
or: function(a, b, c){
return a || b || c;

3
rpg-docs/client/views/character/stats/skillRow/skillRow.scss
View File

@@ -1,7 +1,4 @@
.skill-row {
core-icon {
color: rgba(0,0,0,0.54);
}
.skill-mod{
width: 45px;
text-align: center;

22
rpg-docs/client/views/character/stats/stats.html
View File

@@ -1,9 +1,9 @@
<template name="stats">
<div class="scroll-y" fit>
<div class="resourceCards" layout horizontal wrap>
<div style="padding: 8px 8px 0 8px">
{{> healthCard}}
</div>
<div id="stats" class="column-container" >
<div class="column-container thin-columns" >
<!--Ability Scores-->
{{> abilityMiniCard ability="strength" title="Strength" color="red"}}
{{> abilityMiniCard ability="dexterity" title="Dexterity" color="indigo"}}
@@ -27,11 +27,11 @@
{{>hitDice name="d10HitDice" diceNum="10" char=this}}
{{>hitDice name="d12HitDice" diceNum="12" char=this}}
<!--Saving Throws-->
<paper-shadow class="card" hero-id="main" {{detailHero}}>
<div class="containerTop whiteTop" layout horizontal center>
<div class="containerName subhead" hero-id="title" flex>Saving Throws</div>
<paper-shadow class="card">
<div class="top white subhead">
Saving Throws
</div>
<div flex class="containerMain">
<div flex class="bottom list">
{{> skillRow name="Strength" skill="strengthSave"}}
{{> skillRow name="Dexterity" skill="dexteritySave"}}
{{> skillRow name="Constitution" skill="constitutionSave"}}
@@ -41,11 +41,11 @@
</div>
</paper-shadow>
<!--Skills-->
<paper-shadow class="card" hero-id="main" {{detailHero}}>
<div class="containerTop whiteTop" layout horizontal center>
<div class="containerName subhead" hero-id="title" flex>Skills</div>
<paper-shadow class="card">
<div class="top white subhead">
Skills
</div>
<div flex class="containerMain">
<div flex class="bottom list">
{{> skillRow name="Acrobatics" skill="acrobatics"}}
{{> skillRow name="Animal Handling" skill="animalHandling"}}
{{> skillRow name="Arcana" skill="arcana"}}
@@ -71,7 +71,7 @@
</template>
<template name="statCard">
<paper-shadow class="card statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
<paper-shadow class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
<div class="left display1 white-text {{color}}"
hero-id="toolbar" {{detailHero stat ../_id}}>
{{#if isSkill}}

40
rpg-docs/client/views/character/stats/stats.js
View File

@@ -4,13 +4,23 @@ Template.stats.events({
if (this.isSkill){
GlobalUI.setDetail({
template: "skillDialog",
data: {name: this.name, skillName: this.stat, charId: charId},
data: {
name: this.name,
skillName: this.stat,
charId: charId,
color: this.color,
},
heroId: charId + this.stat,
});
} else {
GlobalUI.setDetail({
template: "attributeDialog",
data: {name: this.name, statName: this.stat, charId: charId},
data: {
name: this.name,
statName: this.stat,
charId: charId,
color: this.color,
},
heroId: charId + this.stat,
});
}
@@ -19,7 +29,12 @@ Template.stats.events({
var charId = Template.parentData()._id;
GlobalUI.setDetail({
template: "attributeDialog",
data: {name: this.title, statName: this.ability, charId: charId},
data: {
name: this.title,
statName: this.ability,
charId: charId,
color: this.color,
},
heroId: charId + this.ability,
});
},
@@ -27,15 +42,24 @@ Template.stats.events({
var skill = this.skill;
var charId = instance.data._id;
GlobalUI.setDetail({
template: "skillDialog",
data: {name: this.name, skillName: skill, charId: charId},
heroId: charId + skill,
});
template: "skillDialog",
data: {
name: this.name,
skillName: skill,
charId: charId,
},
heroId: charId + skill,
});
},
"tap .hitPointTitle": function(event, instance) {
GlobalUI.setDetail({
template: "attributeDialog",
data: {name: "Hit Points", statName: "hitPoints", charId: this._id},
data: {
name: "Hit Points",
statName: "hitPoints",
charId: this._id,
color: "green",
},
heroId: this._id + "hitPoints",
});
},