From 96018264754fb5053671561ce1ecb3a46594df00 Mon Sep 17 00:00:00 2001 From: Thaum Date: Tue, 17 Feb 2015 13:46:35 +0000 Subject: [PATCH] Added Resources, improved layout --- rpg-docs/client/views/GeneralCSS/general.css | 32 +++++++- .../views/character/effectEdit/effectEdit.js | 2 +- .../views/character/features/features.css | 1 - .../views/character/features/features.html | 63 ++++++++++++-- .../views/character/features/features.js | 28 ++++++- .../views/character/inventory/inventory.css | 82 +++++++++++++++++-- .../inventory/itemDialog/itemDialog.html | 4 +- .../views/character/persona/persona.css | 2 - .../client/views/character/spells/spells.css | 4 + .../client/views/character/spells/spells.html | 14 +++- .../gridPadding/gridPadding.html | 9 ++ .../paperTemplates/gridPadding/gridPadding.js | 6 ++ 12 files changed, 221 insertions(+), 26 deletions(-) create mode 100644 rpg-docs/client/views/paperTemplates/gridPadding/gridPadding.html create mode 100644 rpg-docs/client/views/paperTemplates/gridPadding/gridPadding.js diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css index 2b75b608..b72f967d 100644 --- a/rpg-docs/client/views/GeneralCSS/general.css +++ b/rpg-docs/client/views/GeneralCSS/general.css @@ -66,10 +66,11 @@ paper-button { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; - + /*Fixes extra margin at top of columns*/ + display: inline-block; + width: 100%; - - padding: 16px; + font-size: 14px; border-radius: 2px; background-color: white; @@ -84,6 +85,31 @@ paper-button { letter-spacing: 0.01em; } +.cardHeader { + height: 48px; + padding: 0 16px 0 16px; + align-content: center; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.54); +} + +.statCard { + cursor: pointer; +} + +.resourceCards { + padding: 4px 4px 0 4px; + margin-bottom: -4px; +} + +.resourceCards .card { + width: 180px; + margin: 4px; + flex-grow: 1; + flex-shrink: 1; +} + .grey-background, body { background-color: #E0E0E0; } diff --git a/rpg-docs/client/views/character/effectEdit/effectEdit.js b/rpg-docs/client/views/character/effectEdit/effectEdit.js index 5dc538dc..45bbfde2 100644 --- a/rpg-docs/client/views/character/effectEdit/effectEdit.js +++ b/rpg-docs/client/views/character/effectEdit/effectEdit.js @@ -92,7 +92,7 @@ var skillOperations = [ ]; Template.effectEdit.created = function(){ - var statGroup = statsDict[this.data.stat].group; + var statGroup = statsDict[this.data.stat] && statsDict[this.data.stat].group; this.selectedStatGroup = new ReactiveVar(statGroup); }; diff --git a/rpg-docs/client/views/character/features/features.css b/rpg-docs/client/views/character/features/features.css index 8c3fef17..5e44d371 100644 --- a/rpg-docs/client/views/character/features/features.css +++ b/rpg-docs/client/views/character/features/features.css @@ -16,5 +16,4 @@ .containerMain.featureDescription { white-space: pre-line; - padding: 16px 0 0 0; } diff --git a/rpg-docs/client/views/character/features/features.html b/rpg-docs/client/views/character/features/features.html index a919b452..5398491e 100644 --- a/rpg-docs/client/views/character/features/features.html +++ b/rpg-docs/client/views/character/features/features.html @@ -1,21 +1,49 @@ \ No newline at end of file + + + diff --git a/rpg-docs/client/views/character/features/features.js b/rpg-docs/client/views/character/features/features.js index 10ec3e04..85816166 100644 --- a/rpg-docs/client/views/character/features/features.js +++ b/rpg-docs/client/views/character/features/features.js @@ -40,4 +40,30 @@ Template.features.events({ var featureId = this._id; Features.update(featureId, {$set: {used: 0}}); } -}); \ No newline at end of file +}); + +Template.resource.helpers({ + cantIncrement: function(){ + return !(this.char.attributeValue(this.name) < this.char.attributeBase(this.name)); + }, + cantDecrement: function(){ + return !(this.char.attributeValue(this.name) > 0); + } +}); + +Template.resource.events({ + "tap .resourceUp": function(event){ + if(this.char.attributeValue(this.name) < this.char.attributeBase(this.name)){ + var modifier = {$inc: {}}; + modifier.$inc[this.name + ".adjustment"] = 1; + Characters.update(this.char._id, modifier, {validate: false}); + } + }, + "tap .resourceDown": function(event){ + if(this.char.attributeValue(this.name) > 0){ + var modifier = {$inc: {}}; + modifier.$inc[this.name + ".adjustment"] = -1; + Characters.update(this.char._id, modifier, {validate: false}); + } + } +}); diff --git a/rpg-docs/client/views/character/inventory/inventory.css b/rpg-docs/client/views/character/inventory/inventory.css index f3bdab01..f70293d3 100644 --- a/rpg-docs/client/views/character/inventory/inventory.css +++ b/rpg-docs/client/views/character/inventory/inventory.css @@ -8,36 +8,100 @@ padding: 8px; } -.container { +.containerLeft { + padding: 16px; + background-color: #2196F3; + 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; +} +.containerRight { + padding: 16px; + cursor: pointer; + + /* 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 -16px -16px 8px; + 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; - margin: -16px -16px 0 -16px; padding: 16px; position: relative; + border-radius: 2px 2px 0 0; } .equipmentTop { - margin: -16px -16px 0 -16px; padding: 16px; border-bottom: rgba(0,0,0,0.12) solid 1px; } .containerMain { - margin: 0 -16px -16px -16px; - padding-bottom: 16px; + padding: 16px; } .equipmentMain { - margin: 0 -16px -16px -16px; padding-bottom: 16px; } .inventoryItem { background: white; - transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); + transition: box-shadow 0.1s ease; height: 40px; margin: 1px 0 1px 0; font-size: 16px; @@ -68,3 +132,7 @@ background-color: rgb(232, 232, 232); background-color: rgba(0, 0, 0, 0.1); } + +#inventory .containerMain { + padding: 0 0 16px 0; +} diff --git a/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html b/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html index 2d987168..26a70993 100644 --- a/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html +++ b/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html @@ -33,11 +33,11 @@ - + - + diff --git a/rpg-docs/client/views/character/persona/persona.css b/rpg-docs/client/views/character/persona/persona.css index a4d0028f..5c51cda2 100644 --- a/rpg-docs/client/views/character/persona/persona.css +++ b/rpg-docs/client/views/character/persona/persona.css @@ -1,5 +1,3 @@ #persona .containerMain{ - margin: 0; - padding: 16px 0 0 0; white-space: pre-line; } \ No newline at end of file diff --git a/rpg-docs/client/views/character/spells/spells.css b/rpg-docs/client/views/character/spells/spells.css index 023c8f38..39d2fc13 100644 --- a/rpg-docs/client/views/character/spells/spells.css +++ b/rpg-docs/client/views/character/spells/spells.css @@ -1,3 +1,7 @@ +#spells .containerMain { + padding: 0 0 16px 0; +} + #spells .inventoryItem { height: 56px; } diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html index e5eb7718..770cb587 100644 --- a/rpg-docs/client/views/character/spells/spells.html +++ b/rpg-docs/client/views/character/spells/spells.html @@ -1,6 +1,18 @@