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

feat(topbar): add customizable visibility controls for directories and subscriptions

Browse Source
This commit is contained in:
plebeius
2025-11-07 18:20:11 +01:00
parent bae3d76c6f
commit 669bb5b181
16 changed files with 767 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/directory-modal/directory-modal.module.css
+13 -9
View File
@@ -4,19 +4,23 @@
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128, 128, 128, 0.5);
background-color: rgba(0, 0, 0, 0.25);
z-index: 999;
}
.backdropHome {
background-color: rgba(128, 128, 128, 0.5);
}
.directoryDialog {
position: absolute;
width: 500px;
top: 50px;
left: 50%;
margin-left: -251px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(136, 0, 0);
color: rgb(136, 0, 0);
background-color: var(--directory-modal-background-color, #f0e0d6);
border: var(--directory-modal-border, 1px solid #d9bfb7);
color: var(--directory-modal-text-color, #800);
box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px 1px;
font-family: arial, helvetica, clean, sans-serif;
font-size: 13px;
@@ -35,8 +39,8 @@
.hd {
position: relative;
background-color: rgb(136, 0, 0);
color: rgb(255, 255, 255);
background-color: var(--directory-modal-header-background-color, #ea8);
color: var(--directory-modal-header-text-color, #800);
padding: 4px 6px;
display: flex;
justify-content: space-between;
@@ -58,7 +62,7 @@
position: absolute;
top: 4px;
right: 4px;
background-image: var(--disclaimer-modal-close-button-background-image);
background-image: var(--directory-modal-close-button-background-image, url("/assets/buttons/cross-red.png"));
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
@@ -91,7 +95,7 @@
padding: 0;
font-size: 14px;
font-weight: bold;
color: rgb(136, 0, 0);
color: var(--directory-modal-text-color, #800);
letter-spacing: 0.3px;
}
@@ -106,7 +110,7 @@
}
.bd a {
color: rgb(136, 0, 0);
color: var(--directory-modal-text-color, #800);
text-decoration: underline;
}
src/components/directory-modal/directory-modal.tsx
+4 -1
View File
@@ -1,8 +1,11 @@
import { useLocation } from 'react-router-dom';
import useDirectoryModalStore from '../../stores/use-directory-modal-store';
import styles from './directory-modal.module.css';
const DirectoryModal = () => {
const { showModal, closeDirectoryModal } = useDirectoryModalStore();
const location = useLocation();
const isHomeView = location.pathname === '/';
if (!showModal) {
return null;
@@ -15,7 +18,7 @@ const DirectoryModal = () => {
};
return (
<div className={styles.backdrop} onClick={handleBackdropClick}>
<div className={`${styles.backdrop} ${isHomeView ? styles.backdropHome : ''}`} onClick={handleBackdropClick}>
<div className={styles.directoryDialog}>
<div className={styles.hd}>
<h2>Submit a Board to a Directory</h2>