tanner/qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

refactor: Standardize font size units to rem and add per-setting resets

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2026-01-02 21:49:07 +00:00
parent 656c322249
commit a8a794bc65
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
webclient/src/App.js
View File

@@ -21,7 +21,7 @@ function App() {
const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement); const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
const [waitingWorker, setWaitingWorker] = useState(null); const [waitingWorker, setWaitingWorker] = useState(null);
const [settingsOpen, setSettingsOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false);
const defaultBodyFontSize = 16; const defaultBodyFontSize = 1.0;
const defaultStoryFontSize = 1.2; const defaultStoryFontSize = 1.2;
const [bodyFontSize, setBodyFontSize] = useState(Number(localStorage.getItem('bodyFontSize')) || defaultBodyFontSize); const [bodyFontSize, setBodyFontSize] = useState(Number(localStorage.getItem('bodyFontSize')) || defaultBodyFontSize);
const [storyFontSize, setStoryFontSize] = useState(Number(localStorage.getItem('storyFontSize')) || defaultStoryFontSize); const [storyFontSize, setStoryFontSize] = useState(Number(localStorage.getItem('storyFontSize')) || defaultStoryFontSize);
@@ -52,8 +52,8 @@ function App() {
const changeBodyFontSize = (amount) => { const changeBodyFontSize = (amount) => {
const newSize = bodyFontSize + amount; const newSize = bodyFontSize + amount;
setBodyFontSize(newSize); setBodyFontSize(parseFloat(newSize.toFixed(1)));
localStorage.setItem('bodyFontSize', newSize); localStorage.setItem('bodyFontSize', newSize.toFixed(1));
}; };
const changeStoryFontSize = (amount) => { const changeStoryFontSize = (amount) => {
@@ -62,14 +62,18 @@ function App() {
localStorage.setItem('storyFontSize', newSize.toFixed(1)); localStorage.setItem('storyFontSize', newSize.toFixed(1));
}; };
const resetFontSettings = () => { const resetBodyFontSize = () => {
setBodyFontSize(defaultBodyFontSize); setBodyFontSize(defaultBodyFontSize);
localStorage.removeItem('bodyFontSize'); localStorage.removeItem('bodyFontSize');
};
const resetStoryFontSize = () => {
setStoryFontSize(defaultStoryFontSize); setStoryFontSize(defaultStoryFontSize);
localStorage.removeItem('storyFontSize'); localStorage.removeItem('storyFontSize');
}; };
const fontSettingsChanged = bodyFontSize !== defaultBodyFontSize || storyFontSize !== defaultStoryFontSize; const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize;
const storyFontSettingsChanged = storyFontSize !== defaultStoryFontSize;
useEffect(() => { useEffect(() => {
const onSWUpdate = e => { const onSWUpdate = e => {
@@ -119,7 +123,7 @@ function App() {
}, [theme]); }, [theme]);
useEffect(() => { useEffect(() => {
document.documentElement.style.fontSize = `${bodyFontSize}px`; document.documentElement.style.fontSize = `${bodyFontSize}rem`;
}, [bodyFontSize]); }, [bodyFontSize]);
useEffect(() => { useEffect(() => {
@@ -153,17 +157,18 @@ function App() {
</div> </div>
<div className="setting-group"> <div className="setting-group">
<h4>Body Font Size</h4> <h4>Body Font Size</h4>
<button onClick={() => changeBodyFontSize(-1)}>-</button> <button onClick={() => changeBodyFontSize(-0.1)}>-</button>
<span className="font-size-display">{bodyFontSize}px</span> <span className="font-size-display">{bodyFontSize.toFixed(1)}</span>
<button onClick={() => changeBodyFontSize(1)}>+</button> <button onClick={() => changeBodyFontSize(0.1)}>+</button>
<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
</div> </div>
<div className="setting-group"> <div className="setting-group">
<h4>Story Font Size</h4> <h4>Story Font Size</h4>
<button onClick={() => changeStoryFontSize(-0.1)}>-</button> <button onClick={() => changeStoryFontSize(-0.1)}>-</button>
<span className="font-size-display">{storyFontSize.toFixed(1)}rem</span> <span className="font-size-display">{storyFontSize.toFixed(1)}</span>
<button onClick={() => changeStoryFontSize(0.1)}>+</button> <button onClick={() => changeStoryFontSize(0.1)}>+</button>
<button onClick={resetStoryFontSize} disabled={!storyFontSettingsChanged}>Reset</button>
</div> </div>
<button onClick={resetFontSettings} disabled={!fontSettingsChanged}>Reset Font Settings</button>
</div> </div>
</div> </div>
} }