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

restructure html, eliminate .tool divs

Browse Source 
Treat each input and button as a direct child of the `.group` class, removing the intermediate div and reassign the `tool` classname to those inputs and buttons.  One item, the current / total page "set", is wrapped in a .tool div because they should be considered one item (even within the .group container).

And then a bunch of CSS adjustments to match the new structure.
This commit is contained in:
Gazook89
2024-08-20 21:08:07 -05:00
parent cdc2ffeff4
commit 051eed0e83
2 changed files with 90 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,77 +44,77 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
return ( return (
<div className='toolBar'> <div className='toolBar'>
<div className='group'> <div className='group'>
<div className='tool'> <button
<button id='zoom-out'
onClick={()=>handleZoomChange(-20)} className='tool'
disabled={zoomLevel <= MIN_ZOOM} onClick={()=>handleZoomChange(-20)}
> disabled={zoomLevel <= MIN_ZOOM}
<i className='fas fa-magnifying-glass-minus' /> >
</button> <i className='fas fa-magnifying-glass-minus' />
</div> </button>
<div className='tool'> <input
<input id='zoom-slider'
className='slider' className='range-input tool'
type='range' type='range'
name='zoom' name='zoom'
list='zoomLevels' list='zoomLevels'
min={MIN_ZOOM} min={MIN_ZOOM}
max={MAX_ZOOM} max={MAX_ZOOM}
step='1' step='1'
value={zoomLevel} value={zoomLevel}
onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}} onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
/> />
<datalist id='zoomLevels'> <datalist id='zoomLevels'>
<option value='100' /> <option value='100' />
</datalist> </datalist>
</div>
<div className='tool'> <button
<button id='zoom-in'
onClick={()=>handleZoomChange(20)} className='tool'
disabled={zoomLevel >= MAX_ZOOM} onClick={()=>handleZoomChange(20)}
> disabled={zoomLevel >= MAX_ZOOM}
<i className='fas fa-magnifying-glass-plus' /> >
</button> <i className='fas fa-magnifying-glass-plus' />
</div> </button>
</div> </div>
<div className='group'> <div className='group'>
<div className='tool'> <button
<button id='previous-page'
className='previousPage' className='previousPage tool'
onClick={()=>scrollToPage(pageInput - 1)} onClick={()=>scrollToPage(pageInput - 1)}
disabled={pageInput <= 1} disabled={pageInput <= 1}
> >
<i className='fas fa-arrow-left'></i> <i className='fas fa-arrow-left'></i>
</button> </button>
</div>
<input
type='text'
name='page'
inputMode='numeric'
pattern='[0-9]'
id='pageInput'
value={pageInput}
onChange={(e)=>{
handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
onBlur={()=>scrollToPage(pageInput)}
onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageInput) : null;}}
/>
<span id='page-count'>/ {totalPages}</span>
<div className='tool'> <div className='tool'>
<button <input
className='nextPage' id='page-input'
// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}} class='text-input'
onClick={()=>scrollToPage(pageInput + 1)} type='text'
disabled={pageInput >= totalPages} name='page'
> inputMode='numeric'
<i className='fas fa-arrow-right'></i> pattern='[0-9]'
</button> value={pageInput}
onChange={(e)=>{
handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
onBlur={()=>scrollToPage(pageInput)}
onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageInput) : null;}}
/>
<span id='page-count'>/ {totalPages}</span>
</div> </div>
<button
id='next-page'
className='tool'
onClick={()=>scrollToPage(pageInput + 1)}
disabled={pageInput >= totalPages}
>
<i className='fas fa-arrow-right'></i>
</button>
</div> </div>
</div> </div>

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

@@ -16,12 +16,18 @@
.group { .group {
display : flex; display : flex;
gap: 0 3px;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
box-sizing : border-box; box-sizing : border-box;
height: 28px; height: 28px;
} }
.tool {
display: flex;
align-items: center;
}
input { input {
position : relative; position : relative;
height : 1.5em; height : 1.5em;
@@ -32,7 +38,8 @@
border : 1px solid gray; border : 1px solid gray;
&:focus { outline : 1px solid #d3d3d3; } &:focus { outline : 1px solid #d3d3d3; }
&.slider { // `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
&.range-input {
color: #D3D3D3; color: #D3D3D3;
accent-color: #d3d3d3; accent-color: #d3d3d3;
padding: 2px 0; padding: 2px 0;
@@ -61,7 +68,8 @@
} }
} }
&#pageInput { // `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
&#page-input {
width: 4ch; width: 4ch;
text-align: center; text-align: center;
margin-right: 1ch; margin-right: 1ch;
@@ -70,31 +78,27 @@
} }
.tool {
button {
display : flex; display : flex;
align-items : center; align-items : center;
padding : 0; justify-content: center;
height: 100%; height : 100%;
width: auto; width : auto;
min-width : 46px;
padding : 0 0px;
font-weight : unset;
color : inherit;
background-color : unset;
box-sizing: content-box; box-sizing: content-box;
&:hover { background-color : #444444; } &:hover { background-color : #444444; }
button { &:focus { outline : 1px solid #d3d3d3; }
height : 100%;
width : auto;
min-width : 46px;
padding : 0 0px;
font-weight : unset;
color : inherit;
background-color : unset;
&:focus { outline : 1px solid #d3d3d3; } &:disabled {
color : #777777;
&:disabled { background-color : unset !important;
color : #777777;
background-color : unset !important;
}
} }
} }
} }