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

Migrated stats page to scss

Browse Source
This commit is contained in:
Stefan Zermatten
2015-05-13 15:25:22 +02:00
parent 5dbb59ef80
commit e40dd196e6
11 changed files with 116 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
rpg-docs/client/views/character/stats/abilityCards/abilityCards.css
View File

@@ -1,34 +0,0 @@
.card.double {
display: flex;
}
.card.double > div{
vertical-align: top;
padding: 16px;
}
.abilityScore {
width: 70px;
text-align: center;
background-color: #D50000;
padding: 16px;
position: relative;
border-radius: 2px 0 0 2px;
}
#stats .card {
padding: 0;
}
.abilityCardRight {
flex-grow: 1;
padding-right: 0;
}
.abilityCardRight hr{
margin: 8px 0 8px -16px;
}
.abilityCardRight h1{
margin-bottom: 8px;
}

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

@@ -1,122 +1,14 @@
<template name="abilityMiniCard">
<paper-shadow class="card double abilityMiniCard"
hero-id="main" {{detailHero ability ../_id}}>
<div class="abilityScore white-text {{color}}"
<paper-shadow class="card abilityMiniCard"
hero-id="main" {{detailHero ability ../_id}}
layout horizontal>
<div class="left white-text {{color}}"
hero-id="toolbar" {{detailHero ability ../_id}}>
<h1 class="display1">{{../attributeValue ability}}</h1>
<h2>{{../abilityMod ability}}</h2>
<div class="display1">{{../attributeValue ability}}</div>
<div class="title">{{../abilityMod ability}}</div>
</div>
<div class="abilityCardRight subhead" layout horizontal center>
<div class="right subhead" layout horizontal center>
{{title}}
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</template>
<template name="strengthCard">
<paper-shadow class="card double">
<div class="abilityScore red white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "strength"}}</h1>
<h2>{{abilityMod "strength"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Strength</h1>
{{> skillRow name="Save" skill="strengthSave"}}
<hr>
{{> skillRow name="Athletics" skill="athletics"}}
</div>
</paper-shadow>
</template>
<template name="dexterityCard">
<paper-shadow class="card double">
<div class="abilityScore green white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "dexterity"}}</h1>
<h2>{{abilityMod "dexterity"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Dexterity</h1>
{{> skillRow name="Save" skill="dexteritySave"}}
<hr>
{{> skillRow name="Acrobatics" skill="acrobatics"}}
{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> skillRow name="Stealth" skill="stealth"}}
</div>
</paper-shadow>
</template>
<template name="constitutionCard">
<paper-shadow class="card double">
<div class="abilityScore deep-orange white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "constitution"}}</h1>
<h2>{{abilityMod "constitution"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Constitution</h1>
{{> skillRow name="Save" skill="constitutionSave"}}
<hr>
</div>
</paper-shadow>
</template>
<template name="intelligenceCard">
<paper-shadow class="card double">
<div class="abilityScore indigo white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "intelligence"}}</h1>
<h2>{{abilityMod "intelligence"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Intelligence</h1>
{{> skillRow name="Save" skill="intelligenceSave"}}
<hr>
{{> skillRow name="Arcana" skill="arcana"}}
{{> skillRow name="History" skill="history"}}
{{> skillRow name="Investigation" skill="investigation"}}
{{> skillRow name="Nature" skill="nature"}}
{{> skillRow name="Religion" skill="religion"}}
</div>
</paper-shadow>
</template>
<template name="wisdomCard">
<paper-shadow class="card double">
<div class="abilityScore purple white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "wisdom"}}</h1>
<h2>{{abilityMod "wisdom"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Wisdom</h1>
{{> skillRow name="Save" skill="wisdomSave"}}
<hr>
{{> skillRow name="Animal Handling" skill="animalHandling"}}
{{> skillRow name="Insight" skill="insight"}}
{{> skillRow name="Medicine" skill="medicine"}}
{{> skillRow name="Perception" skill="perception" showPassive="true"}}
{{> skillRow name="Survival" skill="survival"}}
</div>
</paper-shadow>
</template>
<template name="charismaCard">
<paper-shadow class="card double">
<div class="abilityScore pink white-text">
{{> ripple color="#eee"}}
<h1 class="display1">{{attributeValue "charisma"}}</h1>
<h2>{{abilityMod "charisma"}}</h2>
</div>
<div class="abilityCardRight">
<h1>Charisma</h1>
{{> skillRow name="Save" skill="charismaSave"}}
<hr>
{{> skillRow name="Deception" skill="deception"}}
{{> skillRow name="Intimidation" skill="intimidation"}}
{{> skillRow name="Performance" skill="performance"}}
{{> skillRow name="Persuasion" skill="persuasion"}}
</div>
</paper-shadow>
</template>

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

@@ -0,0 +1,15 @@
.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;
}

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

@@ -1,10 +1,20 @@
<template name="hitDice">
{{#if ../attributeBase name}}
<paper-shadow class="card container" hero-id="main" {{detailHero name ../_id}} layout horizontal>
<div class="containerLeft green" layout horizontal hero-id="toolbar" {{detailHero name ../_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 hit-dice" hero-id="main"
{{detailHero name ../_id}}
layout horizontal>
<div class="left green display1 white-text"
hero-id="toolbar" {{detailHero name ../_id}}
layout horizontal>
<div>
<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" layout vertical center>
<div>
@@ -15,9 +25,8 @@
</div>
</div>
</div>
<div class="containerRight clickable" flex relative horizontal layout center>
<div class="right clickable" flex relative horizontal layout center>
Hit Dice
<paper-ripple fit></paper-ripple>
</div>
</paper-shadow>
{{/if}}

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

@@ -25,7 +25,7 @@ Template.hitDice.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .containerRight": function() {
"tap .right": function() {
var charId = Template.parentData()._id;
var title = "d" + this.diceNum + " Hit Dice";
GlobalUI.setDetail({

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

@@ -3,7 +3,7 @@
<div class="resourceCards" layout horizontal wrap>
{{> healthCard}}
</div>
<div id="stats" class="containers" >
<div id="stats" class="column-container" >
<!--Ability Scores-->
{{> abilityMiniCard ability="strength" title="Strength" color="red"}}
{{> abilityMiniCard ability="dexterity" title="Dexterity" color="indigo"}}
@@ -27,7 +27,7 @@
{{>hitDice name="d10HitDice" diceNum="10" char=this}}
{{>hitDice name="d12HitDice" diceNum="12" char=this}}
<!--Saving Throws-->
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<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>
</div>
@@ -41,7 +41,7 @@
</div>
</paper-shadow>
<!--Skills-->
<paper-shadow class="card container" hero-id="main" {{detailHero}}>
<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>
</div>
@@ -71,8 +71,8 @@
</template>
<template name="statCard">
<paper-shadow class="card container statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
<div class="containerLeft {{color}}"
<paper-shadow class="card statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
<div class="left display1 white-text {{color}}"
hero-id="toolbar" {{detailHero stat ../_id}}>
{{#if isSkill}}
{{../skillMod stat}}
@@ -80,9 +80,8 @@
{{prefix}}{{../attributeValue stat}}
{{/if}}
</div>
<div class="containerRight" flex horizontal layout center>
<div class="right subhead" flex horizontal layout center>
{{name}}
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</template>