mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
style(AdminListModal): differentiate mod and admin role
This commit is contained in:
plebeius.eth
@@ -3,23 +3,15 @@ import Modal from 'react-modal';
|
||||
import Draggable from 'react-draggable';
|
||||
import { StyledModal } from '../styled/modals/ReplyModal.styled';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { BoardForm } from '../styled/views/Board.styled'
|
||||
import { BoardForm } from '../styled/views/Board.styled';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
|
||||
const AdminListModal = ({ isOpen, closeModal, roles }) => {
|
||||
const {
|
||||
selectedAddress,
|
||||
selectedStyle,
|
||||
selectedTitle,
|
||||
} = useGeneralStore(state => state);
|
||||
const { selectedStyle } = useGeneralStore((state) => state);
|
||||
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
|
||||
const nodeRef = useRef(null);
|
||||
const rolesList = roles
|
||||
? Object.entries(roles).map(([address, { role }]) => ({ address, role }))
|
||||
: [];
|
||||
const rolesList = roles ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) : [];
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => setIsMobile(window.innerWidth <= 480);
|
||||
@@ -31,30 +23,33 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
|
||||
};
|
||||
}, [setIsMobile]);
|
||||
|
||||
|
||||
return (
|
||||
<StyledModal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Reply Modal"
|
||||
contentLabel='Reply Modal'
|
||||
shouldCloseOnEsc={true}
|
||||
shouldCloseOnOverlayClick={isMobile}
|
||||
selectedStyle={selectedStyle}
|
||||
overlayClassName="overlay"
|
||||
style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})
|
||||
}
|
||||
overlayClassName='overlay'
|
||||
style={isMobile ? { overlay: { backgroundColor: 'rgba(0,0,0,.25)' } } : { overlay: { backgroundColor: 'rgba(0,0,0,0)' } }}
|
||||
>
|
||||
<Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
|
||||
<div className="modal-content" ref={nodeRef}
|
||||
<Draggable handle='.modal-header' nodeRef={nodeRef} disabled={isMobile}>
|
||||
<div
|
||||
className='modal-content'
|
||||
ref={nodeRef}
|
||||
style={{
|
||||
maxWidth: '300px',
|
||||
maxHeight: '250px',
|
||||
}}>
|
||||
<div className="modal-header">
|
||||
Admins for {selectedTitle ?? selectedAddress}
|
||||
<button className="icon" onClick={() => closeModal()} title="close" />
|
||||
}}
|
||||
>
|
||||
<button className='icon' onClick={() => closeModal()} title='close' />
|
||||
<div className='modal-header' style={{ margin: '10px 10px 0px 10px' }}>
|
||||
Moderators
|
||||
</div>
|
||||
<div className='list' style={{
|
||||
<div
|
||||
className='list'
|
||||
style={{
|
||||
padding: '10px',
|
||||
maxHeight: '200px',
|
||||
maxWidth: '300px',
|
||||
@@ -62,11 +57,16 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
|
||||
overflowX: 'hidden',
|
||||
wordWrap: 'break-word',
|
||||
wordBreak: 'break-all',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
|
||||
{rolesList.map(({ address, role }, index) => (
|
||||
<p key={index}>
|
||||
• <Link to={() => {}} className="quote-link">u/{address}</Link>: {role}
|
||||
•{' '}
|
||||
<Link to={() => {}} className='quote-link'>
|
||||
u/{address}
|
||||
</Link>
|
||||
: {role}
|
||||
</p>
|
||||
))}
|
||||
</BoardForm>
|
||||
|
||||
@@ -15,7 +15,8 @@ export const Container = styled.div`
|
||||
|
||||
export const NavBar = styled.div`
|
||||
@media (min-width: 480px) {
|
||||
.board-select, .page-jump {
|
||||
.board-select,
|
||||
.page-jump {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -33,7 +34,8 @@ export const NavBar = styled.div`
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.boardList, .nav {
|
||||
.boardList,
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -224,7 +226,8 @@ export const NavBar = styled.div`
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}}`;
|
||||
}}
|
||||
`;
|
||||
|
||||
export const Header = styled.div`
|
||||
${({ selectedStyle }) => {
|
||||
@@ -472,7 +475,7 @@ export const Break = styled.hr`
|
||||
|
||||
export const PostFormLink = styled.div`
|
||||
@media (min-width: 480px) {
|
||||
display: ${props => (props.showPostFormLink ? 'block' : 'none')};
|
||||
display: ${(props) => (props.showPostFormLink ? 'block' : 'none')};
|
||||
|
||||
#post-form-link-mobile {
|
||||
display: none;
|
||||
@@ -480,7 +483,7 @@ export const PostFormLink = styled.div`
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: ${props => (props.showPostFormLink ? 'block' : 'none')};
|
||||
display: ${(props) => (props.showPostFormLink ? 'block' : 'none')};
|
||||
line-height: 30px;
|
||||
|
||||
#post-form-link-desktop {
|
||||
@@ -628,7 +631,7 @@ export const PostFormLink = styled.div`
|
||||
`;
|
||||
|
||||
export const PostFormTable = styled.table`
|
||||
display: ${props => (props.showPostForm ? 'table' : 'none')};
|
||||
display: ${(props) => (props.showPostForm ? 'table' : 'none')};
|
||||
width: 418px;
|
||||
border-spacing: 1px;
|
||||
margin-left: auto;
|
||||
@@ -1153,7 +1156,7 @@ export const PostFormTable = styled.table`
|
||||
|
||||
#t-help {
|
||||
margin: 0;
|
||||
margin-top: -5px
|
||||
margin-top: -5px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1407,7 +1410,7 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -1441,7 +1444,7 @@ export const TopBar = styled.div`
|
||||
max-width: calc(100vw - 50vw);
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
text-overflow: "";
|
||||
text-overflow: '';
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1450,7 +1453,7 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis-all:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -1494,7 +1497,7 @@ export const TopBar = styled.div`
|
||||
max-width: 90vw;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
text-overflow: "";
|
||||
text-overflow: '';
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1503,7 +1506,7 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis-all:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -1695,8 +1698,12 @@ export const BoardForm = styled.div`
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.capcode-admin {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -1944,7 +1951,6 @@ export const BoardForm = styled.div`
|
||||
}
|
||||
}`;
|
||||
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
@@ -2047,7 +2053,7 @@ export const BoardForm = styled.div`
|
||||
float: left !important;
|
||||
font-weight: 700 !important;
|
||||
opacity: 1 !important;
|
||||
height: .5em !important;
|
||||
height: 0.5em !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@@ -2212,7 +2218,7 @@ export const BoardForm = styled.div`
|
||||
float: left !important;
|
||||
font-weight: 700 !important;
|
||||
opacity: 1 !important;
|
||||
height: .5em !important;
|
||||
height: 0.5em !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@@ -2225,7 +2231,8 @@ export const BoardForm = styled.div`
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
a, #reply-button {
|
||||
a,
|
||||
#reply-button {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -2236,7 +2243,6 @@ export const BoardForm = styled.div`
|
||||
margin: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
@@ -4090,7 +4096,7 @@ export const PostMenu = styled.div`
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'};
|
||||
transform: ${(props) => (props.rotated ? 'rotate(90deg)' : 'none')};
|
||||
`;
|
||||
|
||||
export const PostMenuMobile = styled.div`
|
||||
@@ -4098,7 +4104,6 @@ export const PostMenuMobile = styled.div`
|
||||
line-height: 2.5em;
|
||||
width: 216px;
|
||||
|
||||
|
||||
ul {
|
||||
border-right-width: 2px !important;
|
||||
list-style: none;
|
||||
@@ -4218,6 +4223,6 @@ export const PostMenuMobile = styled.div`
|
||||
|
||||
default:
|
||||
return '';
|
||||
}}
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -2,15 +2,17 @@ import styled from 'styled-components';
|
||||
|
||||
export const ReplyFormLink = styled.div`
|
||||
@media (min-width: 480px) {
|
||||
display: ${props => (props.showReplyFormLink ? 'block' : 'none')};
|
||||
display: ${(props) => (props.showReplyFormLink ? 'block' : 'none')};
|
||||
|
||||
#post-form-link-mobile, #return-button-mobile, #catalog-button-mobile, #bottom-button-mobile {
|
||||
#post-form-link-mobile,
|
||||
#return-button-mobile,
|
||||
#catalog-button-mobile,
|
||||
#bottom-button-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
#post-form-link-desktop {
|
||||
display: none;
|
||||
}
|
||||
@@ -24,7 +26,10 @@ export const ReplyFormLink = styled.div`
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#return-button-mobile, #catalog-button-mobile, #bottom-button-mobile, #bottom-bar-top {
|
||||
#return-button-mobile,
|
||||
#catalog-button-mobile,
|
||||
#bottom-button-mobile,
|
||||
#bottom-bar-top {
|
||||
font-size: 10pt;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
@@ -186,7 +191,7 @@ export const TopBar = styled.div`
|
||||
max-width: calc(100vw - 50vw);
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
text-overflow: "";
|
||||
text-overflow: '';
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -195,7 +200,7 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis-all:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -237,7 +242,7 @@ export const TopBar = styled.div`
|
||||
max-width: 90vw;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
text-overflow: "";
|
||||
text-overflow: '';
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -246,7 +251,7 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis-all:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -256,7 +261,9 @@ export const TopBar = styled.div`
|
||||
|
||||
line-height: 30px;
|
||||
|
||||
#return-button-desktop, #catalog-button-desktop, #bottom-button-desktop {
|
||||
#return-button-desktop,
|
||||
#catalog-button-desktop,
|
||||
#bottom-button-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -293,7 +300,7 @@ export const TopBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -709,7 +716,7 @@ export const BottomBar = styled.div`
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -899,8 +906,12 @@ export const BoardForm = styled.div`
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.capcode-admin {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: "\\2026";
|
||||
content: '\\2026';
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4, end) 1200ms infinite;
|
||||
animation: ellipsis steps(4, end) 1500ms infinite;
|
||||
@@ -1170,7 +1181,6 @@ export const BoardForm = styled.div`
|
||||
max-width: 125px;
|
||||
max-height: 125px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.thread-mobile {
|
||||
@@ -1213,7 +1223,7 @@ export const BoardForm = styled.div`
|
||||
float: left !important;
|
||||
font-weight: 700 !important;
|
||||
opacity: 1 !important;
|
||||
height: .5em !important;
|
||||
height: 0.5em !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@@ -1250,7 +1260,6 @@ export const BoardForm = styled.div`
|
||||
display: block !important;
|
||||
clear: left !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
video {
|
||||
@@ -1361,7 +1370,7 @@ export const BoardForm = styled.div`
|
||||
float: left !important;
|
||||
font-weight: 700 !important;
|
||||
opacity: 1 !important;
|
||||
height: .5em !important;
|
||||
height: 0.5em !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@@ -1385,7 +1394,6 @@ export const BoardForm = styled.div`
|
||||
margin: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
@@ -3207,7 +3215,7 @@ export const Footer = styled.div`
|
||||
#version {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-family: "arial";
|
||||
font-family: 'arial';
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
#break {
|
||||
|
||||
@@ -990,7 +990,7 @@ const Board = () => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span
|
||||
@@ -1149,13 +1149,13 @@ const Board = () => {
|
||||
)}
|
||||
<span className='name-block-mobile'>
|
||||
<span
|
||||
className='name-mobile capcode'
|
||||
className='name-mobile capcode-admin'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
|
||||
@@ -1215,7 +1215,7 @@ const Board = () => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span
|
||||
@@ -1374,13 +1374,13 @@ const Board = () => {
|
||||
)}
|
||||
<span className='name-block-mobile'>
|
||||
<span
|
||||
className='name-mobile capcode'
|
||||
className='name-mobile capcode-admin'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
|
||||
@@ -1457,7 +1457,7 @@ const Board = () => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span
|
||||
@@ -1675,13 +1675,13 @@ const Board = () => {
|
||||
)}
|
||||
<span className='name-block-mobile'>
|
||||
<span
|
||||
className='name-mobile capcode'
|
||||
className='name-mobile capcode-admin'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
|
||||
|
||||
@@ -362,7 +362,7 @@ const CatalogPost = ({ post }) => {
|
||||
}}
|
||||
>
|
||||
<span className='post-subject'>Rules </span> by
|
||||
<span className='post-author-admin'> ## Board Admins </span>
|
||||
<span className='post-author-admin'> ## Board Mods </span>
|
||||
<span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
|
||||
</div>
|
||||
</PostPreview>,
|
||||
@@ -530,7 +530,7 @@ const CatalogPost = ({ post }) => {
|
||||
}}
|
||||
>
|
||||
<span className='post-subject'>Welcome to {subplebbit.title || subplebbit.address}</span> by
|
||||
<span className='post-author-admin'> ## Board Admins </span>
|
||||
<span className='post-author-admin'> ## Board Mods </span>
|
||||
<span className='post-ago'>{thread.timestamp ? getFormattedTime(thread.timestamp) : null}</span>
|
||||
</div>
|
||||
</PostPreview>,
|
||||
|
||||
@@ -382,7 +382,7 @@ const Description = () => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='date-time'>{getDate(subplebbit.createdAt)}</span>
|
||||
@@ -596,13 +596,13 @@ const Description = () => {
|
||||
)}
|
||||
<span className='name-block-mobile'>
|
||||
<span
|
||||
className='name-mobile capcode'
|
||||
className='name-mobile capcode-admin'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
|
||||
|
||||
@@ -370,7 +370,7 @@ const Rules = () => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='date-time'>{getDate(subplebbit.createdAt)}</span>
|
||||
@@ -530,13 +530,13 @@ const Rules = () => {
|
||||
)}
|
||||
<span className='name-block-mobile'>
|
||||
<span
|
||||
className='name-mobile capcode'
|
||||
className='name-mobile capcode-admin'
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
setIsAdminListOpen(!isAdminListOpen);
|
||||
}}
|
||||
>
|
||||
## Board Admins
|
||||
## Board Mods
|
||||
</span>
|
||||
|
||||
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
|
||||
|
||||
@@ -1096,7 +1096,7 @@ const Thread = () => {
|
||||
Anonymous
|
||||
</span>
|
||||
)}
|
||||
|
||||
|
||||
<span
|
||||
className='poster-address address-desktop'
|
||||
id='reply-button'
|
||||
|
||||
Reference in New Issue
Block a user