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:
@@ -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>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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)=>{
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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++;
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
background-color : @color;
|
background-color : @color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.note{
|
&.note:before{
|
||||||
background-color: @color;
|
background-color: @color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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|
|
||||||
|:---:|:---:|:---|:---:|
|
|:---:|:---:|:---|:---:|
|
||||||
|
|||||||
Reference in New Issue
Block a user