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

feat: Consolidate font size settings; adjust increment to 0.05

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2026-01-02 22:06:39 +00:00
parent 6dce141862
commit 0fd3589313
1 changed files with 6 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
webclient/src/App.js
View File

@@ -22,9 +22,7 @@ function App() {
const [waitingWorker, setWaitingWorker] = useState(null); const [waitingWorker, setWaitingWorker] = useState(null);
const [settingsOpen, setSettingsOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false);
const defaultBodyFontSize = 1.0; const defaultBodyFontSize = 1.0;
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 updateCache = useCallback((key, value) => { const updateCache = useCallback((key, value) => {
cache.current[key] = value; cache.current[key] = value;
@@ -52,14 +50,8 @@ function App() {
const changeBodyFontSize = (amount) => { const changeBodyFontSize = (amount) => {
const newSize = bodyFontSize + amount; const newSize = bodyFontSize + amount;
setBodyFontSize(parseFloat(newSize.toFixed(1))); setBodyFontSize(parseFloat(newSize.toFixed(2)));
localStorage.setItem('bodyFontSize', newSize.toFixed(1)); localStorage.setItem('bodyFontSize', newSize.toFixed(2));
};
const changeStoryFontSize = (amount) => {
const newSize = storyFontSize + amount;
setStoryFontSize(parseFloat(newSize.toFixed(1)));
localStorage.setItem('storyFontSize', newSize.toFixed(1));
}; };
const resetBodyFontSize = () => { const resetBodyFontSize = () => {
@@ -67,13 +59,7 @@ function App() {
localStorage.removeItem('bodyFontSize'); localStorage.removeItem('bodyFontSize');
}; };
const resetStoryFontSize = () => {
setStoryFontSize(defaultStoryFontSize);
localStorage.removeItem('storyFontSize');
};
const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize; const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize;
const storyFontSettingsChanged = storyFontSize !== defaultStoryFontSize;
useEffect(() => { useEffect(() => {
const onSWUpdate = e => { const onSWUpdate = e => {
@@ -126,16 +112,6 @@ function App() {
document.documentElement.style.fontSize = `${bodyFontSize}rem`; document.documentElement.style.fontSize = `${bodyFontSize}rem`;
}, [bodyFontSize]); }, [bodyFontSize]);
useEffect(() => {
const styleId = 'story-font-size-style';
let style = document.getElementById(styleId);
if (!style) {
style = document.createElement('style');
style.id = styleId;
document.head.appendChild(style);
}
style.innerHTML = `.story-text { font-size: ${storyFontSize}em !important; }`;
}, [storyFontSize]);
const fullScreenAvailable = document.fullscreenEnabled || const fullScreenAvailable = document.fullscreenEnabled ||
document.mozFullscreenEnabled || document.mozFullscreenEnabled ||
@@ -156,19 +132,12 @@ function App() {
<button className={theme === 'red' ? 'active' : ''} onClick={() => { red() }}>Red</button> <button className={theme === 'red' ? 'active' : ''} onClick={() => { red() }}>Red</button>
</div> </div>
<div className="setting-group"> <div className="setting-group">
<h4>Body Font Size</h4> <h4>Font Size</h4>
<button onClick={() => changeBodyFontSize(-0.1)}>-</button> <button onClick={() => changeBodyFontSize(-0.05)}>-</button>
<span className="font-size-display">{bodyFontSize.toFixed(1)}</span> <span className="font-size-display">{bodyFontSize.toFixed(2)}</span>
<button onClick={() => changeBodyFontSize(0.1)}>+</button> <button onClick={() => changeBodyFontSize(0.05)}>+</button>
<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button> <button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
</div> </div>
<div className="setting-group">
<h4>Story Font Size</h4>
<button onClick={() => changeStoryFontSize(-0.1)}>-</button>
<span className="font-size-display">{storyFontSize.toFixed(1)}</span>
<button onClick={() => changeStoryFontSize(0.1)}>+</button>
<button onClick={resetStoryFontSize} disabled={!storyFontSettingsChanged}>Reset</button>
</div>
</div> </div>
</div> </div>
} }