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