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

0
rpg-docs/client/views/GeneralCSS/colors.scss → rpg-docs/client/style/colors.scss
View File

28
rpg-docs/client/style/listItem.scss Normal file
View File

@@ -0,0 +1,28 @@
/*
List items
*/
.item-slot {
background-color: rgb(232, 232, 232);
background-color: rgba(0, 0, 0, 0.1);
}
.item {
background: white;
cursor: pointer;
font-size: 16px;
height: 40px;
margin: 1px 0 1px 0;
padding: 0 16px 0 16px;
position: relative;
transition: box-shadow 0.3s ease, opacity 0.5s ease-in-out;
&.small {
height: 32px;
}
&.tall {
height: 56px;
}
&[hero], &:active{
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
z-index: 10;
}
}

64
rpg-docs/client/views/GeneralCSS/main.scss → rpg-docs/client/style/main.scss
View File

@@ -10,12 +10,35 @@ html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
root {
display: block;
}
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
margin: 0;
overflow-x: hidden;
}
//Horizontal rule
hr {
background-color: #444;
opacity: 0.12;
border-width: 0;
color: #444;
height: 1px;
line-height: 0;
margin: 16px -16px;
text-align: center;
}
//Column layouts of cards
.column-container {
-moz-column-fill: balance;
@@ -49,41 +72,38 @@ html {
.column-container & {
margin-bottom: 8px;
width: 100%;
//hack to stop flickering
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
//stop breaking over column divide
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
//Fixes extra margin at top of columns
display: inline-block;
}
.top {
cursor: pointer;
padding: 16px;
border-radius: 2px 2px 0 0;
}
.bottom {
padding: 16px;
border-radius: 0 0 2px 2px;
&.list {
padding: 0 0 16px 0;
}
}
}
/*
List items
*/
.item-slot {
background-color: rgb(232, 232, 232);
background-color: rgba(0, 0, 0, 0.1);
}
.item {
background: white;
height: 40px;
margin: 1px 0 1px 0;
&.small {
height: 32px;
.left {
padding: 16px;
border-radius: 2px 0 0 2px;
text-align: center;
}
&.tall {
height: 56px;
}
&[hero], &:active{
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
z-index: 10;
.right {
padding: 16px;
border-radius: 0 2px 2px 0;
}
}

79
rpg-docs/client/views/GeneralCSS/general.css
View File

@@ -1,30 +1,7 @@
root {
display: block;
}
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
margin: 0;
overflow-x: hidden;
}
body.core-narrow {
padding: 8px;
}
body /deep/ core-menu {
overflow-x: hidden !important;
}
.calculatedValue {
color: #021C33;
font-weight: bold;
}
* {
box-sizing: border-box;
}
td {
padding: 0;
}
@@ -43,62 +20,10 @@ table {
text-align: left;
}
hr {
background-color: #444;
opacity: 0.12;
border-width: 0;
color: #444;
height: 1px;
line-height: 0;
margin: 0 -16px;
text-align: center;
}
paper-button {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: #000;
color: rgba(0,0,0,0.87);
letter-spacing: 0.010;
}
core-item {
cursor: pointer;
}
.listRow {
height: 32px;
}
.card {
margin-bottom: 8px;
/*hack to stop flickering*/
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
/*stop divs breaking over divide*/
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
/*Fixes extra margin at top of columns*/
display: inline-block;
width: 100%;
font-size: 14px;
border-radius: 2px;
background-color: white;
}
.card.double {
padding: 0;
}
.card paper-button {
font-size: 14px;
letter-spacing: 0.01em;
}
.cardHeader {
height: 48px;
padding: 0 16px 0 16px;
@@ -112,10 +37,6 @@ core-item {
cursor: pointer;
}
.skillRow {
cursor: pointer;
}
.resourceCards {
padding: 4px 4px 0 4px;
margin-bottom: -4px;

2
rpg-docs/client/views/GeneralCSS/typography.css
View File

@@ -18,7 +18,7 @@
letter-spacing: 0;
}
.white-text .display1{
.white-text .display1, .white-text.display1{
color: rgba(255,255,255,0.54);
}

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>