Merge branch 'master' into theme-selector-styling

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -45,12 +45,13 @@ let rawPages      = [];
 
 const BrewRenderer = (props)=>{
 	props = {
-		text     : '',
-		style    : '',
-		renderer : 'legacy',
-		theme    : '5ePHB',
-		lang     : '',
-		errors   : [],
+		text              : '',
+		style             : '',
+		renderer          : 'legacy',
+		theme             : '5ePHB',
+		lang              : '',
+		errors            : [],
+		currentEditorPage : 0,
 		...props
 	};
 
@@ -94,6 +95,9 @@ const BrewRenderer = (props)=>{
 		if(Math.abs(index - state.viewablePageNumber) <= 3)
 			return true;
 
+		if(index + 1 == props.currentEditorPage)
+			return true;
+
 		return false;
 	};
 
@@ -143,6 +147,9 @@ const BrewRenderer = (props)=>{
 		if(props.errors && props.errors.length)
 			return renderedPages;
 
+		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
+			renderedPages.length = 0;
+
 		_.forEach(rawPages, (page, index)=>{
 			if((shouldRender(index) || !renderedPages[index]) && typeof window !== 'undefined'){
 				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range

client/homebrew/brewRenderer/brewRenderer.less

@@ -3,9 +3,9 @@
 .brewRenderer {
 	will-change : transform;
 	overflow-y  : scroll;
-	.pages {
+	:where(.pages) {
 		margin : 30px 0px;
-		& > .page {
+		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
 			margin-right  : auto;

client/homebrew/editor/snippetbar/snippetbar.less

@@ -4,6 +4,8 @@
 	position         : relative;
 	height           : @menuHeight;
 	background-color : #ddd;
+	color			 : black;
+
 	.editors{
 		position        : absolute;
 		display         : flex;
@@ -34,7 +36,7 @@
 				font-size : 0.75em;
 				color     : grey;
 				&.active{
-					color : black;
+					color : inherit;
 				}
 			}
 			&.redo{
@@ -42,24 +44,18 @@
 				font-size : 0.75em;
 				color     : grey;
 				&.active{
-					color : black;
+					color : inherit;
 				}
 			}
 			&.foldAll{
 				.tooltipLeft('Fold All');
 				font-size : 0.75em;
-				color     : grey;
-				&.active{
-					color : black;
-				}
+				color     : inherit;
 			}
 			&.unfoldAll{
 				.tooltipLeft('Unfold All');
 				font-size : 0.75em;
-				color     : grey;
-				&.active{
-					color : black;
-				}
+				color     : inherit;
 			}
 			&.editorTheme {
 				.tooltipLeft('Editor Themes');
@@ -71,7 +67,7 @@
 				}
 			}
 			&.divider {
-				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
+				background: linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
 				width: 5px;
 				&:hover{
 					background-color: inherit;
@@ -117,7 +113,7 @@
 		.tooltipLeft("Edit Brew Properties");
 	}
 	.snippetGroup{
-		border-right   : 1px solid black;
+		border-right   : 1px solid currentColor;
 		&:hover{
 			&>.dropdown{
 				visibility : visible;

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -220,6 +220,7 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
+			<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}

client/homebrew/pages/basePages/listPage/listPage.less

@@ -2,17 +2,18 @@
 .noColumns(){
 	column-count         : auto;
 	column-fill          : auto;
-	column-gap           : auto;
+	column-gap           : normal;
 	column-width         : auto;
 	-webkit-column-count : auto;
 	-moz-column-count    : auto;
 	-webkit-column-width : auto;
 	-moz-column-width    : auto;
-	-webkit-column-gap   : auto;
-	-moz-column-gap      : auto;
+	-webkit-column-gap   : normal;
+	-moz-column-gap      : normal;
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
+	contain				 : unset;
 }
 .listPage{
 	.content{

client/homebrew/pages/editPage/editPage.jsx

@@ -50,7 +50,8 @@ const EditPage = createClass({
 			url                    : '',
 			autoSave               : true,
 			autoSaveWarning        : false,
-			unsavedTime            : new Date()
+			unsavedTime            : new Date(),
+			currentEditorPage      : 0
 		};
 	},
 	savedBrew : null,
@@ -109,9 +110,10 @@ const EditPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			isPending  : true,
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			isPending         : true,
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.refs.editor.getCurrentPage()
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -405,6 +407,7 @@ const EditPage = createClass({
 						theme={this.state.brew.theme}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
 					/>
 				</SplitPane>
 			</div>