diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx index 70ab71a0c..356967d15 100644 --- a/client/homebrew/pages/printPage/printPage.jsx +++ b/client/homebrew/pages/printPage/printPage.jsx @@ -9,24 +9,36 @@ const PrintPage = React.createClass({ query : {}, brew : { text : '', + style : '' } }; }, getInitialState: function() { return { - brewText: this.props.brew.text + brew: this.props.brew }; }, componentDidMount: function() { if(this.props.query.local){ - this.setState({ brewText : localStorage.getItem(this.props.query.local)}); + try{ + this.setState({ + brew : JSON.parse( + localStorage.getItem(this.props.query.local) + ) + }); + }catch(e){} } if(this.props.query.dialog) window.print(); }, + //TODO: This is pretty bad + renderStyle : function(){ + if(!this.state.brew.style) return; + return + }, renderPages : function(){ - return _.map(this.state.brewText.split('\\page'), (page, index) => { + return _.map(this.state.brew.text.split('\\page'), (page, index) => { return
; @@ -35,6 +47,7 @@ const PrintPage = React.createClass({ render : function(){ return
+ {this.renderStyle()} {this.renderPages()}
} diff --git a/server/interface.routes.js b/server/interface.routes.js index f0d307ad9..035303896 100644 --- a/server/interface.routes.js +++ b/server/interface.routes.js @@ -45,6 +45,7 @@ router.get('/edit/:editId', mw.loadBrew, renderPage); //Print Page router.get('/print/:shareId', mw.viewBrew, renderPage); +router.get('/print', renderPage); //Source page router.get('/source/:sharedId', mw.viewBrew, (req, res, next)=>{ diff --git a/shared/homebrewery/brew.actions.js b/shared/homebrewery/brew.actions.js index 5e0b41e26..e359acacd 100644 --- a/shared/homebrewery/brew.actions.js +++ b/shared/homebrewery/brew.actions.js @@ -70,8 +70,9 @@ const Actions = { }, localPrint : ()=>{ - localStorage.setItem('print', Store.getBrewText()); - window.open('/print?dialog=true&local=print','_blank'); + const key = 'print'; + localStorage.setItem(key, JSON.stringify(Store.getBrew())); + window.open(`/print?dialog=true&local=${key}`,'_blank'); }, print : ()=>{ window.open(`/print/${Store.getBrew().shareId}?dialog=true`, '_blank').focus(); diff --git a/shared/homebrewery/markdown.js b/shared/homebrewery/markdown.js index 4c51bdf7f..288dedc08 100644 --- a/shared/homebrewery/markdown.js +++ b/shared/homebrewery/markdown.js @@ -13,11 +13,11 @@ renderer.paragraph = function(text){ if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true})); const block = matches[matchIndex]; if(block && block[0] == '{'){ - r.push(`\n\n
`); + r.push(`\n\n
`); blockCount++; } if(block == '}}' && blockCount !== 0){ - r.push('
\n\n'); + r.push('
\n\n'); blockCount--; } matchIndex++; diff --git a/shared/homebrewery/phb_style/phb.blocks.less b/shared/homebrewery/phb_style/phb.blocks.less index 0d24b2992..437e7d518 100644 --- a/shared/homebrewery/phb_style/phb.blocks.less +++ b/shared/homebrewery/phb_style/phb.blocks.less @@ -1,4 +1,23 @@ +.breakAvoid(){ + column-break-inside : avoid; + -webkit-column-break-inside : avoid; +} +.pseudoBorder(){ + position : relative; + &:before{ + content : ''; + position : absolute; + box-sizing : border-box; + width : 100%; + border-style : solid; + z-index : -1; + } +} + + +/////////////////// + .spell{ ul:first-of-type{ margin-top : -0.5em; @@ -14,60 +33,58 @@ .monster{ -webkit-column-break-inside : avoid; column-break-inside : avoid; - &>.internal{ //background-color : @monsterStatBackground; - background-image: @monsterBG; + background-image : @monsterBG; border-style : solid; border-width : 10px; border-image : @monsterBorder 10; table{ color : @headerText; } - ul:nth-of-type(1),ul:nth-of-type(2){ - background-color: red; + background-color : red; } - } - } - - .note{ .useSansSerif(); - margin: 9px 0px; - &>.internal{ - margin-bottom : 1em; - padding : 5px 10px; + .breakAvoid(); + .pseudoBorder(); + margin : 9px 0px; + padding : 12px 0px; + &:before{ + top : 9px; + bottom : 9px; + left : 0px; background-color : @green; - border-style : solid; border-width : 11px; border-image : @noteBorder 11; border-image-outset : 9px 0px; - box-shadow : 1px 4px 14px #888; - h2,h3,h4{ - .useSansSerif(); - color : black; - } - p, ul{ - font-size : 0.352cm; - line-height : 1.1em; - } - } - &.alt>.internal{ - border-style : solid; - border-width : 7px; - border-image : @descriptiveBorder 12 round; - border-image-outset : 4px; + h2,h3,h4{ + .useSansSerif(); + color : black; + } + p, ul{ + font-size : 0.352cm; + line-height : 1.1em; + } + + &.alt{ + &:before{ + border-style : solid; + border-width : 7px; + border-image : @descriptiveBorder 12 round; + border-image-outset : 4px; + } } } .frame{ - margin-top : 26px; - margin-bottom : 37px; - margin-left : 17px; - margin-right: 17px; + margin-top : 26px; + margin-right : 17px; + margin-bottom : 37px; + margin-left : 17px; &>.internal{ box-sizing : border-box; background-color : white; @@ -85,58 +102,48 @@ -webkit-column-span : all; -moz-column-span : all; } - .oneColumn{ - column-count : 1; - column-gap : 1cm; + column-count : 1; + column-gap : 1cm; } .twoColumn{ - column-count : 2; - column-gap : 1cm; + column-count : 2; + column-gap : 1cm; } .threeColumn{ - column-count : 3; - column-gap : 1cm; + column-count : 3; + column-gap : 1cm; } .fourColumn{ - column-count : 4; - column-gap : 1cm; + column-count : 4; + column-gap : 1cm; } - .columnSplit{ visibility : hidden; -webkit-column-break-after : always; break-after : always; -moz-column-break-after : always; } - - - .brushed{ - border-image-source : url('http://i.imgur.com/nzPYZyD.png'); - border-image-outset : 25px 17px; - border-image-repeat : round; - border-image-slice : 1250 1250 1250 1250; - border-image-width : 1250px; - - + border-image-outset : 25px 17px; + border-image-repeat : round; + border-image-slice : 1250 1250 1250 1250; + border-image-width : 1250px; + border-image-source : url('http : //i.imgur.com/nzPYZyD.png'); } - - //basics .left{ - text-align: left; + text-align : left; } .right{ - text-align: right; + text-align : right; } .center{ - text-align: center; + text-align : center; } .bold{ - font-weight: 800; + font-weight : 800; } - .sansSerif{ .useSansSerif(); } \ No newline at end of file diff --git a/shared/homebrewery/phb_style/phb.colors.less b/shared/homebrewery/phb_style/phb.colors.less index e49904906..3f92db140 100644 --- a/shared/homebrewery/phb_style/phb.colors.less +++ b/shared/homebrewery/phb_style/phb.colors.less @@ -15,7 +15,7 @@ background-color : @color; } } - &.note{ + &.note:before{ background-color: @color; } } diff --git a/statics/test.brew.md b/statics/test.brew.md index fdd7f820f..0442caa6a 100644 --- a/statics/test.brew.md +++ b/statics/test.brew.md @@ -18,6 +18,21 @@ Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/stolk This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever. +{{note,yellow,alt +##### PDF Exporting + PDF Printing works best in Chrome. If you are having quality/consistency issues, try using Chrome to print instead. + + After clicking the "Print" item in the navbar a new page will open and a print dialog will pop-up. + * Set the **Destination** to "Save as PDF" + * Set **Paper Size** to "Letter" + * If you are printing on A4 paper, make sure to have the "A4 page size snippet" in your brew + * In **Options** make sure "Background Images" is selected. + * Hit print and enjoy! You're done! + + If you want to save ink or have a monochrome printer, add the **Ink Friendly** snippet to your brew before you print + + +}} >##### PDF Exporting @@ -32,8 +47,29 @@ This tool will **always** be free, never have ads, and I will never offer any "p > > If you want to save ink or have a monochrome printer, add the **Ink Friendly** snippet to your brew before you print +{{note +##### PDF Exporting + PDF Printing works best in Chrome. If you are having quality/consistency issues, try using Chrome to print instead. + + After clicking the "Print" item in the navbar a new page will open and a print dialog will pop-up. + * Set the **Destination** to "Save as PDF" + * Set **Paper Size** to "Letter" + * If you are printing on A4 paper, make sure to have the "A4 page size snippet" in your brew + * In **Options** make sure "Background Images" is selected. + * Hit print and enjoy! You're done! + + If you want to save ink or have a monochrome printer, add the **Ink Friendly** snippet to your brew before you print + + +}} + + + ``` +cool stuff + + ``` ## Big things coming in v3.0.0 @@ -66,7 +102,7 @@ If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana]( \page -{{classTable,wide +{{frame,wide ##### The Archivist | Level | Proficiency Bonus | Features | Statistical Occultism| |:---:|:---:|:---|:---:|