External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(interface settings): add description to each UI setting

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-10-31 12:48:01 +01:00
parent 06cbb9639b
commit c6e301af0f
39 changed files with 285 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import PostForm from './components/post-form';
import SubplebbitStats from './components/subplebbit-stats';
import TopBar from './components/topbar';
const CheckRouteParams = () => {
const ValidateRouteParams = () => {
const { accountCommentIndex, timeFilterName } = useParams();
const { timeFilterNames, lastVisitTimeFilterName } = useTimeFilter();
const { accountComments } = useAccountComments();
@@ -125,7 +125,7 @@ const App = () => {
<Route path='/' element={<Home />} />
<Route path='/faq' element={<FAQ />} />
<Route path='*' element={<NotFound />} />
<Route element={<CheckRouteParams />}>
<Route element={<ValidateRouteParams />}>
<Route element={<BoardLayout />}>
<Route path='/p/:subplebbitAddress' element={<Board />} />
<Route path='/p/:subplebbitAddress/settings' element={<Board />} />
src/components/settings-modal/interface-settings/interface-settings.module.css
+7 -1
View File
@@ -27,4 +27,10 @@
.setting input[type="checkbox"] {
margin-right: 2px;
}
}
.settingTip {
font-size: 0.85em;
margin: 2px 0 5px 0;
padding-left: 19px;
}
src/components/settings-modal/interface-settings/interface-settings.tsx
+29 -15
View File
@@ -141,21 +141,6 @@ const InterfaceSettings = () => {
<div className={styles.setting}>
{_.capitalize(t('interface_language'))}: <InterfaceLanguage />
</div>
<div className={styles.setting}>
<label>
<input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {_.capitalize(t('hide_avatars'))}
</label>
</div>
<div className={styles.setting}>
<label>
<input type='checkbox' checked={hideGoreBoards} onChange={(e) => setHideGoreBoards(e.target.checked)} /> {_.capitalize(t('hide_gore_boards'))}
</label>
</div>
<div className={styles.setting}>
<label>
<input type='checkbox' checked={hideAdultBoards} onChange={(e) => setHideAdultBoards(e.target.checked)} /> {_.capitalize(t('hide_adult_boards'))}
</label>
</div>
<div className={styles.setting}>
<label>
<input
@@ -168,6 +153,35 @@ const InterfaceSettings = () => {
/>
{_.capitalize(t('hide_threads_without_images'))}
</label>
<div className={styles.settingTip}>{_.capitalize(t('threads_without_images_tip'))}</div>
</div>
<div className={styles.setting}>
<label>
<input type='checkbox' checked={hideGoreBoards} onChange={(e) => setHideGoreBoards(e.target.checked)} /> {_.capitalize(t('hide_gore_boards'))}
</label>
<div className={styles.settingTip}>{_.capitalize(t('hide_gore_boards_tip'))}</div>
</div>
<div className={styles.setting}>
<label>
<input type='checkbox' checked={hideAdultBoards} onChange={(e) => setHideAdultBoards(e.target.checked)} /> {_.capitalize(t('hide_adult_boards'))}
</label>
<div className={styles.settingTip}>{_.capitalize(t('hide_adult_boards_tip'))}</div>
</div>
<div className={styles.setting}>
<label>
<input
type='checkbox'
// checked={fitExpandedImagesToScreen} onChange={(e) => setFitExpandedImagesToScreen(e.target.checked)}
/>
{_.capitalize(t('fit_expanded_images_to_screen'))}
</label>
<div className={styles.settingTip}>{_.capitalize(t('fit_expanded_images_to_screen_tip'))}</div>
</div>
<div className={styles.setting}>
<label>
<input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {_.capitalize(t('hide_avatars'))}
</label>
<div className={styles.settingTip}>{_.capitalize(t('hide_avatars_tip'))}</div>
</div>
</div>
);
src/views/board/board.tsx
+2
View File
@@ -249,6 +249,8 @@ const Board = () => {
document.title = boardTitle + ' - plebchan';
}, [title, shortAddress, subplebbitAddress]);
console.log('feed', feed);
return (
<div className={styles.content}>
{location.pathname.endsWith('/settings') && <SettingsModal />}