Moved printed character sheets to their own page

This makes sure the entire printed sheet is rendered before the browser  attempts to print it, solving all manner of errors
This commit is contained in:
Thaum Rystra
2018-03-03 11:13:16 +02:00
parent f73f2f670f
commit 75c8720b04
6 changed files with 293 additions and 219 deletions

View File

@@ -78,6 +78,35 @@ Router.map(function() {
fastRender: true,
});
this.route("printedCharacterSheet", {
path: "/character/:_id/:urlName/print",
waitOn: function(){
return [
subsManager.subscribe("singleCharacter", this.params._id),
];
},
data: function() {
var data = Characters.findOne(
{_id: this.params._id},
{fields: {_id: 1, name: 1, color: 1, writers: 1, readers: 1}}
);
return data;
},
onAfterAction: function() {
var char = Characters.findOne({_id: this.params._id}, {fields: {name: 1}});
var name = char && char.name;
if (name){
document.title = name + " - Printing";
}
},
//analytics
trackPageView: false,
onRun: function() {
window.ga && window.ga("send", "pageview", "/print-character");
this.next();
},
});
this.route("library", {
path: "/library",
waitOn: function(){

View File

@@ -1,7 +1,4 @@
<template name="characterSheet">
{{#if printing}}
{{> printedCharacterSheet}}
{{/if}}
<div class="fit layout vertical character-sheet">
<app-header fixed effects="waterfall">
<app-toolbar class="medium-tall {{colorClass}}" style="z-index: 2;">
@@ -23,10 +20,12 @@
<iron-icon icon="social:share" item-icon></iron-icon>
Share
</paper-icon-item>
<paper-icon-item id="printButton">
<iron-icon icon="print" item-icon></iron-icon>
Print
</paper-icon-item>
<a href={{printUrl}}>
<paper-icon-item id="printButton">
<iron-icon icon="print" item-icon></iron-icon>
Print
</paper-icon-item>
</a>
<paper-icon-item id="characterSettings">
<iron-icon icon="settings" item-icon></iron-icon>
Settings

View File

@@ -168,6 +168,9 @@ Template.characterSheet.helpers({
printing: function(){
return Session.get("isPrinting");
},
printUrl: function(){
return `/character/${this._id}/${this.name || "-"}/print`
},
selectedTab: function(){
return getTab(this._id);
},
@@ -184,8 +187,8 @@ Template.characterSheet.helpers({
const step = Session.get("newUserExperienceStep");
if (selected == tab) return false;
return (tab === 1 && step === 0) ||
(tab === 5 && step === 1) ||
(tab === 0 && step === 2);
(tab === 5 && step === 1) ||
(tab === 0 && step === 2);
},
});
@@ -238,7 +241,4 @@ Template.characterSheet.events({
element: event.currentTarget.parentElement.parentElement,
});
},
"click #printButton": function(event, instance){
print();
},
});

View File

@@ -1,14 +1,4 @@
.printed {
background: #fff;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}
.printed > .page {
.printed .page {
width: 100%;
padding: 6mm;
page-break-inside: avoid;
@@ -30,6 +20,10 @@
padding: 11px 10px;
}
.printed .double-border > * {
position: relative;
}
.printed .double-border:before {
content: "";
position: absolute;
@@ -39,10 +33,9 @@
right: 0;
border: 16px solid transparent;
border-image-source: url(/png/doubleLineImageBorder.png);
border-image-slice: 110 126;
border-image-slice: 110 126 fill;
border-image-repeat: stretch;
box-sizing: content-box;
z-index: -1;
}
.printed .double-border.printedAbility {
@@ -63,6 +56,7 @@
background-position: center;
background-size: contain;
background-repeat: no-repeat;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
@@ -88,10 +82,11 @@
height: 16px;
}
.shield-background {
.printed .shield-background {
background: url(/png/shieldBorder.png);
background-size: cover;
background-repeat: no-repeat;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
padding: 4px 8px 8px;
width: 80px;
@@ -100,37 +95,62 @@
top: -6px;
}
.shield-background .paper-font-subhead {
.printed .shield-background .paper-font-subhead {
width: 64px;
text-align: center;
line-height: 1.1;
}
.printed .paper-font-subhead {
font-size: 3mm !important;
line-height: 3.5mm !important;
font-weight: bold !important;
text-transform: uppercase !important;
}
.printed .paper-font-subhead.modifier {
font-size: 4mm !important;
line-height: 6mm !important;
}
.printed .paper-font-display1 {
font-size: 8mm !important;
line-height: 12mm !important;
}
@media screen {
.printed .page {
width: 210mm;
height: 297mm;
background: white;
margin: 8px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.printed .page-holder {
width: calc(210mm + 16px);
}
.printed {
display: none;
overflow: auto;
padding-left:
}
}
@media print {
.character-sheet {
display: none;
}
app-drawer {
display: none;
}
.paper-font-subhead {
font-size: 3mm !important;
line-height: 3.5mm !important;
font-weight: bold !important;
text-transform: uppercase !important;
app-header {
display: none;
}
.paper-font-subhead.modifier {
font-size: 4mm !important;
line-height: 6mm !important;
}
.paper-font-display1 {
font-size: 8mm !important;
line-height: 12mm !important;
.printed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background: #fff;
}
}

View File

@@ -1,207 +1,223 @@
<template name="printedCharacterSheet">
<div class="printed">
<div class="page">
<div class="layout vertical">
<div class="layout horizontal" style="margin-bottom: 6mm">
<div class="characterName paper-font-title" style="margin-right: 4mm">
{{name}}
</div>
<div>
<div>
{{#each classes}}
<span style="margin-right: 16px;">
{{name}}&nbsp;{{level}}
</span>
{{/each}}
<div class="fit printed-character-sheet layout vertical">
<app-header fixed effects="waterfall">
<app-toolbar class="medium {{colorClass}} layout horizontal center" style="z-index: 2;">
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<paper-icon-button icon="arrow-back" class="backButton"></paper-icon-button>
<div class="flex character-name">
{{name}}
</div>
<div>
<paper-icon-button icon="print" class="printButton"></paper-icon-button>
{{#simpleTooltip}} Print {{/simpleTooltip}}
</div>
</app-toolbar>
</app-header>
<div class="printed flex">
<div class="page-holder">
<div class="page">
<div class="layout vertical">
<div class="layout horizontal" style="margin-bottom: 6mm">
<div class="characterName paper-font-title" style="margin-right: 4mm">
{{name}}
</div>
<div>
{{character.alignment}} {{character.gender}} {{character.race}}
</div>
</div>
</div>
<div class="layout horizontal">
<div class="col1 flex layout vertical">
<div class="initiative" style="margin-bottom: 2mm;">
{{> printedLongStat stat="" name="Inspiration" prefix=""}}
</div>
<div class="proficiencyBonus" style="margin-bottom: 4mm;">
{{> printedLongStat stat="proficiencyBonus" name="Proficiency Bonus" prefix="+"}}
</div>
<div class="layout horizontal">
<div class="abilities layout vertical justified" style="margin-right: 4mm;">
{{> printedAbility ability="strength" title="Strength"}}
{{> printedAbility ability="dexterity" title="Dexterity"}}
{{> printedAbility ability="constitution" title="Constitution"}}
{{> printedAbility ability="intelligence" title="Intelligence"}}
{{> printedAbility ability="wisdom" title="Wisdom"}}
{{> printedAbility ability="charisma" title="Charisma"}}
</div>
<div class="flex layout vertical">
<div class="saves double-border" style="margin-bottom: 2mm">
<div>
{{> printedSkillRow name="Strength" skill="strengthSave"}}
{{> printedSkillRow name="Dexterity" skill="dexteritySave"}}
{{> printedSkillRow name="Constitution" skill="constitutionSave"}}
{{> printedSkillRow name="Intelligence" skill="intelligenceSave"}}
{{> printedSkillRow name="Wisdom" skill="wisdomSave"}}
{{> printedSkillRow name="Charisma" skill="charismaSave"}}
</div>
<div class="paper-font-subhead layout vertical center">
Saving Throws
</div>
</div>
<div class="skills double-border">
<div>
{{> printedSkillRow name="Acrobatics" skill="acrobatics"}}
{{> printedSkillRow name="Animal Handling" skill="animalHandling"}}
{{> printedSkillRow name="Arcana" skill="arcana"}}
{{> printedSkillRow name="Athletics" skill="athletics"}}
{{> printedSkillRow name="Deception" skill="deception"}}
{{> printedSkillRow name="History" skill="history"}}
{{> printedSkillRow name="Insight" skill="insight"}}
{{> printedSkillRow name="Intimidation" skill="intimidation"}}
{{> printedSkillRow name="Investigation" skill="investigation"}}
{{> printedSkillRow name="Medicine" skill="medicine"}}
{{> printedSkillRow name="Nature" skill="nature"}}
{{> printedSkillRow name="Perception" skill="perception" showPassive="true"}}
{{> printedSkillRow name="Performance" skill="performance"}}
{{> printedSkillRow name="Persuasion" skill="persuasion"}}
{{> printedSkillRow name="Religion" skill="religion"}}
{{> printedSkillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> printedSkillRow name="Stealth" skill="stealth"}}
{{> printedSkillRow name="Survival" skill="survival"}}
</div>
<div class="paper-font-subhead layout vertical center">
Skills
</div>
</div>
</div>
</div>
<div class="proficiencies double-border" style="margin-top: 4mm">
<div class="paper-font-subhead layout vertical center">
Proficiencies
<div>
{{#each classes}}
<span style="margin-right: 16px;">
{{name}}&nbsp;{{level}}
</span>
{{/each}}
</div>
<div>
{{#if weaponProfs.length}}
<div class="paper-font-subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> printedProficiency}}
{{/each}}
{{#if armorProfs.length}}
<div class="paper-font-subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> printedProficiency}}
{{/each}}
{{#if toolProfs.length}}
<div class="paper-font-subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> printedProficiency}}
{{/each}}
{{character.alignment}} {{character.gender}} {{character.race}}
</div>
</div>
</div>
<div class="col2 flex" style="margin-left: 4mm; margin-right: 4mm;">
<div class="layout vertical">
<div class="layout horizontal justified" style="margin-bottom: 2mm">
<div class="armor">
{{> printedSquareStat stat="armor" name="Armor Class" class="shield-background"}}
</div>
<div class="inititive">
{{> printedSquareStat stat="initiative" name="Initiative" isSkill="true" class="double-border"}}
</div>
<div class="speed">
{{> printedSquareStat stat="speed" name="Speed" class="double-border"}}
</div>
<div class="layout horizontal">
<div class="col1 flex layout vertical">
<div class="initiative" style="margin-bottom: 2mm;">
{{> printedLongStat stat="" name="Inspiration" prefix=""}}
</div>
<div class="hitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div>
Hit point maximum:
<span class="paper-font-subhead">
{{characterCalculate "attributeBase" _id "hitPoints"}}
</span>
</div>
<div class="flex" style="width: 3cm; height: 2cm;">
<!-- Space for writing -->
</div>
<div class="layout vertical center paper-font-subhead">
Hit Points
</div>
</div>
<div class="tempHitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div style="width: 3cm; height: 2cm;">
<!-- Space for writing -->
</div>
<div class="layout vertical center paper-font-subhead">
Temporary Hit Points
</div>
<div class="proficiencyBonus" style="margin-bottom: 4mm;">
{{> printedLongStat stat="proficiencyBonus" name="Proficiency Bonus" prefix="+"}}
</div>
<div class="layout horizontal">
<div class="hitDice double-border layout vertical" style="margin-right: 2mm;">
<div class="abilities layout vertical justified" style="margin-right: 4mm;">
{{> printedAbility ability="strength" title="Strength"}}
{{> printedAbility ability="dexterity" title="Dexterity"}}
{{> printedAbility ability="constitution" title="Constitution"}}
{{> printedAbility ability="intelligence" title="Intelligence"}}
{{> printedAbility ability="wisdom" title="Wisdom"}}
{{> printedAbility ability="charisma" title="Charisma"}}
</div>
<div class="flex layout vertical">
<div class="saves double-border" style="margin-bottom: 2mm">
<div>
{{> printedSkillRow name="Strength" skill="strengthSave"}}
{{> printedSkillRow name="Dexterity" skill="dexteritySave"}}
{{> printedSkillRow name="Constitution" skill="constitutionSave"}}
{{> printedSkillRow name="Intelligence" skill="intelligenceSave"}}
{{> printedSkillRow name="Wisdom" skill="wisdomSave"}}
{{> printedSkillRow name="Charisma" skill="charismaSave"}}
</div>
<div class="paper-font-subhead layout vertical center">
Saving Throws
</div>
</div>
<div class="skills double-border">
<div>
{{> printedSkillRow name="Acrobatics" skill="acrobatics"}}
{{> printedSkillRow name="Animal Handling" skill="animalHandling"}}
{{> printedSkillRow name="Arcana" skill="arcana"}}
{{> printedSkillRow name="Athletics" skill="athletics"}}
{{> printedSkillRow name="Deception" skill="deception"}}
{{> printedSkillRow name="History" skill="history"}}
{{> printedSkillRow name="Insight" skill="insight"}}
{{> printedSkillRow name="Intimidation" skill="intimidation"}}
{{> printedSkillRow name="Investigation" skill="investigation"}}
{{> printedSkillRow name="Medicine" skill="medicine"}}
{{> printedSkillRow name="Nature" skill="nature"}}
{{> printedSkillRow name="Perception" skill="perception" showPassive="true"}}
{{> printedSkillRow name="Performance" skill="performance"}}
{{> printedSkillRow name="Persuasion" skill="persuasion"}}
{{> printedSkillRow name="Religion" skill="religion"}}
{{> printedSkillRow name="Sleight of Hand" skill="sleightOfHand"}}
{{> printedSkillRow name="Stealth" skill="stealth"}}
{{> printedSkillRow name="Survival" skill="survival"}}
</div>
<div class="paper-font-subhead layout vertical center">
Skills
</div>
</div>
</div>
</div>
<div class="proficiencies double-border" style="margin-top: 4mm">
<div class="paper-font-subhead layout vertical center">
Proficiencies
</div>
<div>
{{#if weaponProfs.length}}
<div class="paper-font-subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> printedProficiency}}
{{/each}}
{{#if armorProfs.length}}
<div class="paper-font-subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> printedProficiency}}
{{/each}}
{{#if toolProfs.length}}
<div class="paper-font-subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> printedProficiency}}
{{/each}}
</div>
</div>
</div>
<div class="col2 flex" style="margin-left: 4mm; margin-right: 4mm;">
<div class="layout vertical">
<div class="layout horizontal justified" style="margin-bottom: 2mm">
<div class="armor">
{{> printedSquareStat stat="armor" name="Armor Class" class="shield-background"}}
</div>
<div class="inititive">
{{> printedSquareStat stat="initiative" name="Initiative" isSkill="true" class="double-border"}}
</div>
<div class="speed">
{{> printedSquareStat stat="speed" name="Speed" class="double-border"}}
</div>
</div>
<div class="hitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div>
Total:
Hit point maximum:
<span class="paper-font-subhead">
Total goes here
{{characterCalculate "attributeBase" _id "hitPoints"}}
</span>
</div>
<div class="flex">
<div class="flex" style="width: 3cm; height: 2cm;">
<!-- Space for writing -->
</div>
<div class="paper-font-subhead layout vertical center">
Hit Dice
<div class="layout vertical center paper-font-subhead">
Hit Points
</div>
</div>
<div class="deathSaves layout vertical double-border">
<div class="layout horizontal center">
<div class="flex layout vertical end" style="margin-right: 1mm;">
Successes
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<div class="tempHitpoints layout vertical double-border" style="margin-bottom: 2mm;">
<div style="width: 3cm; height: 2cm;">
<!-- Space for writing -->
</div>
<div class="layout horizontal center">
<div class="flex layout vertical end" style="margin-right: 1mm;">
Failures
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<div class="layout vertical center paper-font-subhead">
Temporary Hit Points
</div>
<div class="paper-font-subhead layout vertical center" style="margin-top: 4mm;">
Death Saves
</div>
<div class="layout horizontal">
<div class="hitDice double-border layout vertical" style="margin-right: 2mm;">
<div>
Total:
<span class="paper-font-subhead">
Total goes here
</span>
</div>
<div class="flex">
<!-- Space for writing -->
</div>
<div class="paper-font-subhead layout vertical center">
Hit Dice
</div>
</div>
<div class="deathSaves layout vertical double-border">
<div class="layout horizontal center">
<div class="flex layout vertical end" style="margin-right: 1mm;">
Successes
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
</div>
<div class="layout horizontal center">
<div class="flex layout vertical end" style="margin-right: 1mm;">
Failures
</div>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
<iron-icon icon="radio-button-unchecked"></iron-icon>
</div>
<div class="paper-font-subhead layout vertical center" style="margin-top: 4mm;">
Death Saves
</div>
</div>
</div>
</div>
</div>
<div class="attacks"></div>
<div class="attacks"></div>
</div>
<div class="col3 flex">
<div class="traits double-border">
{{#markdown}}{{evaluateShortString character._id character.personality}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Personality traits
</div>
</div>
<div class="ideals double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.ideals}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Ideals
<div class="col3 flex">
<div class="traits double-border">
{{#markdown}}{{evaluateShortString character._id character.personality}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Personality traits
</div>
</div>
</div>
<div class="bonds double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.bonds}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Bonds
<div class="ideals double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.ideals}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Ideals
</div>
</div>
</div>
<div class="flaws double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.flaws}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Flaws
<div class="bonds double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.bonds}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Bonds
</div>
</div>
<div class="flaws double-border" style="margin-top: 2mm">
{{#markdown}}{{evaluateShortString character._id character.flaws}}{{/markdown}}
<div class="paper-font-subhead layout vertical center">
Flaws
</div>
</div>
</div>
</div>
@@ -209,4 +225,5 @@
</div>
</div>
</div>
</div>
</template>

View File

@@ -27,3 +27,12 @@ Template.printedCharacterSheet.helpers({
return removeDuplicateProficiencies(profs);
},
});
Template.printedCharacterSheet.events({
"click .printButton": function(event, instance){
print();
},
"click .backButton": function(event, instance){
history && history.back();
},
});