Commit 2a5c5d6e authored by Fred Chasen's avatar Fred Chasen

Merge branch 'pagebox-size' into 'master'

Fix pagebox variables

Closes #82

See merge request tools/pagedjs!56
parents bde3b3b8 2c1a905a
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
let meta = book.metadata; let meta = book.metadata;
var $title = document.getElementById("title"); var $title = document.getElementById("title");
var $author = document.getElementById("author"); var $author = document.getElementById("author");
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
@media screen { @media screen {
.pagedjs_sheet { .pagedjs_pagebox {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2); box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
} }
......
...@@ -544,17 +544,17 @@ class AtPage extends Handler { ...@@ -544,17 +544,17 @@ class AtPage extends Handler {
} }
// width variable // width variable
let wVar = this.createVariable("--pagedjs-width", widthString); let wVar = this.createVariable("--pagedjs-pagebox-width", widthString);
list.appendData(wVar); list.appendData(wVar);
// height variable // height variable
let hVar = this.createVariable("--pagedjs-height", heightString); let hVar = this.createVariable("--pagedjs-pagebox-height", heightString);
list.appendData(hVar); list.appendData(hVar);
let w = this.createDimension("width", width); // let w = this.createDimension("width", width);
let h = this.createDimension("height", height); // let h = this.createDimension("height", height);
list.appendData(w); // list.appendData(w);
list.appendData(h); // list.appendData(h);
} }
addMarginaliaStyles(page, list, item, sheet) { addMarginaliaStyles(page, list, item, sheet) {
...@@ -741,8 +741,8 @@ class AtPage extends Handler { ...@@ -741,8 +741,8 @@ class AtPage extends Handler {
let bleedBottom = this.createVariable("--pagedjs-bleed-bottom", CSSValueToString(bleed.bottom)); let bleedBottom = this.createVariable("--pagedjs-bleed-bottom", CSSValueToString(bleed.bottom));
let bleedLeft = this.createVariable("--pagedjs-bleed-left", CSSValueToString(bleed.left)); let bleedLeft = this.createVariable("--pagedjs-bleed-left", CSSValueToString(bleed.left));
let pageWidthVar = this.createVariable("--pagedjs-page-width", CSSValueToString(width)); let pageWidthVar = this.createVariable("--pagedjs-width", CSSValueToString(width));
let pageHeightVar = this.createVariable("--pagedjs-page-height", CSSValueToString(height)); let pageHeightVar = this.createVariable("--pagedjs-height", CSSValueToString(height));
rules.push(bleedTop, bleedRight, bleedBottom, bleedLeft, pageWidthVar, pageHeightVar); rules.push(bleedTop, bleedRight, bleedBottom, bleedLeft, pageWidthVar, pageHeightVar);
} }
......
...@@ -2,6 +2,8 @@ export default ` ...@@ -2,6 +2,8 @@ export default `
:root { :root {
--pagedjs-width: 8.5in; --pagedjs-width: 8.5in;
--pagedjs-height: 11in; --pagedjs-height: 11in;
--pagedjs-pagebox-width: 8.5in;
--pagedjs-pagebox-height: 11in;
--pagedjs-margin-top: 1in; --pagedjs-margin-top: 1in;
--pagedjs-margin-right: 1in; --pagedjs-margin-right: 1in;
--pagedjs-margin-bottom: 1in; --pagedjs-margin-bottom: 1in;
...@@ -139,12 +141,12 @@ export default ` ...@@ -139,12 +141,12 @@ export default `
.pagedjs_pagebox { .pagedjs_pagebox {
box-sizing: border-box; box-sizing: border-box;
width: var(--pagedjs-width); width: var(--pagedjs-pagebox-width);
height: var(--pagedjs-height); height: var(--pagedjs-pagebox-height);
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: [left] var(--pagedjs-margin-left) [center] calc(var(--pagedjs-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right)) [right] var(--pagedjs-margin-right); grid-template-columns: [left] var(--pagedjs-margin-left) [center] calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right)) [right] var(--pagedjs-margin-right);
grid-template-rows: [header] var(--pagedjs-margin-top) [page] calc(var(--pagedjs-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)) [footer] var(--pagedjs-margin-bottom); grid-template-rows: [header] var(--pagedjs-margin-top) [page] calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)) [footer] var(--pagedjs-margin-bottom);
grid-column: sheet-center; grid-column: sheet-center;
grid-row: sheet-middle; grid-row: sheet-middle;
} }
...@@ -154,7 +156,7 @@ export default ` ...@@ -154,7 +156,7 @@ export default `
} }
.pagedjs_margin-top { .pagedjs_margin-top {
width: calc(var(--pagedjs-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right)); width: calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right));
height: var(--pagedjs-margin-top); height: var(--pagedjs-margin-top);
grid-column: center; grid-column: center;
grid-row: header; grid-row: header;
...@@ -189,7 +191,7 @@ export default ` ...@@ -189,7 +191,7 @@ export default `
} }
.pagedjs_margin-right { .pagedjs_margin-right {
height: calc(var(--pagedjs-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)); height: calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom));
width: var(--pagedjs-margin-right); width: var(--pagedjs-margin-right);
right: 0; right: 0;
grid-column: right; grid-column: right;
...@@ -200,7 +202,7 @@ export default ` ...@@ -200,7 +202,7 @@ export default `
} }
.pagedjs_margin-bottom { .pagedjs_margin-bottom {
width: calc(var(--pagedjs-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right)); width: calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right));
height: var(--pagedjs-margin-bottom); height: var(--pagedjs-margin-bottom);
grid-column: center; grid-column: center;
grid-row: footer; grid-row: footer;
...@@ -236,7 +238,7 @@ export default ` ...@@ -236,7 +238,7 @@ export default `
.pagedjs_margin-left { .pagedjs_margin-left {
height: calc(var(--pagedjs-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)); height: calc(var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom));
width: var(--pagedjs-margin-left); width: var(--pagedjs-margin-left);
grid-column: left; grid-column: left;
grid-row: page; grid-row: page;
...@@ -265,6 +267,8 @@ export default ` ...@@ -265,6 +267,8 @@ export default `
.pagedjs_page { .pagedjs_page {
counter-increment: page; counter-increment: page;
width: var(--pagedjs-width);
height: var(--pagedjs-height);
} }
.pagedjs_pages { .pagedjs_pages {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment