mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2026-01-05 10:09:15 +00:00
Merge branch 'borderTest' into snippets
This commit is contained in:
Scott Tolksdorf
@@ -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 <style>{this.state.brew.style.replace(/;/g, ' !important;')}</style>
|
||||
},
|
||||
renderPages : function(){
|
||||
return _.map(this.state.brewText.split('\\page'), (page, index) => {
|
||||
return _.map(this.state.brew.text.split('\\page'), (page, index) => {
|
||||
return <div
|
||||
className='phb'
|
||||
className='phb v2'
|
||||
id={`p${index + 1}`}
|
||||
dangerouslySetInnerHTML={{__html:Markdown.render(page)}}
|
||||
key={index} />;
|
||||
@@ -35,6 +47,7 @@ const PrintPage = React.createClass({
|
||||
|
||||
render : function(){
|
||||
return <div>
|
||||
{this.renderStyle()}
|
||||
{this.renderPages()}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,14 +7,11 @@
|
||||
"quick": "node scripts/quick.js",
|
||||
"build": "node scripts/build.js",
|
||||
"populate": "node scripts/populate.js",
|
||||
|
||||
"prod": "set NODE_ENV=production&& npm run build",
|
||||
"postinstall": "npm run build",
|
||||
"start": "node server.js",
|
||||
|
||||
"snippet" : "nodemon scripts/snippet.test.js",
|
||||
"todo" : "node_modules/.bin/notes -h true -x node_modules/ -x build/",
|
||||
|
||||
"snippet": "nodemon scripts/snippet.test.js",
|
||||
"todo": "./node_modules/.bin/fixme -i node_modules/** -i build/**",
|
||||
"test": "mocha tests",
|
||||
"test:dev": "nodemon -x mocha tests || exit 0",
|
||||
"test:markdown": "nodemon -x mocha tests/markdown.test.js || exit 0"
|
||||
@@ -50,6 +47,7 @@
|
||||
"chai": "^3.5.0",
|
||||
"chai-as-promised": "^6.0.0",
|
||||
"chai-subset": "^1.4.0",
|
||||
"fixme": "^0.4.3",
|
||||
"mocha": "^3.2.0",
|
||||
"supertest": "^2.0.1",
|
||||
"supertest-as-promised": "^4.0.2"
|
||||
|
||||
@@ -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)=>{
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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<div class="block ${block.substring(2).split(',').join(' ')}"><div class="internal">`);
|
||||
r.push(`\n\n<div class="block ${block.substring(2).split(',').join(' ')}">`);
|
||||
blockCount++;
|
||||
}
|
||||
if(block == '}}' && blockCount !== 0){
|
||||
r.push('</div></div>\n\n');
|
||||
r.push('</div>\n\n');
|
||||
blockCount--;
|
||||
}
|
||||
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{
|
||||
ul:first-of-type{
|
||||
margin-top : -0.5em;
|
||||
@@ -12,69 +28,73 @@
|
||||
}
|
||||
}
|
||||
.monster{
|
||||
-webkit-column-break-inside : avoid;
|
||||
column-break-inside : avoid;
|
||||
|
||||
&>.internal{
|
||||
//background-color : @monsterStatBackground;
|
||||
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;
|
||||
}
|
||||
|
||||
.breakAvoid();
|
||||
.pseudoBorder();
|
||||
padding : 10px 5px;
|
||||
table{
|
||||
color : @headerText;
|
||||
}
|
||||
ul:nth-of-type(1),ul:nth-of-type(2){
|
||||
background-color : red;
|
||||
}
|
||||
&:before{
|
||||
top : 10px;
|
||||
right : 0px;
|
||||
bottom : 10px;
|
||||
left : 0px;
|
||||
//background-color : @monsterStatBackground;
|
||||
//border-image-outset : 25px 17px;
|
||||
border-image-slice : 10;
|
||||
border-image-source : @monsterBorder;
|
||||
border-image-width : 47px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.note{
|
||||
.useSansSerif();
|
||||
margin: 9px 0px;
|
||||
&>.internal{
|
||||
margin-bottom : 1em;
|
||||
padding : 5px 10px;
|
||||
.breakAvoid();
|
||||
.pseudoBorder();
|
||||
margin : 9px 0px;
|
||||
padding : 12px 5px;
|
||||
&:before{
|
||||
top : 9px;
|
||||
right : 0px;
|
||||
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;
|
||||
}
|
||||
|
||||
border-image-slice : 11;
|
||||
border-image-source : @noteBorder;
|
||||
}
|
||||
&.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-outset : 4px;
|
||||
border-image-slice : 12;
|
||||
border-image-source : @descriptiveBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame{
|
||||
margin-top : 26px;
|
||||
margin-bottom : 37px;
|
||||
margin-left : 17px;
|
||||
margin-right: 17px;
|
||||
&>.internal{
|
||||
box-sizing : border-box;
|
||||
.breakAvoid();
|
||||
.pseudoBorder();
|
||||
padding : 25px 17px;
|
||||
&:before{
|
||||
top : 25px;
|
||||
right : 17px;
|
||||
bottom : 25px;
|
||||
left : 17px;
|
||||
background-color : white;
|
||||
border : initial;
|
||||
border-style : solid;
|
||||
border-image-outset : 25px 17px;
|
||||
border-image-repeat : round;
|
||||
border-image-slice : 150 200 150 200;
|
||||
border-image-source : @frameBorder;
|
||||
border-image-width : 47px;
|
||||
@@ -85,58 +105,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();
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
background-color : @color;
|
||||
}
|
||||
}
|
||||
&.note{
|
||||
&.note:before{
|
||||
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.
|
||||
|
||||
{{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|
|
||||
|:---:|:---:|:---|:---:|
|
||||
|
||||
Reference in New Issue
Block a user