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

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",
});
},