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

Fix pagebox variables

parent bde3b3b8
......@@ -193,7 +193,7 @@
let meta = book.metadata;
let meta = book.metadata;
var $title = document.getElementById("title");
var $author = document.getElementById("author");
......
......@@ -17,7 +17,7 @@
}
@media screen {
.pagedjs_sheet {
.pagedjs_pagebox {
box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
}
......
......@@ -544,17 +544,17 @@ class AtPage extends Handler {
}
// width variable
let wVar = this.createVariable("--pagedjs-width", widthString);
let wVar = this.createVariable("--pagedjs-pagebox-width", widthString);
list.appendData(wVar);
// height variable
let hVar = this.createVariable("--pagedjs-height", heightString);
let hVar = this.createVariable("--pagedjs-pagebox-height", heightString);
list.appendData(hVar);
let w = this.createDimension("width", width);
let h = this.createDimension("height", height);
list.appendData(w);
list.appendData(h);
// let w = this.createDimension("width", width);
// let h = this.createDimension("height", height);
// list.appendData(w);
// list.appendData(h);
}
addMarginaliaStyles(page, list, item, sheet) {
......@@ -741,8 +741,8 @@ class AtPage extends Handler {
let bleedBottom = this.createVariable("--pagedjs-bleed-bottom", CSSValueToString(bleed.bottom));
let bleedLeft = this.createVariable("--pagedjs-bleed-left", CSSValueToString(bleed.left));
let pageWidthVar = this.createVariable("--pagedjs-page-width", CSSValueToString(width));
let pageHeightVar = this.createVariable("--pagedjs-page-height", CSSValueToString(height));
let pageWidthVar = this.createVariable("--pagedjs-width", CSSValueToString(width));
let pageHeightVar = this.createVariable("--pagedjs-height", CSSValueToString(height));
rules.push(bleedTop, bleedRight, bleedBottom, bleedLeft, pageWidthVar, pageHeightVar);
}
......
......@@ -2,6 +2,8 @@ export default `
:root {
--pagedjs-width: 8.5in;
--pagedjs-height: 11in;
--pagedjs-pagebox-width: 8.5in;
--pagedjs-pagebox-height: 11in;
--pagedjs-margin-top: 1in;
--pagedjs-margin-right: 1in;
--pagedjs-margin-bottom: 1in;
......@@ -139,12 +141,12 @@ export default `
.pagedjs_pagebox {
box-sizing: border-box;
width: var(--pagedjs-width);
height: var(--pagedjs-height);
width: var(--pagedjs-pagebox-width);
height: var(--pagedjs-pagebox-height);
position: relative;
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-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-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-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)) [footer] var(--pagedjs-margin-bottom);
grid-column: sheet-center;
grid-row: sheet-middle;
}
......@@ -154,7 +156,7 @@ export default `
}
.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);
grid-column: center;
grid-row: header;
......@@ -189,7 +191,7 @@ export default `
}
.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);
right: 0;
grid-column: right;
......@@ -200,7 +202,7 @@ export default `
}
.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);
grid-column: center;
grid-row: footer;
......@@ -236,7 +238,7 @@ export default `
.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);
grid-column: left;
grid-row: page;
......@@ -265,6 +267,8 @@ export default `
.pagedjs_page {
counter-increment: page;
width: var(--pagedjs-width);
height: var(--pagedjs-height);
}
.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