0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00

Merge pull request #1651 from naturalcrit/FixV3MiscStylesBeforeLaunch

Fix v3 misc styles before launch
This commit is contained in:
Trevor Buckner
2021-09-09 10:36:08 -04:00
committed by GitHub
6 changed files with 60 additions and 80 deletions

View File

@@ -131,7 +131,7 @@ const BrewRenderer = createClass({
if(this.props.renderer == 'legacy')
return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
else {
pageText += `\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
return (
<div className='page' id={`p${index + 1}`} key={index} >
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />

View File

@@ -60,13 +60,13 @@ module.exports = {
const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
const content = _.map(levels, (level)=>{
const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
const spells = _.map(_.sampleSize(spellNames, _.random(4, 10)), (spell)=>{
return `- ${spell}`;
}).join('\n');
return `##### ${level} \n${spells} \n`;
}).join('\n');
return `{{spellList\n${content}\n}}`;
return `{{spellList,wide\n${content}\n}}`;
},
spell : function(){

View File

@@ -47,7 +47,7 @@ If you want to save ink or have a monochrome printer, add the {{fas,fa-tint}} **
## New in V3.0.0
With the latest major update to *The Homebrewery* we've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew, and going forward, raw HTML will no longer receive debugging support (*but can still be used if you insist*).
All brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew. Much of the syntax and styling has changed in V3, so code in one version may be broken in the other.
Much of the syntax and styling has changed in V3. Code in one version may be broken in the other, and updating an older brew to V3 will require more than just a copy and paste. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
Scroll down to the next page for a brief summary of the changes and new features available in V3!

View File

@@ -46,7 +46,7 @@ const PrintPage = createClass({
});
} else {
return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{
pageText += `\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
return (
<div className='page' id={`p${index + 1}`} key={index} >
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />

View File

@@ -174,13 +174,16 @@ const mustacheInjectBlock = {
lastToken.originalType = 'mustacheInjectBlock';
lastToken.tags = ` ${processStyleTags(match[1])}`;
return {
type : 'text', // Should match "name" above
raw : match[0], // Text to consume from the source
type : 'mustacheInjectBlock', // Should match "name" above
raw : match[0], // Text to consume from the source
text : ''
};
}
},
renderer(token) {
if(!token.originalType){
return;
}
token.type = token.originalType;
const text = this.parser.parse([token]);
const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);

View File

@@ -19,7 +19,7 @@ body {
}
.useSansSerif(){
font-family : ScalySansRemake;
font-size : 0.325cm;
font-size : 0.318cm;
line-height : 1.2em;
p,dl,ul,ol {
line-height : 1.2em;
@@ -51,6 +51,7 @@ body {
max-height : 100%;
column-span : all;
columns : inherit;
column-gap : inherit;
}
.page{
.useColumns();
@@ -184,7 +185,7 @@ body {
.useSansSerif();
width : 100%;
& + * {
margin-top : 1em;
margin-top : 0.27cm;
}
thead{
display: table-row-group;
@@ -209,29 +210,21 @@ body {
// * NOTE
// *****************************/
.note{
&::before{
content : "";
box-sizing : border-box;
border-style : solid;
border-width : 11px;
border-image : @noteBorderImage 12;
border-image-outset : 9px 0px;
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
.useSansSerif();
position : relative;
margin-top : 1.3em;
margin-left : -0.1em;
margin-right : -0.1em;
background-color : @noteGreen;
border-style : solid;
border-width : 1px;
border-image : @noteBorderImage 12 stretch;
border-image-outset : 9px 0px;
border-image-width : 11px;
margin-top : 9px; //Prevent top border getting cut off on colbreak
padding : 0.13cm 0.16cm;
filter : drop-shadow(1px 4px 6px #888);
padding : 0.5em 0.6em;
& + * {
margin-top : 1.3em;
margin-top : 0.45cm;
}
h5 {
font-size : 0.375cm;
}
p{
display : block;
@@ -241,7 +234,7 @@ body {
padding-top : .8em;
}
:last-child {
margin-bottom : 0em;
margin-bottom : 0;
}
}
//************************************
@@ -249,18 +242,19 @@ body {
// ************************************/
.descriptive{
.useSansSerif();
display : inline-block;
margin-top : 1.4em;
background-color : #faf7ea;
font-family : ScalySansRemake;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
filter : drop-shadow(0 0 3px #faf7ea);
margin-top : 4px; //Prevent top border getting cut off on colbreak
padding : 0.1em;
filter : drop-shadow(0 0 3px #faf7ea);
& + * {
margin-top : 1.4em;
margin-top : 0.45cm;
}
h5 {
font-size : 0.375cm;
}
p{
display : block;
@@ -271,7 +265,7 @@ body {
padding-top : .8em;
}
:last-child {
margin-bottom : 0em;
margin-bottom : 0;
}
}
//*****************************
@@ -355,12 +349,6 @@ body {
.watercolor11 { --wc : @watercolor11; }
.watercolor12 { --wc : @watercolor12; }
img {
z-index: 2 !important;
filter : drop-shadow(0px 6px 6px rgba(0,0,0,.4));
position: absolute;
}
//*****************************
// * MONSTER STAT BLOCK
// *****************************/
@@ -380,7 +368,6 @@ body {
margin : 0px -6px 1em;
}
//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns...
position : relative;
padding : 0px;
margin-bottom : 1em;
@@ -520,14 +507,17 @@ body {
pre code{
width : 100%;
display : block;
border : 4px solid;
display : inline-block;
border-style : solid;
border-width : 1px;
border-image : @codeBorderImage 26 stretch;
border-image-width : 10px;
border-image-outset : 2px;
border-radius : 12px;
margin-top : 2px; //Prevent top border getting cut off on colbreak
margin-bottom : 2px;
& + * {
margin-top : 1em;
margin-top : 0.27cm;
}
}
//*****************************
@@ -537,22 +527,12 @@ body {
visibility : hidden;
margin : 0px;
}
//Modified unorder list, used in spells
hr+ul{
margin-bottom : 0.5em;
padding-left : 1em;
text-indent : -1em;
list-style-type : none;
}
.columnSplit {
visibility : hidden;
-webkit-column-break-after : always;
break-after : always;
-moz-column-break-after : always;
break-before : column;
&+* {
margin-top: 0;
}
}
//Avoid breaking up
blockquote,table{
@@ -561,10 +541,6 @@ body {
page-break-inside : avoid;
break-inside : avoid;
}
//Better spacing for spell blocks
h4+p+hr+ul{
margin-top : -0.5em
}
//Text indent right after table
table+p{
text-indent : 1em;
@@ -585,10 +561,7 @@ body {
// *****************************/
.page .spellList{
.useSansSerif();
column-count : 4;
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
column-count : 2;
ul+h5{
margin-top : 15px;
}
@@ -605,20 +578,11 @@ body {
page-break-inside : auto;
break-inside : auto;
}
}
//*****************************
// * WIDE
// *****************************/
.page .wide{
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
display : block;
margin-bottom : 0.34cm;
&+* {
margin-top : 0;
&.wide{
column-count : 4;
}
}
//*****************************
// * CLASS TABLE
// *****************************/
@@ -744,16 +708,15 @@ body {
// *****************************/
.page {
.block {
break-inside : avoid;
-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
break-inside : avoid;
display : inline-block;
min-width : 100%;
//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
}
.inline-block {
display : inline-block;
text-indent : initial;
}
div {
column-gap : 0.5cm; //Default spacing if a div uses multicolumns
}
}
//*****************************
@@ -799,3 +762,17 @@ body {
margin-top: -1em;
}
}
//*****************************
// * WIDE
// *****************************/
.page .wide{
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
display : block;
margin-bottom : 0.34cm;
&+* {
margin-top : 0;
}
}