Bookhoard/foliate-js
1
0
Fork 0
mirror of https://github.com/john-okeefe/foliate-js.git synced 2026-09-09 11:29:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Reduce header/footer styling in paginator

Browse Source 
Leave the alignment, font, and color to the reader
This commit is contained in:
John Factotum
2023-03-28 04:52:03 +08:00
parent 5a0c4801cf
commit 6f29a12426
1 changed files with 2 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paginator.js
+2 -7
View File
@@ -135,10 +135,10 @@ const makeMarginals = length => Array.from({ length }, () => {
Object.assign(div.style, { Object.assign(div.style, {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
minWidth: '0', minWidth: '0',
}) })
Object.assign(child.style, { Object.assign(child.style, {
flex: '1',
overflow: 'hidden', overflow: 'hidden',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
@@ -394,8 +394,6 @@ export class Paginator {
const marginalStyle = { const marginalStyle = {
position: 'absolute', left: '0', right: '0', position: 'absolute', left: '0', right: '0',
display: 'grid', display: 'grid',
fontFamily: 'system-ui',
opacity: '.5',
} }
Object.assign(this.#header.style, marginalStyle) Object.assign(this.#header.style, marginalStyle)
Object.assign(this.#footer.style, marginalStyle) Object.assign(this.#footer.style, marginalStyle)
@@ -453,14 +451,11 @@ export class Paginator {
this.#element.style.padding = `${paddingV} ${paddingH}` this.#element.style.padding = `${paddingV} ${paddingH}`
this.#container.style.overflow ='hidden' this.#container.style.overflow ='hidden'
const marginalHeight = `${margin * .85}px`
const marginalStyle = { const marginalStyle = {
height: marginalHeight, height: `${margin}px`,
gridTemplateColumns: `repeat(${divisor}, 1fr)`, gridTemplateColumns: `repeat(${divisor}, 1fr)`,
gap: `${gap}px`, gap: `${gap}px`,
padding: `0 ${gap / 2}px`, padding: `0 ${gap / 2}px`,
fontSize: `min(.75em, ${marginalHeight})`,
lineHeight: marginalHeight,
} }
Object.assign(this.#header.style, marginalStyle, { top: `-${paddingV}` }) Object.assign(this.#header.style, marginalStyle, { top: `-${paddingV}` })
Object.assign(this.#footer.style, marginalStyle, { bottom: `-${paddingV}` }) Object.assign(this.#footer.style, marginalStyle, { bottom: `-${paddingV}` })