f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-04 14:42:40 +00:00
Code Wiki Activity

linting

Browse Source
This commit is contained in:
Gazook89
2024-11-04 14:08:06 -06:00
parent 1be1b3b747
commit b098d28407
4 changed files with 60 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/Anchored.jsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children
import './Anchored.less'; import './Anchored.less';
// Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component. // Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component.
// AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and // AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and
// then passed down through props into AnchoredBox. The `id` is used for the CSS Anchor Positioning properties. // then passed down through props into AnchoredBox. The `id` is used for the CSS Anchor Positioning properties.
// **The Anchor Positioning API is not available in Firefox yet** // **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. // So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly.

8
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -64,8 +64,8 @@ const BrewRenderer = (props)=>{
}; };
const [state, setState] = useState({ const [state, setState] = useState({
isMounted : false, isMounted : false,
visibility : 'hidden' visibility : 'hidden'
}); });
const [displayOptions, setDisplayOptions] = useState({ const [displayOptions, setDisplayOptions] = useState({
@@ -128,7 +128,7 @@ const BrewRenderer = (props)=>{
...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {}) ...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
// Add more conditions as needed // 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} />;
} }
}; };
@@ -230,7 +230,7 @@ const BrewRenderer = (props)=>{
<> <>
{renderStyle()} {renderStyle()}
<div lang={`${props.lang || 'en'}`} style={pagesStyle} className={ <div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
`pages ${displayOptions.startOnRight ? 'recto' : 'verso'} ${displayOptions.spread }` } > `pages ${displayOptions.startOnRight ? 'recto' : 'verso'} ${displayOptions.spread}` } >
{renderPages()} {renderPages()}
</div> </div>
</> </>

8
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -159,20 +159,20 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
<h1>Options</h1> <h1>Options</h1>
<label title='Modify the horizontal space between pages.'> <label title='Modify the horizontal space between pages.'>
Column gap Column gap
<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value )} /> <input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
</label> </label>
<label title='Modify the vertical space between rows of pages.'> <label title='Modify the vertical space between rows of pages.'>
Row gap Row gap
<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value )} /> <input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
</label> </label>
<label title='Start 1st page on the right side, such as if you have cover page.'> <label title='Start 1st page on the right side, such as if you have cover page.'>
Start on right Start on right
<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight)}} <input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} /> title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
</label> </label>
<label title='Toggle the page shadow on every page.'> <label title='Toggle the page shadow on every page.'>
Page shadows Page shadows
<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows)}} /> <input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
</label> </label>
</AnchoredBox> </AnchoredBox>
</Anchored> </Anchored>

112
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -16,8 +16,8 @@
color : #CCCCCC; color : #CCCCCC;
background-color : #555555; background-color : #555555;
& > *:not(.toggleButton) { & > *:not(.toggleButton) {
opacity: 1; opacity : 1;
transition: all .2s ease; transition : all 0.2s ease;
} }
.group { .group {
@@ -34,14 +34,10 @@
align-items : center; align-items : center;
} }
.active, [aria-checked=true] { .active, [aria-checked='true'] { background-color : #444444; }
background-color: #444;
}
.anchored-trigger { .anchored-trigger {
&.active { &.active { background-color : #444444; }
background-color: #444444;
}
} }
.anchored-box { .anchored-box {
@@ -52,56 +48,54 @@
gap : 5px; gap : 5px;
padding : 15px; padding : 15px;
margin-top : 10px; margin-top : 10px;
font-size : .8em; font-size : 0.8em;
color : #CCCCCC; color : #CCCCCC;
background-color : var(--box-color); background-color : var(--box-color);
border-radius : 5px; border-radius : 5px;
h1 { h1 {
border-bottom: 1px solid currentColor; padding-bottom : 0.3em;
margin-bottom: 0.5em; margin-bottom : 0.5em;
padding-bottom: 0.3em; border-bottom : 1px solid currentColor;
} }
h2 { h2 {
color: lightgray; padding-bottom : 0.3em;
border-bottom: 1px solid currentColor; margin : 1em 0 0.5em 0;
margin: 1em 0 0.5em 0; color : lightgray;
padding-bottom: 0.3em; border-bottom : 1px solid currentColor;
} }
label { label {
display: flex; display : flex;
align-items: center; gap : 6px;
justify-content: space-between; align-items : center;
gap: 6px; justify-content : space-between;
} }
input{ input {
height: unset; height : unset;
&[type='range'] { &[type='range'] { padding : 0; }
padding: 0; }
} &::before {
position : absolute;
top : -20px;
left : 50%;
width : 0px;
height : 0px;
pointer-events : none;
content : '';
border : 10px solid transparent;
border-bottom : 10px solid var(--box-color);
transform : translateX(-50%);
} }
&:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border: 10px solid transparent;
border-bottom: 10px solid var(--box-color);
left: 50%;
transform: translateX(-50%);
top: -20px;
pointer-events: none;
}
} }
.radio-group:has(button[role='radio']){ .radio-group:has(button[role='radio']) {
display: flex; display : flex;
border: 1px solid #333; height : 100%;
height: 100%; border : 1px solid #333333;
} }
input { input {
@@ -165,39 +159,35 @@
color : inherit; color : inherit;
background-color : unset; background-color : unset;
&:not(button:has(i, svg)) { &:not(button:has(i, svg)) { padding : 0 8px; }
padding: 0 8px;
}
&:hover { background-color : #444444; } &:hover { background-color : #444444; }
&:focus { border : 1px solid #D3D3D3;outline: none;} &:focus { border : 1px solid #D3D3D3;outline : none;}
&:disabled { &:disabled {
color : #777777; color : #777777;
background-color : unset !important; background-color : unset !important;
} }
i { i { font-size : 1.2em; }
font-size:1.2em;
}
} }
&.hidden { &.hidden {
width: 32px; flex-wrap : nowrap;
transition: all .3s ease; width : 32px;
flex-wrap:nowrap; overflow : hidden;
overflow: hidden; background-color : unset;
background-color: unset; opacity : 0.5;
opacity: .5; transition : all 0.3s ease;
& > *:not(.toggleButton) { & > *:not(.toggleButton) {
opacity: 0; opacity : 0;
transition: all .2s ease; transition : all 0.2s ease;
} }
} }
} }
button.toggleButton { button.toggleButton {
z-index : 5; position : absolute;
position:absolute; left : 0;
left: 0; z-index : 5;
width: 32px; width : 32px;
min-width: unset; min-width : unset;
} }