0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 15:12:43 +00:00

Merge branch 'borderTest' into snippets

This commit is contained in:
Scott Tolksdorf
2017-03-19 13:51:24 -04:00
8 changed files with 151 additions and 92 deletions

View File

@@ -9,24 +9,36 @@ const PrintPage = React.createClass({
query : {}, query : {},
brew : { brew : {
text : '', text : '',
style : ''
} }
}; };
}, },
getInitialState: function() { getInitialState: function() {
return { return {
brewText: this.props.brew.text brew: this.props.brew
}; };
}, },
componentDidMount: function() { componentDidMount: function() {
if(this.props.query.local){ 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(); if(this.props.query.dialog) window.print();
}, },
//TODO: This is pretty bad
renderStyle : function(){
if(!this.state.brew.style) return;
return <style>{this.state.brew.style.replace(/;/g, ' !important;')}</style>
},
renderPages : function(){ renderPages : function(){
return _.map(this.state.brewText.split('\\page'), (page, index) => { return _.map(this.state.brew.text.split('\\page'), (page, index) => {
return <div return <div
className='phb' className='phb v2'
id={`p${index + 1}`} id={`p${index + 1}`}
dangerouslySetInnerHTML={{__html:Markdown.render(page)}} dangerouslySetInnerHTML={{__html:Markdown.render(page)}}
key={index} />; key={index} />;
@@ -35,6 +47,7 @@ const PrintPage = React.createClass({
render : function(){ render : function(){
return <div> return <div>
{this.renderStyle()}
{this.renderPages()} {this.renderPages()}
</div> </div>
} }

View File

@@ -7,14 +7,11 @@
"quick": "node scripts/quick.js", "quick": "node scripts/quick.js",
"build": "node scripts/build.js", "build": "node scripts/build.js",
"populate": "node scripts/populate.js", "populate": "node scripts/populate.js",
"prod": "set NODE_ENV=production&& npm run build", "prod": "set NODE_ENV=production&& npm run build",
"postinstall": "npm run build", "postinstall": "npm run build",
"start": "node server.js", "start": "node server.js",
"snippet": "nodemon scripts/snippet.test.js",
"snippet" : "nodemon scripts/snippet.test.js", "todo": "./node_modules/.bin/fixme -i node_modules/** -i build/**",
"todo" : "node_modules/.bin/notes -h true -x node_modules/ -x build/",
"test": "mocha tests", "test": "mocha tests",
"test:dev": "nodemon -x mocha tests || exit 0", "test:dev": "nodemon -x mocha tests || exit 0",
"test:markdown": "nodemon -x mocha tests/markdown.test.js || exit 0" "test:markdown": "nodemon -x mocha tests/markdown.test.js || exit 0"
@@ -50,6 +47,7 @@
"chai": "^3.5.0", "chai": "^3.5.0",
"chai-as-promised": "^6.0.0", "chai-as-promised": "^6.0.0",
"chai-subset": "^1.4.0", "chai-subset": "^1.4.0",
"fixme": "^0.4.3",
"mocha": "^3.2.0", "mocha": "^3.2.0",
"supertest": "^2.0.1", "supertest": "^2.0.1",
"supertest-as-promised": "^4.0.2" "supertest-as-promised": "^4.0.2"

View File

@@ -45,6 +45,7 @@ router.get('/edit/:editId', mw.loadBrew, renderPage);
//Print Page //Print Page
router.get('/print/:shareId', mw.viewBrew, renderPage); router.get('/print/:shareId', mw.viewBrew, renderPage);
router.get('/print', renderPage);
//Source page //Source page
router.get('/source/:sharedId', mw.viewBrew, (req, res, next)=>{ router.get('/source/:sharedId', mw.viewBrew, (req, res, next)=>{

View File

@@ -70,8 +70,9 @@ const Actions = {
}, },
localPrint : ()=>{ localPrint : ()=>{
localStorage.setItem('print', Store.getBrewText()); const key = 'print';
window.open('/print?dialog=true&local=print','_blank'); localStorage.setItem(key, JSON.stringify(Store.getBrew()));
window.open(`/print?dialog=true&local=${key}`,'_blank');
}, },
print : ()=>{ print : ()=>{
window.open(`/print/${Store.getBrew().shareId}?dialog=true`, '_blank').focus(); window.open(`/print/${Store.getBrew().shareId}?dialog=true`, '_blank').focus();

View File

@@ -13,11 +13,11 @@ renderer.paragraph = function(text){
if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true})); if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true}));
const block = matches[matchIndex]; const block = matches[matchIndex];
if(block && block[0] == '{'){ if(block && block[0] == '{'){
r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}"><div class="internal">`); r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}">`);
blockCount++; blockCount++;
} }
if(block == '}}' && blockCount !== 0){ if(block == '}}' && blockCount !== 0){
r.push('</div></div>\n\n'); r.push('</div>\n\n');
blockCount--; blockCount--;
} }
matchIndex++; matchIndex++;

View File

@@ -1,4 +1,20 @@
.breakAvoid(){
column-break-inside : avoid;
-webkit-column-break-inside : avoid;
}
.pseudoBorder(){
position : relative;
&:before{
content : '';
position : absolute;
z-index : -1;
box-sizing : border-box;
border-style : solid;
border-image-repeat : round;
}
}
///////////////////
.spell{ .spell{
ul:first-of-type{ ul:first-of-type{
margin-top : -0.5em; margin-top : -0.5em;
@@ -12,69 +28,73 @@
} }
} }
.monster{ .monster{
-webkit-column-break-inside : avoid; .breakAvoid();
column-break-inside : avoid; .pseudoBorder();
padding : 10px 5px;
&>.internal{ table{
//background-color : @monsterStatBackground; color : @headerText;
background-image: @monsterBG; }
border-style : solid; ul:nth-of-type(1),ul:nth-of-type(2){
border-width : 10px; background-color : red;
border-image : @monsterBorder 10; }
table{ &:before{
color : @headerText; top : 10px;
} right : 0px;
bottom : 10px;
ul:nth-of-type(1),ul:nth-of-type(2){ left : 0px;
background-color: red; //background-color : @monsterStatBackground;
} //border-image-outset : 25px 17px;
border-image-slice : 10;
border-image-source : @monsterBorder;
border-image-width : 47px;
} }
} }
.note{ .note{
.useSansSerif(); .useSansSerif();
margin: 9px 0px; .breakAvoid();
&>.internal{ .pseudoBorder();
margin-bottom : 1em; margin : 9px 0px;
padding : 5px 10px; padding : 12px 5px;
&:before{
top : 9px;
right : 0px;
bottom : 9px;
left : 0px;
background-color : @green; background-color : @green;
border-style : solid;
border-width : 11px; border-width : 11px;
border-image : @noteBorder 11;
border-image-outset : 9px 0px; border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888; border-image-slice : 11;
h2,h3,h4{ border-image-source : @noteBorder;
.useSansSerif();
color : black;
}
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
}
} }
&.alt>.internal{ h2,h3,h4{
border-style : solid; .useSansSerif();
border-width : 7px; color : black;
border-image : @descriptiveBorder 12 round; }
border-image-outset : 4px; p, ul{
font-size : 0.352cm;
line-height : 1.1em;
}
&.alt{
&:before{
border-style : solid;
border-width : 7px;
border-image-outset : 4px;
border-image-slice : 12;
border-image-source : @descriptiveBorder;
}
} }
} }
.frame{ .frame{
margin-top : 26px; .breakAvoid();
margin-bottom : 37px; .pseudoBorder();
margin-left : 17px; padding : 25px 17px;
margin-right: 17px; &:before{
&>.internal{ top : 25px;
box-sizing : border-box; right : 17px;
bottom : 25px;
left : 17px;
background-color : white; background-color : white;
border : initial;
border-style : solid;
border-image-outset : 25px 17px; border-image-outset : 25px 17px;
border-image-repeat : round;
border-image-slice : 150 200 150 200; border-image-slice : 150 200 150 200;
border-image-source : @frameBorder; border-image-source : @frameBorder;
border-image-width : 47px; border-image-width : 47px;
@@ -85,58 +105,48 @@
-webkit-column-span : all; -webkit-column-span : all;
-moz-column-span : all; -moz-column-span : all;
} }
.oneColumn{ .oneColumn{
column-count : 1; column-count : 1;
column-gap : 1cm; column-gap : 1cm;
} }
.twoColumn{ .twoColumn{
column-count : 2; column-count : 2;
column-gap : 1cm; column-gap : 1cm;
} }
.threeColumn{ .threeColumn{
column-count : 3; column-count : 3;
column-gap : 1cm; column-gap : 1cm;
} }
.fourColumn{ .fourColumn{
column-count : 4; column-count : 4;
column-gap : 1cm; column-gap : 1cm;
} }
.columnSplit{ .columnSplit{
visibility : hidden; visibility : hidden;
-webkit-column-break-after : always; -webkit-column-break-after : always;
break-after : always; break-after : always;
-moz-column-break-after : always; -moz-column-break-after : always;
} }
.brushed{ .brushed{
border-image-source : url('http://i.imgur.com/nzPYZyD.png'); border-image-outset : 25px 17px;
border-image-outset : 25px 17px; border-image-repeat : round;
border-image-repeat : round; border-image-slice : 1250 1250 1250 1250;
border-image-slice : 1250 1250 1250 1250; border-image-width : 1250px;
border-image-width : 1250px; border-image-source : url('http : //i.imgur.com/nzPYZyD.png');
} }
//basics //basics
.left{ .left{
text-align: left; text-align : left;
} }
.right{ .right{
text-align: right; text-align : right;
} }
.center{ .center{
text-align: center; text-align : center;
} }
.bold{ .bold{
font-weight: 800; font-weight : 800;
} }
.sansSerif{ .sansSerif{
.useSansSerif(); .useSansSerif();
} }

View File

@@ -15,7 +15,7 @@
background-color : @color; background-color : @color;
} }
} }
&.note{ &.note:before{
background-color: @color; background-color: @color;
} }
} }

View File

@@ -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. 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 >##### 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 > 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 ## 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 \page
{{classTable,wide {{frame,wide
##### The Archivist ##### The Archivist
| Level | Proficiency Bonus | Features | Statistical Occultism| | Level | Proficiency Bonus | Features | Statistical Occultism|
|:---:|:---:|:---|:---:| |:---:|:---:|:---|:---:|