mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 18:32:41 +00:00
Merge branch 'master' into updateDockerInstructions
This commit is contained in:
David Bolack
@@ -7,6 +7,11 @@ import './Anchored.less';
|
||||
// **The Anchor Positioning API is not available in Firefox yet**
|
||||
// So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly.
|
||||
|
||||
// When Anchor Positioning is added to Firefox, this can also be rewritten using the Popover API-- add the `popover` attribute
|
||||
// to the container div, which will render the container in the *top level* and give it better interactions like
|
||||
// click outside to dismiss. **Do not** add without Anchor, though, because positioning is very limited with the `popover`
|
||||
// attribute.
|
||||
|
||||
|
||||
const Anchored = ({ children })=>{
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
|
||||
require('./brewRenderer.less');
|
||||
const React = require('react');
|
||||
const { useState, useRef, useCallback, useMemo } = React;
|
||||
const { useState, useRef, useMemo, useEffect } = React;
|
||||
const _ = require('lodash');
|
||||
|
||||
const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
|
||||
@@ -36,8 +36,46 @@ const BrewPage = (props)=>{
|
||||
index : 0,
|
||||
...props
|
||||
};
|
||||
const pageRef = useRef(null);
|
||||
const cleanText = safeHTML(props.contents);
|
||||
return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
|
||||
|
||||
useEffect(()=>{
|
||||
if(!pageRef.current) return;
|
||||
|
||||
// Observer for tracking pages within the `.pages` div
|
||||
const visibleObserver = new IntersectionObserver(
|
||||
(entries)=>{
|
||||
entries.forEach((entry)=>{
|
||||
if(entry.isIntersecting)
|
||||
props.onVisibilityChange(props.index + 1, true, false); // add page to array of visible pages.
|
||||
else
|
||||
props.onVisibilityChange(props.index + 1, false, false);
|
||||
}
|
||||
)},
|
||||
{ threshold: .3, rootMargin: '0px 0px 0px 0px' } // detect when >30% of page is within bounds.
|
||||
);
|
||||
|
||||
// Observer for tracking the page at the center of the iframe.
|
||||
const centerObserver = new IntersectionObserver(
|
||||
(entries)=>{
|
||||
entries.forEach((entry)=>{
|
||||
if(entry.isIntersecting)
|
||||
props.onVisibilityChange(props.index + 1, true, true); // Set this page as the center page
|
||||
}
|
||||
)},
|
||||
{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
|
||||
);
|
||||
|
||||
// attach observers to each `.page`
|
||||
visibleObserver.observe(pageRef.current);
|
||||
centerObserver.observe(pageRef.current);
|
||||
return ()=>{
|
||||
visibleObserver.disconnect();
|
||||
centerObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div className={props.className} id={`p${props.index + 1}`} data-index={props.index} ref={pageRef} style={props.style}>
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
|
||||
</div>;
|
||||
};
|
||||
@@ -64,8 +102,10 @@ const BrewRenderer = (props)=>{
|
||||
};
|
||||
|
||||
const [state, setState] = useState({
|
||||
isMounted : false,
|
||||
visibility : 'hidden'
|
||||
isMounted : false,
|
||||
visibility : 'hidden',
|
||||
visiblePages : [],
|
||||
centerPage : 1
|
||||
});
|
||||
|
||||
const [displayOptions, setDisplayOptions] = useState({
|
||||
@@ -83,34 +123,23 @@ const BrewRenderer = (props)=>{
|
||||
rawPages = props.text.split(/^\\page$/gm);
|
||||
}
|
||||
|
||||
const scrollToHash = (hash)=>{
|
||||
if(!hash) return;
|
||||
const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{
|
||||
setState((prevState)=>{
|
||||
const updatedVisiblePages = new Set(prevState.visiblePages);
|
||||
if(!isCenter)
|
||||
isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
|
||||
|
||||
const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
|
||||
let anchor = iframeDoc.querySelector(hash);
|
||||
return {
|
||||
...prevState,
|
||||
visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b),
|
||||
centerPage : isCenter ? pageNum : prevState.centerPage
|
||||
};
|
||||
});
|
||||
|
||||
if(anchor) {
|
||||
anchor.scrollIntoView({ behavior: 'smooth' });
|
||||
} else {
|
||||
// Use MutationObserver to wait for the element if it's not immediately available
|
||||
new MutationObserver((mutations, obs)=>{
|
||||
anchor = iframeDoc.querySelector(hash);
|
||||
if(anchor) {
|
||||
anchor.scrollIntoView({ behavior: 'smooth' });
|
||||
obs.disconnect();
|
||||
}
|
||||
}).observe(iframeDoc, { childList: true, subtree: true });
|
||||
}
|
||||
if(isCenter)
|
||||
props.onPageChange(pageNum);
|
||||
};
|
||||
|
||||
const updateCurrentPage = useCallback(_.throttle((e)=>{
|
||||
const { scrollTop, clientHeight, scrollHeight } = e.target;
|
||||
const totalScrollableHeight = scrollHeight - clientHeight;
|
||||
const currentPageNumber = Math.max(Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length), 1);
|
||||
|
||||
props.onPageChange(currentPageNumber);
|
||||
}, 200), []);
|
||||
|
||||
const isInView = (index)=>{
|
||||
if(!state.isMounted)
|
||||
return false;
|
||||
@@ -137,19 +166,21 @@ const BrewRenderer = (props)=>{
|
||||
};
|
||||
|
||||
const renderPage = (pageText, index)=>{
|
||||
|
||||
const styles = {
|
||||
...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
|
||||
// Add more conditions as needed
|
||||
};
|
||||
|
||||
if(props.renderer == 'legacy') {
|
||||
const html = MarkdownLegacy.render(pageText);
|
||||
return <BrewPage className='page phb' index={index} key={index} contents={html} />;
|
||||
|
||||
return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
|
||||
} else {
|
||||
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
const html = Markdown.render(pageText, index);
|
||||
|
||||
const styles = {
|
||||
...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
|
||||
// Add more conditions as needed
|
||||
};
|
||||
|
||||
return <BrewPage className='page' index={index} key={index} contents={html} style={styles} />;
|
||||
return <BrewPage className='page' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -182,6 +213,26 @@ const BrewRenderer = (props)=>{
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToHash = (hash)=>{
|
||||
if(!hash) return;
|
||||
|
||||
const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
|
||||
let anchor = iframeDoc.querySelector(hash);
|
||||
|
||||
if(anchor) {
|
||||
anchor.scrollIntoView({ behavior: 'smooth' });
|
||||
} else {
|
||||
// Use MutationObserver to wait for the element if it's not immediately available
|
||||
new MutationObserver((mutations, obs)=>{
|
||||
anchor = iframeDoc.querySelector(hash);
|
||||
if(anchor) {
|
||||
anchor.scrollIntoView({ behavior: 'smooth' });
|
||||
obs.disconnect();
|
||||
}
|
||||
}).observe(iframeDoc, { childList: true, subtree: true });
|
||||
}
|
||||
};
|
||||
|
||||
const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount"
|
||||
scrollToHash(window.location.hash);
|
||||
|
||||
@@ -217,13 +268,13 @@ const BrewRenderer = (props)=>{
|
||||
}
|
||||
|
||||
const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
|
||||
renderedPages = useMemo(()=>renderPages(), [displayOptions.pageShadows, props.text]);
|
||||
renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/*render dummy page while iFrame is mounting.*/}
|
||||
{!state.isMounted
|
||||
? <div className='brewRenderer' onScroll={updateCurrentPage}>
|
||||
? <div className='brewRenderer'>
|
||||
<div className='pages'>
|
||||
{renderDummyPage(1)}
|
||||
</div>
|
||||
@@ -236,7 +287,7 @@ const BrewRenderer = (props)=>{
|
||||
<NotificationPopup />
|
||||
</div>
|
||||
|
||||
<ToolBar displayOptions={displayOptions} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onDisplayOptionsChange={handleDisplayOptionsChange} />
|
||||
<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length}/>
|
||||
|
||||
{/*render in iFrame so broken code doesn't crash the site.*/}
|
||||
<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
|
||||
@@ -245,18 +296,17 @@ const BrewRenderer = (props)=>{
|
||||
onClick={()=>{emitClick();}}
|
||||
>
|
||||
<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
|
||||
onScroll={updateCurrentPage}
|
||||
onKeyDown={handleControlKeys}
|
||||
tabIndex={-1}
|
||||
style={ styleObject }>
|
||||
style={ styleObject }
|
||||
>
|
||||
|
||||
{/* Apply CSS from Style tab and render pages from Markdown tab */}
|
||||
{state.isMounted
|
||||
&&
|
||||
<>
|
||||
{renderedStyle}
|
||||
<div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
|
||||
`pages ${displayOptions.startOnRight ? 'recto' : 'verso'} ${displayOptions.spread}` } >
|
||||
<div className={`pages ${displayOptions.startOnRight ? 'recto' : 'verso'} ${displayOptions.spread}`} lang={`${props.lang || 'en'}`} style={pagesStyle}>
|
||||
{renderedPages}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(3, auto);
|
||||
gap: 10px 10px;
|
||||
justify-content: center;
|
||||
justify-content: safe center;
|
||||
&.recto .page:first-child {
|
||||
// sets first page on 'right' ('recto') of the preview, as if for a Cover page.
|
||||
// todo: add a checkbox to toggle this setting
|
||||
@@ -33,7 +33,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
justify-content: safe center;
|
||||
& :where(.page) {
|
||||
flex: 0 0 auto;
|
||||
margin-left: unset !important;
|
||||
|
||||
@@ -1,29 +1,30 @@
|
||||
/* eslint-disable max-lines */
|
||||
require('./toolBar.less');
|
||||
const React = require('react');
|
||||
const { useState, useEffect } = React;
|
||||
const _ = require('lodash');
|
||||
|
||||
import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
|
||||
// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
|
||||
|
||||
const MAX_ZOOM = 300;
|
||||
const MIN_ZOOM = 10;
|
||||
|
||||
const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{
|
||||
const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages })=>{
|
||||
|
||||
const [pageNum, setPageNum] = useState(currentPage);
|
||||
const [pageNum, setPageNum] = useState(1);
|
||||
const [toolsVisible, setToolsVisible] = useState(true);
|
||||
|
||||
useEffect(()=>{
|
||||
setPageNum(currentPage);
|
||||
}, [currentPage]);
|
||||
// format multiple visible pages as a range (e.g. "150-153")
|
||||
const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`;
|
||||
setPageNum(pageRange);
|
||||
}, [visiblePages]);
|
||||
|
||||
const handleZoomButton = (zoom)=>{
|
||||
handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
|
||||
};
|
||||
|
||||
const handleOptionChange = (optionKey, newValue)=>{
|
||||
//setDisplayOptions(prevOptions => ({ ...prevOptions, [optionKey]: newValue }));
|
||||
onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
|
||||
};
|
||||
|
||||
@@ -32,16 +33,16 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
|
||||
setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
|
||||
};
|
||||
|
||||
// scroll to a page, used in the Prev/Next Page buttons.
|
||||
const scrollToPage = (pageNumber)=>{
|
||||
if(typeof pageNumber !== 'number') return;
|
||||
pageNumber = _.clamp(pageNumber, 1, totalPages);
|
||||
const iframe = document.getElementById('BrewRenderer');
|
||||
const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
|
||||
const page = brewRenderer?.querySelector(`#p${pageNumber}`);
|
||||
page?.scrollIntoView({ block: 'start' });
|
||||
setPageNum(pageNumber);
|
||||
};
|
||||
|
||||
|
||||
const calculateChange = (mode)=>{
|
||||
const iframe = document.getElementById('BrewRenderer');
|
||||
const iframeWidth = iframe.getBoundingClientRect().width;
|
||||
@@ -57,8 +58,12 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
|
||||
desiredZoom = (iframeWidth / widestPage) * 100;
|
||||
|
||||
} else if(mode == 'fit'){
|
||||
let minDimRatio;
|
||||
// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
|
||||
const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
|
||||
if(displayOptions.spread === 'facing')
|
||||
minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity); // if 'facing' spread, fit two pages in view
|
||||
else
|
||||
minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
|
||||
|
||||
desiredZoom = minDimRatio * 100;
|
||||
}
|
||||
@@ -185,8 +190,8 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
|
||||
className='previousPage tool'
|
||||
type='button'
|
||||
title='Previous Page(s)'
|
||||
onClick={()=>scrollToPage(pageNum - 1)}
|
||||
disabled={pageNum <= 1}
|
||||
onClick={()=>scrollToPage(_.min(visiblePages) - visiblePages.length)}
|
||||
disabled={visiblePages.includes(1)}
|
||||
>
|
||||
<i className='fas fa-arrow-left'></i>
|
||||
</button>
|
||||
@@ -205,6 +210,7 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
|
||||
onChange={(e)=>handlePageInput(e.target.value)}
|
||||
onBlur={()=>scrollToPage(pageNum)}
|
||||
onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
|
||||
style={{ width: `${pageNum.length}ch` }}
|
||||
/>
|
||||
<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
|
||||
</div>
|
||||
@@ -214,8 +220,8 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
|
||||
className='tool'
|
||||
type='button'
|
||||
title='Next Page(s)'
|
||||
onClick={()=>scrollToPage(pageNum + 1)}
|
||||
disabled={pageNum >= totalPages}
|
||||
onClick={()=>scrollToPage(_.max(visiblePages) + 1)}
|
||||
disabled={visiblePages.includes(totalPages)}
|
||||
>
|
||||
<i className='fas fa-arrow-right'></i>
|
||||
</button>
|
||||
|
||||
@@ -104,9 +104,9 @@
|
||||
height : 1.5em;
|
||||
padding : 2px 5px;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
color : #000000;
|
||||
background : #EEEEEE;
|
||||
border : 1px solid gray;
|
||||
color : inherit;
|
||||
background : #3B3B3B;
|
||||
border : none;
|
||||
&:focus { outline : 1px solid #D3D3D3; }
|
||||
|
||||
// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
|
||||
&#page-input {
|
||||
width : 4ch;
|
||||
min-width : 5ch;
|
||||
margin-right : 1ch;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
//╔===--------------- Polyfills --------------===╗//
|
||||
import 'core-js/es/string/to-well-formed.js';
|
||||
//╚===--------------- ---------------===╝//
|
||||
|
||||
require('./homebrew.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
require('./brewItem.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const { useCallback } = React;
|
||||
const moment = require('moment');
|
||||
import request from '../../../../utils/request-middleware.js';
|
||||
|
||||
@@ -8,176 +8,172 @@ const googleDriveIcon = require('../../../../googleDrive.svg');
|
||||
const homebreweryIcon = require('../../../../thumbnail.png');
|
||||
const dedent = require('dedent-tabs').default;
|
||||
|
||||
const BrewItem = createClass({
|
||||
displayName : 'BrewItem',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
brew : {
|
||||
title : '',
|
||||
description : '',
|
||||
authors : [],
|
||||
stubbed : true
|
||||
},
|
||||
updateListFilter : ()=>{},
|
||||
reportError : ()=>{},
|
||||
renderStorage : true
|
||||
};
|
||||
const BrewItem = ({
|
||||
brew = {
|
||||
title : '',
|
||||
description : '',
|
||||
authors : [],
|
||||
stubbed : true,
|
||||
},
|
||||
updateListFilter = ()=>{},
|
||||
reportError = ()=>{},
|
||||
renderStorage = true,
|
||||
})=>{
|
||||
|
||||
deleteBrew : function(){
|
||||
if(this.props.brew.authors.length <= 1){
|
||||
if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
|
||||
if(!confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
|
||||
const deleteBrew = useCallback(()=>{
|
||||
if(brew.authors.length <= 1) {
|
||||
if(!window.confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
|
||||
if(!window.confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
|
||||
} else {
|
||||
if(!confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
|
||||
if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
|
||||
if(!window.confirm('Are you sure you want to remove this brew from your collection? This will remove you as an editor, but other owners will still be able to access the document.')) return;
|
||||
if(!window.confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
|
||||
}
|
||||
|
||||
request.delete(`/api/${this.props.brew.googleId ?? ''}${this.props.brew.editId}`)
|
||||
.send()
|
||||
.end((err, res)=>{
|
||||
if(err) {
|
||||
this.props.reportError(err);
|
||||
} else {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
},
|
||||
request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
|
||||
if (err) reportError(err); else window.location.reload();
|
||||
});
|
||||
}, [brew, reportError]);
|
||||
|
||||
updateFilter : function(type, term){
|
||||
this.props.updateListFilter(type, term);
|
||||
},
|
||||
const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]);
|
||||
|
||||
renderDeleteBrewLink : function(){
|
||||
if(!this.props.brew.editId) return;
|
||||
const renderDeleteBrewLink = ()=>{
|
||||
if(!brew.editId) return null;
|
||||
|
||||
return <a className='deleteLink' onClick={this.deleteBrew}>
|
||||
<i className='fas fa-trash-alt' title='Delete' />
|
||||
</a>;
|
||||
},
|
||||
return (
|
||||
<a className='deleteLink' onClick={deleteBrew}>
|
||||
<i className='fas fa-trash-alt' title='Delete' />
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
renderEditLink : function(){
|
||||
if(!this.props.brew.editId) return;
|
||||
const renderEditLink = ()=>{
|
||||
if(!brew.editId) return null;
|
||||
|
||||
let editLink = this.props.brew.editId;
|
||||
if(this.props.brew.googleId && !this.props.brew.stubbed) {
|
||||
editLink = this.props.brew.googleId + editLink;
|
||||
let editLink = brew.editId;
|
||||
if(brew.googleId && !brew.stubbed) editLink = brew.googleId + editLink;
|
||||
|
||||
return (
|
||||
<a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
|
||||
<i className='fas fa-pencil-alt' title='Edit' />
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
const renderShareLink = ()=>{
|
||||
if(!brew.shareId) return null;
|
||||
|
||||
let shareLink = brew.shareId;
|
||||
if(brew.googleId && !brew.stubbed) {
|
||||
shareLink = brew.googleId + shareLink;
|
||||
}
|
||||
|
||||
return <a className='editLink' href={`/edit/${editLink}`} target='_blank' rel='noopener noreferrer'>
|
||||
<i className='fas fa-pencil-alt' title='Edit' />
|
||||
</a>;
|
||||
},
|
||||
return (
|
||||
<a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
|
||||
<i className='fas fa-share-alt' title='Share' />
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
renderShareLink : function(){
|
||||
if(!this.props.brew.shareId) return;
|
||||
const renderDownloadLink = ()=>{
|
||||
if(!brew.shareId) return null;
|
||||
|
||||
let shareLink = this.props.brew.shareId;
|
||||
if(this.props.brew.googleId && !this.props.brew.stubbed) {
|
||||
shareLink = this.props.brew.googleId + shareLink;
|
||||
let shareLink = brew.shareId;
|
||||
if(brew.googleId && !brew.stubbed) {
|
||||
shareLink = brew.googleId + shareLink;
|
||||
}
|
||||
|
||||
return <a className='shareLink' href={`/share/${shareLink}`} target='_blank' rel='noopener noreferrer'>
|
||||
<i className='fas fa-share-alt' title='Share' />
|
||||
</a>;
|
||||
},
|
||||
return (
|
||||
<a className='downloadLink' href={`/download/${shareLink}`}>
|
||||
<i className='fas fa-download' title='Download' />
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
renderDownloadLink : function(){
|
||||
if(!this.props.brew.shareId) return;
|
||||
|
||||
let shareLink = this.props.brew.shareId;
|
||||
if(this.props.brew.googleId && !this.props.brew.stubbed) {
|
||||
shareLink = this.props.brew.googleId + shareLink;
|
||||
const renderStorageIcon = ()=>{
|
||||
if(!renderStorage) return null;
|
||||
if(brew.googleId) {
|
||||
return (
|
||||
<span title={brew.webViewLink ? 'Your Google Drive Storage' : 'Another User\'s Google Drive Storage'}>
|
||||
<a href={brew.webViewLink} target='_blank'>
|
||||
<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <a className='downloadLink' href={`/download/${shareLink}`}>
|
||||
<i className='fas fa-download' title='Download' />
|
||||
</a>;
|
||||
},
|
||||
return (
|
||||
<span title='Homebrewery Storage'>
|
||||
<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
renderStorageIcon : function(){
|
||||
if(!this.props.renderStorage) return;
|
||||
if(this.props.brew.googleId) {
|
||||
return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
|
||||
<a href={this.props.brew.webViewLink} target='_blank'>
|
||||
<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
|
||||
</a>
|
||||
</span>;
|
||||
}
|
||||
if(Array.isArray(brew.tags)) {
|
||||
brew.tags = brew.tags?.filter((tag)=>tag); // remove tags that are empty strings
|
||||
brew.tags.sort((a, b)=>{
|
||||
return a.indexOf(':') - b.indexOf(':') !== 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
return <span title='Homebrewery Storage'>
|
||||
<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
|
||||
</span>;
|
||||
},
|
||||
const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
|
||||
|
||||
render : function(){
|
||||
const brew = this.props.brew;
|
||||
if(Array.isArray(brew.tags)) { // temporary fix until dud tags are cleaned
|
||||
brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
|
||||
brew.tags.sort((a, b)=>{
|
||||
return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
});
|
||||
}
|
||||
const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
|
||||
|
||||
return <div className='brewItem'>
|
||||
{brew.thumbnail &&
|
||||
<div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }} >
|
||||
</div>
|
||||
}
|
||||
return (
|
||||
<div className='brewItem'>
|
||||
{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
|
||||
<div className='text'>
|
||||
<h2>{brew.title}</h2>
|
||||
<p className='description'>{brew.description}</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div className='info'>
|
||||
|
||||
{brew.tags?.length ? <>
|
||||
{brew.tags?.length ? (
|
||||
<div className='brewTags' title={`${brew.tags.length} tags:\n${brew.tags.join('\n')}`}>
|
||||
<i className='fas fa-tags'/>
|
||||
<i className='fas fa-tags' />
|
||||
{brew.tags.map((tag, idx)=>{
|
||||
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
|
||||
return <span key={idx} className={matches[1]} onClick={()=>{this.updateFilter(tag);}}>{matches[2]}</span>;
|
||||
return <span key={idx} className={matches[1]} onClick={()=>updateFilter(tag)}>{matches[2]}</span>;
|
||||
})}
|
||||
</div>
|
||||
</> : <></>
|
||||
}
|
||||
) : null}
|
||||
<span title={`Authors:\n${brew.authors?.join('\n')}`}>
|
||||
<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
|
||||
<i className='fas fa-user' />{' '}
|
||||
{brew.authors?.map((author, index)=>(
|
||||
<React.Fragment key={index}>
|
||||
{author === 'hidden'
|
||||
? <span title="Username contained an email address; hidden to protect user's privacy">{author}</span>
|
||||
: <a href={`/user/${author}`}>{author}</a>
|
||||
}
|
||||
{author === 'hidden' ? (
|
||||
<span title="Username contained an email address; hidden to protect user's privacy">
|
||||
{author}
|
||||
</span>
|
||||
) : (<a href={`/user/${author}`}>{author}</a>)}
|
||||
{index < brew.authors.length - 1 && ', '}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</span>
|
||||
<br />
|
||||
<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
|
||||
<i className='fas fa-eye'/> {brew.views}
|
||||
<i className='fas fa-eye' /> {brew.views}
|
||||
</span>
|
||||
{brew.pageCount &&
|
||||
{brew.pageCount && (
|
||||
<span title={`Page count: ${brew.pageCount}`}>
|
||||
<i className='far fa-file' /> {brew.pageCount}
|
||||
</span>
|
||||
}
|
||||
<span title={dedent`
|
||||
Created: ${moment(brew.createdAt).local().format(dateFormatString)}
|
||||
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
|
||||
)}
|
||||
<span
|
||||
title={dedent` Created: ${moment(brew.createdAt).local().format(dateFormatString)}
|
||||
Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}
|
||||
>
|
||||
<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
|
||||
</span>
|
||||
{this.renderStorageIcon()}
|
||||
{renderStorageIcon()}
|
||||
</div>
|
||||
|
||||
<div className='links'>
|
||||
{this.renderShareLink()}
|
||||
{this.renderEditLink()}
|
||||
{this.renderDownloadLink()}
|
||||
{this.renderDeleteBrewLink()}
|
||||
{renderShareLink()}
|
||||
{renderEditLink()}
|
||||
{renderDownloadLink()}
|
||||
{renderDeleteBrewLink()}
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = BrewItem;
|
||||
|
||||
@@ -18,7 +18,18 @@ const errorIndex = (props)=>{
|
||||
'01' : dedent`
|
||||
## An error occurred while retrieving this brew from Google Drive!
|
||||
|
||||
Google reported an error while attempting to retrieve a brew from this link.`,
|
||||
Google is able to see the brew at this link, but reported an error while attempting to retrieve it.
|
||||
|
||||
### Refreshing your Google Credentials
|
||||
|
||||
This issue is likely caused by an issue with your Google credentials; if you are the owner of this file, the following steps may resolve the issue:
|
||||
|
||||
- Go to https://www.naturalcrit.com/login and click logout if present (in small text at the bottom of the page).
|
||||
- Click "Sign In with Google", which will refresh your Google credentials.
|
||||
- After completing the sign in process, return to Homebrewery and refresh/reload the page so that it can pick up the updated credentials.
|
||||
- If this was the source of the issue, it should now be resolved.
|
||||
|
||||
If following these steps does not resolve the issue, please let us know!`,
|
||||
|
||||
// Google Drive - 404 : brew deleted or access denied
|
||||
'02' : dedent`
|
||||
@@ -50,7 +61,7 @@ const errorIndex = (props)=>{
|
||||
- **The Google Account may be closed.** Google may have removed the account
|
||||
due to inactivity or violating a Google policy. Make sure the owner can
|
||||
still access Google Drive normally and upload/download files to it.
|
||||
:
|
||||
|
||||
If the file isn't found, Google Drive usually puts your file in your Trash folder for
|
||||
30 days. Assuming the trash hasn't been emptied yet, it might be worth checking.
|
||||
You can also find the Activity tab on the right side of the Google Drive page, which
|
||||
@@ -172,8 +183,8 @@ const errorIndex = (props)=>{
|
||||
|
||||
**Brew Title:** ${props.brew.brewTitle}`,
|
||||
|
||||
// ####### Admin page error #######
|
||||
'52': dedent`
|
||||
// ####### Admin page error #######
|
||||
'52' : dedent`
|
||||
## Access Denied
|
||||
You need to provide correct administrator credentials to access this page.`,
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
require('./sharePage.less');
|
||||
const React = require('react');
|
||||
const createClass = require('create-react-class');
|
||||
const { useState, useEffect, useCallback } = React;
|
||||
const { Meta } = require('vitreum/headtags');
|
||||
|
||||
const Nav = require('naturalcrit/nav/nav.jsx');
|
||||
@@ -8,130 +8,118 @@ const Navbar = require('../../navbar/navbar.jsx');
|
||||
const MetadataNav = require('../../navbar/metadata.navitem.jsx');
|
||||
const PrintNavItem = require('../../navbar/print.navitem.jsx');
|
||||
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
|
||||
const VaultNavItem = require('../../navbar/vault.navitem.jsx');
|
||||
const Account = require('../../navbar/account.navitem.jsx');
|
||||
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
|
||||
|
||||
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
|
||||
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
|
||||
|
||||
const SharePage = createClass({
|
||||
displayName : 'SharePage',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
brew : DEFAULT_BREW_LOAD,
|
||||
disableMeta : false
|
||||
};
|
||||
},
|
||||
const SharePage = (props)=>{
|
||||
const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
themeBundle : {},
|
||||
currentBrewRendererPageNum : 1
|
||||
};
|
||||
},
|
||||
const [state, setState] = useState({
|
||||
themeBundle : {},
|
||||
currentBrewRendererPageNum : 1,
|
||||
});
|
||||
|
||||
componentDidMount : function() {
|
||||
document.addEventListener('keydown', this.handleControlKeys);
|
||||
const handleBrewRendererPageChange = useCallback((pageNumber)=>{
|
||||
updateState({ currentBrewRendererPageNum: pageNumber });
|
||||
}, []);
|
||||
|
||||
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
|
||||
},
|
||||
|
||||
componentWillUnmount : function() {
|
||||
document.removeEventListener('keydown', this.handleControlKeys);
|
||||
},
|
||||
|
||||
handleBrewRendererPageChange : function(pageNumber){
|
||||
this.setState({ currentBrewRendererPageNum: pageNumber });
|
||||
},
|
||||
|
||||
handleControlKeys : function(e){
|
||||
const handleControlKeys = (e)=>{
|
||||
if(!(e.ctrlKey || e.metaKey)) return;
|
||||
const P_KEY = 80;
|
||||
if(e.keyCode == P_KEY){
|
||||
if(e.keyCode == P_KEY) printCurrentBrew();
|
||||
if(e.keyCode === P_KEY) {
|
||||
printCurrentBrew();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
processShareId : function() {
|
||||
return this.props.brew.googleId && !this.props.brew.stubbed ?
|
||||
this.props.brew.googleId + this.props.brew.shareId :
|
||||
this.props.brew.shareId;
|
||||
},
|
||||
useEffect(()=>{
|
||||
document.addEventListener('keydown', handleControlKeys);
|
||||
fetchThemeBundle(
|
||||
{ setState },
|
||||
brew.renderer,
|
||||
brew.theme
|
||||
);
|
||||
|
||||
renderEditLink : function(){
|
||||
if(!this.props.brew.editId) return;
|
||||
return ()=>{
|
||||
document.removeEventListener('keydown', handleControlKeys);
|
||||
};
|
||||
}, []);
|
||||
|
||||
let editLink = this.props.brew.editId;
|
||||
if(this.props.brew.googleId && !this.props.brew.stubbed) {
|
||||
editLink = this.props.brew.googleId + editLink;
|
||||
}
|
||||
const processShareId = ()=>{
|
||||
return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
|
||||
};
|
||||
|
||||
return <Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
|
||||
edit
|
||||
</Nav.item>;
|
||||
},
|
||||
const renderEditLink = ()=>{
|
||||
if(!brew.editId) return null;
|
||||
|
||||
render : function(){
|
||||
const titleStyle = this.props.disableMeta ? { cursor: 'default' } : {};
|
||||
const titleEl = <Nav.item className='brewTitle' style={titleStyle}>{this.props.brew.title}</Nav.item>;
|
||||
const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
|
||||
|
||||
return <div className='sharePage sitePage'>
|
||||
return (
|
||||
<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
|
||||
edit
|
||||
</Nav.item>
|
||||
);
|
||||
};
|
||||
|
||||
const titleEl = (
|
||||
<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
|
||||
{brew.title}
|
||||
</Nav.item>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='sharePage sitePage'>
|
||||
<Meta name='robots' content='noindex, nofollow' />
|
||||
<Navbar>
|
||||
<Nav.section className='titleSection'>
|
||||
{
|
||||
this.props.disableMeta ?
|
||||
titleEl
|
||||
:
|
||||
<MetadataNav brew={this.props.brew}>
|
||||
{titleEl}
|
||||
</MetadataNav>
|
||||
}
|
||||
{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
|
||||
</Nav.section>
|
||||
|
||||
<Nav.section>
|
||||
{this.props.brew.shareId && <>
|
||||
<PrintNavItem/>
|
||||
<Nav.dropdown>
|
||||
<Nav.item color='red' icon='fas fa-code'>
|
||||
source
|
||||
</Nav.item>
|
||||
<Nav.item color='blue' icon='fas fa-eye' href={`/source/${this.processShareId()}`}>
|
||||
view
|
||||
</Nav.item>
|
||||
{this.renderEditLink()}
|
||||
<Nav.item color='blue' icon='fas fa-download' href={`/download/${this.processShareId()}`}>
|
||||
download
|
||||
</Nav.item>
|
||||
<Nav.item color='blue' icon='fas fa-clone' href={`/new/${this.processShareId()}`}>
|
||||
clone to new
|
||||
</Nav.item>
|
||||
</Nav.dropdown>
|
||||
</>}
|
||||
<VaultNavItem/>
|
||||
<RecentNavItem brew={this.props.brew} storageKey='view' />
|
||||
{brew.shareId && (
|
||||
<>
|
||||
<PrintNavItem />
|
||||
<Nav.dropdown>
|
||||
<Nav.item color='red' icon='fas fa-code'>
|
||||
source
|
||||
</Nav.item>
|
||||
<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
|
||||
view
|
||||
</Nav.item>
|
||||
{renderEditLink()}
|
||||
<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
|
||||
download
|
||||
</Nav.item>
|
||||
<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
|
||||
clone to new
|
||||
</Nav.item>
|
||||
</Nav.dropdown>
|
||||
</>
|
||||
)}
|
||||
<RecentNavItem brew={brew} storageKey='view' />
|
||||
<Account />
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
|
||||
<div className='content'>
|
||||
<BrewRenderer
|
||||
text={this.props.brew.text}
|
||||
style={this.props.brew.style}
|
||||
lang={this.props.brew.lang}
|
||||
renderer={this.props.brew.renderer}
|
||||
theme={this.props.brew.theme}
|
||||
themeBundle={this.state.themeBundle}
|
||||
onPageChange={this.handleBrewRendererPageChange}
|
||||
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
|
||||
text={brew.text}
|
||||
style={brew.style}
|
||||
lang={brew.lang}
|
||||
renderer={brew.renderer}
|
||||
theme={brew.theme}
|
||||
themeBundle={state.themeBundle}
|
||||
onPageChange={handleBrewRendererPageChange}
|
||||
currentBrewRendererPageNum={state.currentBrewRendererPageNum}
|
||||
allowPrint={true}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = SharePage;
|
||||
|
||||
904
package-lock.json
generated
904
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -93,6 +93,7 @@
|
||||
"classnames": "^2.5.1",
|
||||
"codemirror": "^5.65.6",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"core-js": "^3.39.0",
|
||||
"cors": "^2.8.5",
|
||||
"create-react-class": "^15.7.0",
|
||||
"dedent-tabs": "^0.10.3",
|
||||
@@ -120,7 +121,7 @@
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-frame-component": "^4.1.3",
|
||||
"react-router": "^7.0.2",
|
||||
"react-router": "^7.1.1",
|
||||
"sanitize-filename": "1.6.3",
|
||||
"superagent": "^10.1.1",
|
||||
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
|
||||
@@ -130,7 +131,7 @@
|
||||
"babel-plugin-transform-import-meta": "^2.2.1",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-jest": "^28.10.0",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react": "^7.37.3",
|
||||
"globals": "^15.14.0",
|
||||
"jest": "^29.7.0",
|
||||
"jest-expect-message": "^1.1.3",
|
||||
|
||||
@@ -7,11 +7,12 @@ const { pack, watchFile, livereload } = vitreum;
|
||||
import lessTransform from 'vitreum/transforms/less.js';
|
||||
import assetTransform from 'vitreum/transforms/asset.js';
|
||||
import babel from '@babel/core';
|
||||
import babelConfig from '../babel.config.json' with { type : 'json' };
|
||||
import less from 'less';
|
||||
|
||||
const isDev = !!process.argv.find((arg) => arg === '--dev');
|
||||
|
||||
const babelify = async (code)=>(await babel.transformAsync(code, { presets: [['@babel/preset-env', { 'exclude': ['proposal-dynamic-import'] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;
|
||||
const babelify = async (code)=>(await babel.transformAsync(code, babelConfig)).code;
|
||||
|
||||
const transforms = {
|
||||
'.js' : (code, filename, opts)=>babelify(code),
|
||||
|
||||
@@ -42,23 +42,25 @@ body {
|
||||
}
|
||||
.phb, .page{
|
||||
.useColumns();
|
||||
counter-increment : phb-page-numbers;
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
overflow : hidden;
|
||||
height : 279.4mm;
|
||||
width : 215.9mm;
|
||||
padding : 1.0cm 1.7cm;
|
||||
padding-bottom : 1.5cm;
|
||||
background-color : @background;
|
||||
background-image : @backgroundImage;
|
||||
font-family : BookSanity;
|
||||
font-size : 0.317cm;
|
||||
text-rendering : optimizeLegibility;
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
contain : size;
|
||||
counter-increment : phb-page-numbers;
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
overflow : hidden;
|
||||
height : 279.4mm;
|
||||
width : 215.9mm;
|
||||
padding : 1.0cm 1.7cm;
|
||||
padding-bottom : 1.5cm;
|
||||
background-color : @background;
|
||||
background-image : @backgroundImage;
|
||||
font-family : BookSanity;
|
||||
font-size : 0.317cm;
|
||||
text-rendering : optimizeLegibility;
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
contain : strict;
|
||||
content-visibility : auto;
|
||||
contain-intrinsic-size : auto none;
|
||||
}
|
||||
|
||||
.phb{
|
||||
|
||||
@@ -45,19 +45,21 @@ body { counter-reset : page-numbers 0; }
|
||||
}
|
||||
.page {
|
||||
.useColumns();
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
padding : 1.4cm 1.9cm 1.7cm;
|
||||
overflow : hidden;
|
||||
background-color : var(--HB_Color_Background);
|
||||
text-rendering : optimizeLegibility;
|
||||
contain : size;
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
padding : 1.4cm 1.9cm 1.7cm;
|
||||
overflow : hidden;
|
||||
background-color : var(--HB_Color_Background);
|
||||
text-rendering : optimizeLegibility;
|
||||
contain : strict;
|
||||
content-visibility : auto;
|
||||
contain-intrinsic-size : auto none;
|
||||
}
|
||||
//*****************************
|
||||
// * BASE
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page {
|
||||
p {
|
||||
|
||||
Reference in New Issue
Block a user