f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 16:22:44 +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';
// 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.
// **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.

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

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

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

@@ -159,20 +159,20 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
<h1>Options</h1>
<label title='Modify the horizontal space between pages.'>
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 title='Modify the vertical space between rows of pages.'>
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 title='Start 1st page on the right side, such as if you have cover page.'>
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} />
</label>
<label title='Toggle the page shadow on every page.'>
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>
</AnchoredBox>
</Anchored>

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

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