diff --git a/rpg-docs/Model/Character/Characters.js b/rpg-docs/Model/Character/Characters.js index bec552df..d5496430 100644 --- a/rpg-docs/Model/Character/Characters.js +++ b/rpg-docs/Model/Character/Characters.js @@ -188,7 +188,7 @@ Schemas.Character = new SimpleSchema({ owner: { type: String, regEx: SimpleSchema.RegEx.Id }, readers: { type: [String], regEx: SimpleSchema.RegEx.Id }, writers: { type: [String], regEx: SimpleSchema.RegEx.Id }, - color: {type: String, allowedValues: _.keys(colorOptions), defaultValue: "grey"} + color: {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"} //TODO add per-character settings }); diff --git a/rpg-docs/Model/Character/Features.js b/rpg-docs/Model/Character/Features.js index 9903f0d5..73ef16e6 100644 --- a/rpg-docs/Model/Character/Features.js +++ b/rpg-docs/Model/Character/Features.js @@ -7,7 +7,7 @@ Schemas.Feature = new SimpleSchema({ uses: {type: String, optional: true, trim: false}, used: {type: Number, defaultValue: 0}, reset: {type: String, allowedValues: ["manual", "longRest", "shortRest"], defaultValue: "manual"}, - color: {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"} + color: {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"} }); Features.attachSchema(Schemas.Feature); diff --git a/rpg-docs/Model/Character/SpellLists.js b/rpg-docs/Model/Character/SpellLists.js index 50e1bc1a..3b75bad0 100644 --- a/rpg-docs/Model/Character/SpellLists.js +++ b/rpg-docs/Model/Character/SpellLists.js @@ -7,7 +7,7 @@ Schemas.SpellLists = new SimpleSchema({ saveDC: {type: String, optional: true}, attackBonus: {type: String, optional: true}, maxPrepared: {type: String, optional: true}, - color: {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"}, + color: {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}, "settings.showUnprepared": {type: Boolean, defaultValue: true}, }); diff --git a/rpg-docs/Model/Character/Spells.js b/rpg-docs/Model/Character/Spells.js index 50368a03..ec1173a0 100644 --- a/rpg-docs/Model/Character/Spells.js +++ b/rpg-docs/Model/Character/Spells.js @@ -16,7 +16,7 @@ Schemas.Spell = new SimpleSchema({ ritual: {type: Boolean, defaultValue: false}, level: {type: Number, defaultValue: 0}, school: {type: String, defaultValue: "Abjuration", allowedValues: magicSchools}, - color: {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"} + color: {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"} }); Spells.attachSchema(Schemas.Spell); diff --git a/rpg-docs/Model/Inventory/Containers.js b/rpg-docs/Model/Inventory/Containers.js index f3e9019e..25f3c5cd 100644 --- a/rpg-docs/Model/Inventory/Containers.js +++ b/rpg-docs/Model/Inventory/Containers.js @@ -9,7 +9,7 @@ Schemas.Container = new SimpleSchema({ weight: {type: Number, min: 0, defaultValue: 0, decimal: true}, value: {type: Number, min: 0, defaultValue: 0, decimal: true}, description:{type: String, optional: true}, - color: {type: String, allowedValues: _.keys(colorOptions), defaultValue: "brown"} + color: {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"} }); Containers.attachSchema(Schemas.Container); diff --git a/rpg-docs/Model/Inventory/Items.js b/rpg-docs/Model/Inventory/Items.js index d79c77f2..8302b0c8 100644 --- a/rpg-docs/Model/Inventory/Items.js +++ b/rpg-docs/Model/Inventory/Items.js @@ -15,7 +15,7 @@ Schemas.Item = new SimpleSchema({ allowedValues: ["none", "head", "armor", "arms", "hands", "held", "feet"] }, equipped: {type: Boolean, defaultValue: false}, - color: {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"} + color: {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"} }); Items.attachSchema(Schemas.Item); diff --git a/rpg-docs/client/globalHelpers/colorClass.js b/rpg-docs/client/globalHelpers/colorClass.js index 8b7700e3..1dcb4765 100644 --- a/rpg-docs/client/globalHelpers/colorClass.js +++ b/rpg-docs/client/globalHelpers/colorClass.js @@ -3,5 +3,5 @@ Template.registerHelper("colorClass", function(color){ }); Template.registerHelper("hexColor", function(color){ - return colorOptions[color].color; + return getHexColor(color); }); diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css index 22dc52f3..2b75b608 100644 --- a/rpg-docs/client/views/GeneralCSS/general.css +++ b/rpg-docs/client/views/GeneralCSS/general.css @@ -58,7 +58,17 @@ paper-button { } .card { - margin: 4px; + 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; + + width: 100%; + padding: 16px; font-size: 14px; border-radius: 2px; @@ -66,7 +76,7 @@ paper-button { } .card.double { - width: 332px; + padding: 0; } .card paper-button { diff --git a/rpg-docs/client/views/character/Stats/stats.css b/rpg-docs/client/views/character/Stats/stats.css index 910f4bb1..343afeb5 100644 --- a/rpg-docs/client/views/character/Stats/stats.css +++ b/rpg-docs/client/views/character/Stats/stats.css @@ -1,38 +1,3 @@ -#stats { - padding: 4px; -} - -#stats, #stats .abilityFlex, #stats .statsFlex{ - display: flex !important; - justify-content: center; - align-items: stretch; - flex-wrap: wrap; -} - -#stats .card { - flex-grow: 1; - max-width: 480px; -} - -#stats .abilityFlex{ - flex-basis: 642px; - flex-grow: 1; - flex-shrink: 1; -} - -#stats .statsFlex{ - min-width: 152px; - flex-basis: 0px; - flex-grow: 1; -} - -.attribute.card, .skill.card { - padding: 0; - display: flex; - flex-direction: column; - text-align: center; -} - .card-top { flex-grow: 1; padding: 16px; diff --git a/rpg-docs/client/views/character/Stats/stats.html b/rpg-docs/client/views/character/Stats/stats.html index 8602e34c..b85a49a0 100644 --- a/rpg-docs/client/views/character/Stats/stats.html +++ b/rpg-docs/client/views/character/Stats/stats.html @@ -1,5 +1,7 @@ diff --git a/rpg-docs/client/views/character/features/features.js b/rpg-docs/client/views/character/features/features.js index 36a433bf..10ec3e04 100644 --- a/rpg-docs/client/views/character/features/features.js +++ b/rpg-docs/client/views/character/features/features.js @@ -1,6 +1,6 @@ Template.features.helpers({ features: function(){ - var features = Features.find({charId: this._id}, {sort: {name: 1}}); + var features = Features.find({charId: this._id}, {sort: {color: 1, name: 1}}); return features; }, hasUses: function(){ diff --git a/rpg-docs/client/views/character/inventory/inventory.css b/rpg-docs/client/views/character/inventory/inventory.css index 2560b07c..f3bdab01 100644 --- a/rpg-docs/client/views/character/inventory/inventory.css +++ b/rpg-docs/client/views/character/inventory/inventory.css @@ -1,12 +1,15 @@ .containers { - display: flex; - flex-wrap: wrap; - padding: 4px; + -webkit-column-width: 300px; + -moz-column-width: 300px; + column-width: 300px; + -webkit-column-gap: 8px; + -moz-column-gap: 8px; + column-gap: 8px; + padding: 8px; } .container { - width: 332px; - flex-grow: 1; + } .containerTop { diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html index bce5334d..62c9e256 100644 --- a/rpg-docs/client/views/character/inventory/inventory.html +++ b/rpg-docs/client/views/character/inventory/inventory.html @@ -45,8 +45,8 @@ {{/each}} -
+
diff --git a/rpg-docs/client/views/character/inventory/inventory.js b/rpg-docs/client/views/character/inventory/inventory.js index 59593355..c34615ab 100644 --- a/rpg-docs/client/views/character/inventory/inventory.js +++ b/rpg-docs/client/views/character/inventory/inventory.js @@ -4,10 +4,10 @@ Template.inventory.created = function(){ Template.inventory.helpers({ containers: function(){ - return Containers.find({charId: this._id}, {sort: {name: 1}}) + return Containers.find({charId: this._id}, {sort: {color: 1, name: 1}}) }, items: function(charId, containerId){ - return Items.find({charId: charId, equipped: false, container: containerId }) + return Items.find({charId: charId, equipped: false, container: containerId }, {sort: {color: 1, name: 1}}) }, armor: function(){ return Items.findOne({ charId: this._id, equipped: true, equipmentSlot: "armor" }) diff --git a/rpg-docs/client/views/character/persona/persona.js b/rpg-docs/client/views/character/persona/persona.js index d416306d..41ac500f 100644 --- a/rpg-docs/client/views/character/persona/persona.js +++ b/rpg-docs/client/views/character/persona/persona.js @@ -1,10 +1,10 @@ var colorMap = { - description: "indigo", - personality: "blue", - ideals: "light-blue", - bonds: "cyan", - flaws: "teal", - backstory: "green" + description: "e", + personality: "f", + ideals: "g", + bonds: "h", + flaws: "i", + backstory: "j" } Template.persona.helpers({ @@ -12,7 +12,7 @@ Template.persona.helpers({ var char = Characters.findOne(this._id, {fields: {name: 1, gender: 1, alignment: 1, race:1}}) char._id += "details"; char.title = char.name; - char.color = "deep-purple"; + char.color = "d"; return char; }, characterField: function(field, title){ diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html index 566b0a81..e5eb7718 100644 --- a/rpg-docs/client/views/character/spells/spells.html +++ b/rpg-docs/client/views/character/spells/spells.html @@ -53,8 +53,8 @@ {{/each}} -
+
diff --git a/rpg-docs/client/views/character/spells/spells.js b/rpg-docs/client/views/character/spells/spells.js index 9c96568e..f761b46c 100644 --- a/rpg-docs/client/views/character/spells/spells.js +++ b/rpg-docs/client/views/character/spells/spells.js @@ -13,7 +13,7 @@ var spellLevels = [ Template.spells.helpers({ spellLists: function(){ - return SpellLists.find({charId: this._id}); + return SpellLists.find({charId: this._id}, {sort: {color: 1, name: 1}}); }, spellCount: function(list, charId){ if(list.settings.showUnprepared){ @@ -25,7 +25,7 @@ Template.spells.helpers({ } }, spells: function(listId, charId){ - return Spells.find( {charId: charId, listId: listId, level: this.level} ); + return Spells.find( {charId: charId, listId: listId, level: this.level}, {sort: {color: 1, name: 1}} ); }, levels: function(){ return spellLevels; diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html index be0c113a..25b235c0 100644 --- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html +++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html @@ -2,8 +2,8 @@ - {{#each colorKeys}} - {{this}} + {{#each colors}} + {{className}} {{/each}} diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js index 7aed3efc..d62ef2f1 100644 --- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js +++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js @@ -1,5 +1,5 @@ Template.colorDropdown.helpers({ - colorKeys: function(){ - return _.keys(colorOptions); + colors: function(){ + return colorOptions; } -}); \ No newline at end of file +}); diff --git a/rpg-docs/lib/constants/colorOptions.js b/rpg-docs/lib/constants/colorOptions.js index 0710278b..db620ce3 100644 --- a/rpg-docs/lib/constants/colorOptions.js +++ b/rpg-docs/lib/constants/colorOptions.js @@ -1,33 +1,51 @@ -colorOptions = { - "red": {whiteText: true, color: "#F44336"}, - "pink": {whiteText: true, color: "#E91E63"}, - "purple": {whiteText: true, color: "#9C27B0"}, - "deep-purple": {whiteText: true, color: "#673AB7"}, - "indigo": {whiteText: true, color: "#3F51B5"}, - "blue": {whiteText: true, color: "#2196F3"}, - "light-blue": {whiteText: true, color: "#03A9F4"}, - "cyan": {whiteText: true, color: "#00BCD4"}, - "teal": {whiteText: true, color: "#009688"}, - "green": {whiteText: true, color: "#4CAF50"}, - "light-green": {whiteText: true, color: "#8BC34A"}, - "lime": {whiteText: false, color: "#CDDC39"}, - "yellow": {whiteText: false, color: "#FFEB3B"}, - "amber": {whiteText: false, color: "#FFC107"}, - "orange": {whiteText: false, color: "#FF9800"}, - "deep-orange": {whiteText: true, color: "#FF5722"}, - "grey": {whiteText: true, color: "#9E9E9E"}, //spec says no white text - //"blue-grey": {whiteText: true, color: "#607D8B"}, - "brown": {whiteText: true, color: "#795548"}, - "black": {whiteText: true, color: "#000000"}, -}; +colorOptions = [ + {key: "a", className: "red", whiteText: true, color: "#F44336"}, + {key: "b", className: "pink", whiteText: true, color: "#E91E63"}, + {key: "c", className: "purple", whiteText: true, color: "#9C27B0"}, + {key: "d", className: "deep-purple", whiteText: true, color: "#673AB7"}, + {key: "e", className: "indigo", whiteText: true, color: "#3F51B5"}, + {key: "f", className: "blue", whiteText: true, color: "#2196F3"}, + {key: "g", className: "light-blue", whiteText: true, color: "#03A9F4"}, + {key: "h", className: "cyan", whiteText: true, color: "#00BCD4"}, + {key: "i", className: "teal", whiteText: true, color: "#009688"}, + {key: "j", className: "green", whiteText: true, color: "#4CAF50"}, + {key: "k", className: "light-green", whiteText: true, color: "#8BC34A"}, + {key: "l", className: "lime", whiteText: false, color: "#CDDC39"}, + {key: "m", className: "yellow", whiteText: false, color: "#FFEB3B"}, + {key: "n", className: "amber", whiteText: false, color: "#FFC107"}, + {key: "o", className: "orange", whiteText: false, color: "#FF9800"}, + {key: "p", className: "deep-orange", whiteText: true, color: "#FF5722"}, + {key: "q", className: "grey", whiteText: true, color: "#9E9E9E"}, //spec says no white text + //{key: "r", className: "blue-grey", whiteText: true, color: "#607D8B"}, + {key: "s", className: "brown", whiteText: true, color: "#795548"}, + {key: "t", className: "black", whiteText: true, color: "#000000"}, +]; + +var colorOptionMap = _.pluck(colorOptions, "key"); getColorClass = function(key){ if(!key){ - return "brown white-text" + return "brown white-text"; } - var colorClass = key; - if(colorOptions[key].whiteText){ + var index = _.indexOf(colorOptionMap, key); + if(index == -1){ + return "brown white-text"; + } + var option = colorOptions[index]; + var colorClass = option.className; + if(option.whiteText){ colorClass += " white-text"; } return colorClass; } + +getHexColor = function(key) { + if(!key){ + return "#000"; + } + var index = _.indexOf(colorOptionMap, key); + if(index === -1){ + return "#000"; + } + return colorOptions[index].color; +}