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(AdminListModal): differentiate mod and admin role

Browse Source
This commit is contained in:
plebeius.eth
2023-09-26 14:46:11 +02:00
parent 40a2ff94ea
commit 7bd3768e1b
10 changed files with 3381 additions and 3368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/AdminListModal.jsx
+47 -47
View File
@@ -3,23 +3,15 @@ import Modal from 'react-modal';
import Draggable from 'react-draggable'; import Draggable from 'react-draggable';
import { StyledModal } from '../styled/modals/ReplyModal.styled'; import { StyledModal } from '../styled/modals/ReplyModal.styled';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; 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'; import { Link } from 'react-router-dom';
const AdminListModal = ({ isOpen, closeModal, roles }) => { const AdminListModal = ({ isOpen, closeModal, roles }) => {
const { const { selectedStyle } = useGeneralStore((state) => state);
selectedAddress,
selectedStyle,
selectedTitle,
} = useGeneralStore(state => state);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 480); const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
const nodeRef = useRef(null); const nodeRef = useRef(null);
const rolesList = roles const rolesList = roles ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) : [];
? Object.entries(roles).map(([address, { role }]) => ({ address, role }))
: [];
useEffect(() => { useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth <= 480); const handleResize = () => setIsMobile(window.innerWidth <= 480);
@@ -30,45 +22,53 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
}, [setIsMobile]); }, [setIsMobile]);
return ( return (
<StyledModal <StyledModal
isOpen={isOpen} isOpen={isOpen}
onRequestClose={closeModal} onRequestClose={closeModal}
contentLabel="Reply Modal" contentLabel='Reply Modal'
shouldCloseOnEsc={true} shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={isMobile} shouldCloseOnOverlayClick={isMobile}
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
overlayClassName="overlay" overlayClassName='overlay'
style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }}) style={isMobile ? { overlay: { backgroundColor: 'rgba(0,0,0,.25)' } } : { overlay: { backgroundColor: 'rgba(0,0,0,0)' } }}
} >
> <Draggable handle='.modal-header' nodeRef={nodeRef} disabled={isMobile}>
<Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}> <div
<div className="modal-content" ref={nodeRef} className='modal-content'
style={{ ref={nodeRef}
maxWidth: '300px', style={{
maxHeight: '250px',
}}>
<div className="modal-header">
Admins for {selectedTitle ?? selectedAddress}
<button className="icon" onClick={() => closeModal()} title="close" />
</div>
<div className='list' style={{
padding: '10px',
maxHeight: '200px',
maxWidth: '300px', maxWidth: '300px',
overflowY: 'auto', maxHeight: '250px',
overflowX: 'hidden', }}
wordWrap: 'break-word', >
wordBreak: 'break-all', <button className='icon' onClick={() => closeModal()} title='close' />
}}> <div className='modal-header' style={{ margin: '10px 10px 0px 10px' }}>
<BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}> Moderators
{rolesList.map(({ address, role }, index) => ( </div>
<p key={index}> <div
• <Link to={() => {}} className="quote-link">u/{address}</Link>: {role} className='list'
</p> style={{
))} padding: '10px',
maxHeight: '200px',
maxWidth: '300px',
overflowY: 'auto',
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}
</p>
))}
</BoardForm> </BoardForm>
</div> </div>
</div> </div>
@@ -79,4 +79,4 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
Modal.setAppElement('#root'); Modal.setAppElement('#root');
export default AdminListModal; export default AdminListModal;
src/components/styled/views/Board.styled.jsx
+136 -131
View File
@@ -15,7 +15,8 @@ export const Container = styled.div`
export const NavBar = styled.div` export const NavBar = styled.div`
@media (min-width: 480px) { @media (min-width: 480px) {
.board-select, .page-jump { .board-select,
.page-jump {
display: none; display: none;
} }
@@ -33,7 +34,8 @@ export const NavBar = styled.div`
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.boardList, .nav { .boardList,
.nav {
display: none; display: none;
} }
@@ -81,9 +83,9 @@ export const NavBar = styled.div`
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return `font-size: 9pt; return `font-size: 9pt;
color: #b86; color: #b86;
a, #button-span { a, #button-span {
@@ -110,8 +112,8 @@ export const NavBar = styled.div`
color: navy; color: navy;
}`; }`;
case 'Yotsuba-B': case 'Yotsuba-B':
return `font-size: 9pt; return `font-size: 9pt;
color: #89a; color: #89a;
a, #button-span { a, #button-span {
@@ -220,11 +222,12 @@ export const NavBar = styled.div`
background-color: #ddd; background-color: #ddd;
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc;
}`; }`;
default: default:
return ''; return '';
} }
}}`; }}
`;
export const Header = styled.div` export const Header = styled.div`
${({ selectedStyle }) => { ${({ selectedStyle }) => {
@@ -418,10 +421,10 @@ export const Header = styled.div`
margin-top: 5px; margin-top: 5px;
font-size: 9pt; font-size: 9pt;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
.offline { .offline {
@@ -463,16 +466,16 @@ export const Break = styled.hr`
border: none; border: none;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
height: 0;`; height: 0;`;
default: default:
return ''; return '';
} }
}} }}
`; `;
export const PostFormLink = styled.div` export const PostFormLink = styled.div`
@media (min-width: 480px) { @media (min-width: 480px) {
display: ${props => (props.showPostFormLink ? 'block' : 'none')}; display: ${(props) => (props.showPostFormLink ? 'block' : 'none')};
#post-form-link-mobile { #post-form-link-mobile {
display: none; display: none;
@@ -480,7 +483,7 @@ export const PostFormLink = styled.div`
} }
@media (max-width: 480px) { @media (max-width: 480px) {
display: ${props => (props.showPostFormLink ? 'block' : 'none')}; display: ${(props) => (props.showPostFormLink ? 'block' : 'none')};
line-height: 30px; line-height: 30px;
#post-form-link-desktop { #post-form-link-desktop {
@@ -488,11 +491,11 @@ export const PostFormLink = styled.div`
} }
#post-form-link-mobile { #post-form-link-mobile {
margin: 11px 0; margin: 11px 0;
font-size: 10pt; font-size: 10pt;
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
display: block !important; display: block !important;
} }
} }
@@ -620,15 +623,15 @@ export const PostFormLink = styled.div`
color: #333 !important; color: #333 !important;
white-space: nowrap; white-space: nowrap;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
export const PostFormTable = styled.table` export const PostFormTable = styled.table`
display: ${props => (props.showPostForm ? 'table' : 'none')}; display: ${(props) => (props.showPostForm ? 'table' : 'none')};
width: 418px; width: 418px;
border-spacing: 1px; border-spacing: 1px;
margin-left: auto; margin-left: auto;
@@ -1145,15 +1148,15 @@ export const PostFormTable = styled.table`
width: 100% width: 100%
} }
}`; }`;
default: default:
return ''; return '';
} }
}} }}
#t-help { #t-help {
margin: 0; margin: 0;
margin-top: -5px margin-top: -5px;
} }
`; `;
@@ -1249,10 +1252,10 @@ export const PostForm = styled.div`
a:hover { a:hover {
color: #ff3300; color: #ff3300;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
@@ -1396,10 +1399,10 @@ export const TopBar = styled.div`
a:hover, #subscribe:hover { a:hover, #subscribe:hover {
color: #ff3300 !important; color: #ff3300 !important;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
.ellipsis { .ellipsis {
@@ -1407,10 +1410,10 @@ export const TopBar = styled.div`
} }
.ellipsis:after { .ellipsis:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -1441,7 +1444,7 @@ export const TopBar = styled.div`
max-width: calc(100vw - 50vw); max-width: calc(100vw - 50vw);
word-wrap: break-word; word-wrap: break-word;
white-space: nowrap; white-space: nowrap;
text-overflow: ""; text-overflow: '';
overflow: hidden; overflow: hidden;
} }
@@ -1450,10 +1453,10 @@ export const TopBar = styled.div`
} }
.ellipsis-all:after { .ellipsis-all:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -1494,7 +1497,7 @@ export const TopBar = styled.div`
max-width: 90vw; max-width: 90vw;
word-wrap: break-word; word-wrap: break-word;
white-space: nowrap; white-space: nowrap;
text-overflow: ""; text-overflow: '';
overflow: hidden; overflow: hidden;
} }
@@ -1503,10 +1506,10 @@ export const TopBar = styled.div`
} }
.ellipsis-all:after { .ellipsis-all:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -1683,11 +1686,11 @@ export const TopBar = styled.div`
color: #333 !important; color: #333 !important;
white-space: nowrap; white-space: nowrap;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
export const BoardForm = styled.div` export const BoardForm = styled.div`
@@ -1695,11 +1698,15 @@ export const BoardForm = styled.div`
margin-right: 14px; margin-right: 14px;
} }
.capcode-admin {
color: red !important;
}
.ellipsis:after { .ellipsis:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -1793,9 +1800,9 @@ export const BoardForm = styled.div`
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #f0c0b0 !important; background-color: #f0c0b0 !important;
border: 1px solid #d99f91 !important; border: 1px solid #d99f91 !important;
border-left: none !important; border-left: none !important;
@@ -1821,8 +1828,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Yotsuba-B': case 'Yotsuba-B':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #d6bad0 !important; background-color: #d6bad0 !important;
border: 1px solid #ba9dbf !important; border: 1px solid #ba9dbf !important;
border-left: none !important; border-left: none !important;
@@ -1848,8 +1855,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Futaba': case 'Futaba':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #f0c0b0 !important; background-color: #f0c0b0 !important;
} }
@@ -1872,8 +1879,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Burichan': case 'Burichan':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #d6bad0 !important; background-color: #d6bad0 !important;
} }
@@ -1896,8 +1903,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Tomorrow': case 'Tomorrow':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #1d1d21 !important; background-color: #1d1d21 !important;
outline: 1px solid #111 !important; outline: 1px solid #111 !important;
} }
@@ -1920,8 +1927,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Photon': case 'Photon':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #ccc !important; background-color: #ccc !important;
outline: 1px solid #ccc !important; outline: 1px solid #ccc !important;
} }
@@ -1944,25 +1951,24 @@ export const BoardForm = styled.div`
} }
}`; }`;
default: default:
return ''; return '';
} }
}} }}
} }
.file { .file {
display: block; display: block;
.file-text { .file-text {
max-width: 600px; max-width: 600px;
white-space: nowrap; white-space: nowrap;
} }
.fileText a { .fileText a {
text-decoration: underline; text-decoration: underline;
} }
.file-thumb { .file-thumb {
float: left; float: left;
margin: 3px 20px 5px 20px; margin: 3px 20px 5px 20px;
@@ -2028,7 +2034,7 @@ export const BoardForm = styled.div`
margin: 4px 0; margin: 4px 0;
overflow: hidden; overflow: hidden;
} }
.post-info-mobile { .post-info-mobile {
overflow: hidden; overflow: hidden;
padding: 5px; padding: 5px;
@@ -2036,7 +2042,7 @@ export const BoardForm = styled.div`
display: block; display: block;
clear: left; clear: left;
} }
.post-menu-button-mobile { .post-menu-button-mobile {
line-height: 1em !important; line-height: 1em !important;
width: 1em !important; width: 1em !important;
@@ -2047,14 +2053,14 @@ export const BoardForm = styled.div`
float: left !important; float: left !important;
font-weight: 700 !important; font-weight: 700 !important;
opacity: 1 !important; opacity: 1 !important;
height: .5em !important; height: 0.5em !important;
font-size: 16px !important; font-size: 16px !important;
} }
.name-block-mobile { .name-block-mobile {
clear: none; clear: none;
float: left; float: left;
.subject-mobile { .subject-mobile {
display: block; display: block;
} }
@@ -2064,7 +2070,7 @@ export const BoardForm = styled.div`
float: right; float: right;
text-align: right; text-align: right;
} }
.file-mobile { .file-mobile {
display: block; display: block;
@@ -2099,7 +2105,7 @@ export const BoardForm = styled.div`
#video-thumbnail-mobile { #video-thumbnail-mobile {
width: 100px; width: 100px;
} }
img { img {
border: none; border: none;
float: left; float: left;
@@ -2108,13 +2114,13 @@ export const BoardForm = styled.div`
object-fit: scale-down; object-fit: scale-down;
margin: 0; margin: 0;
} }
blockquote { blockquote {
padding-top: 5px; padding-top: 5px;
display: block; display: block;
margin: 10px !important; margin: 10px !important;
} }
.post-link-mobile { .post-link-mobile {
clear: both !important; clear: both !important;
padding: 5px; padding: 5px;
@@ -2122,12 +2128,12 @@ export const BoardForm = styled.div`
margin: -5px; margin: -5px;
display: block !important; display: block !important;
} }
.info-mobile { .info-mobile {
margin-top: 8px; margin-top: 8px;
float: left; float: left;
} }
.button-mobile { .button-mobile {
float: right; float: right;
border-radius: 3px; border-radius: 3px;
@@ -2164,7 +2170,7 @@ export const BoardForm = styled.div`
.file-mobile { .file-mobile {
display: block; display: block;
.file-thumb-mobile { .file-thumb-mobile {
margin-left: 10px !important; margin-left: 10px !important;
margin-right: 10px !important; margin-right: 10px !important;
@@ -2173,7 +2179,7 @@ export const BoardForm = styled.div`
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 15px; margin-top: 15px;
} }
.file-info-mobile { .file-info-mobile {
padding-top: 5px; padding-top: 5px;
text-align: center; text-align: center;
@@ -2186,7 +2192,7 @@ export const BoardForm = styled.div`
video { video {
max-width: 100px; max-width: 100px;
} }
img { img {
border: none; border: none;
float: left; float: left;
@@ -2207,12 +2213,12 @@ export const BoardForm = styled.div`
width: 1em !important; width: 1em !important;
text-align: center !important; text-align: center !important;
outline: none !important; outline: none !important;
transform: rotate(90deg)!important; transform: rotate(90deg) !important;
margin: 4px -5px 0 4px !important; margin: 4px -5px 0 4px !important;
float: left !important; float: left !important;
font-weight: 700 !important; font-weight: 700 !important;
opacity: 1 !important; opacity: 1 !important;
height: .5em !important; height: 0.5em !important;
font-size: 16px !important; font-size: 16px !important;
} }
@@ -2225,7 +2231,8 @@ export const BoardForm = styled.div`
float: right; float: right;
text-align: right; text-align: right;
a, #reply-button { a,
#reply-button {
text-decoration: none; text-decoration: none;
} }
} }
@@ -2236,7 +2243,6 @@ export const BoardForm = styled.div`
margin: 10px !important; margin: 10px !important;
} }
} }
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
@@ -3283,10 +3289,10 @@ export const BoardForm = styled.div`
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
height: 0; height: 0;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
@media (max-width: 480px) { @media (max-width: 480px) {
@@ -3309,7 +3315,7 @@ export const BoardForm = styled.div`
margin-left: calc((100% - 100vw) / 2); margin-left: calc((100% - 100vw) / 2);
margin-right: calc((100% - 100vw) / 2); margin-right: calc((100% - 100vw) / 2);
} }
.name-block { .name-block {
display: block; display: block;
} }
@@ -3355,7 +3361,7 @@ export const BoardForm = styled.div`
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #ccc !important; background-color: #ccc !important;
}`; }`;
default: default:
return ''; return '';
} }
@@ -4078,7 +4084,7 @@ export const BoardForm = styled.div`
} }
} }
}`; }`;
default: default:
return ''; return '';
} }
@@ -4090,15 +4096,14 @@ export const PostMenu = styled.div`
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transition: transform 0.1s; transition: transform 0.1s;
transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'}; transform: ${(props) => (props.rotated ? 'rotate(90deg)' : 'none')};
`; `;
export const PostMenuMobile = styled.div` export const PostMenuMobile = styled.div`
font-size: 16px; font-size: 16px;
line-height: 2.5em; line-height: 2.5em;
width: 216px; width: 216px;
ul { ul {
border-right-width: 2px !important; border-right-width: 2px !important;
list-style: none; list-style: none;
@@ -4115,9 +4120,9 @@ export const PostMenuMobile = styled.div`
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return ` return `
ul { ul {
border: 1px solid #d9bfb7; border: 1px solid #d9bfb7;
} }
@@ -4133,8 +4138,8 @@ export const PostMenuMobile = styled.div`
} }
`; `;
case 'Yotsuba-B': case 'Yotsuba-B':
return ` return `
ul { ul {
border: 1px solid #b7c5d9; border: 1px solid #b7c5d9;
} }
@@ -4150,8 +4155,8 @@ export const PostMenuMobile = styled.div`
} }
`; `;
case 'Futaba': case 'Futaba':
return ` return `
ul { ul {
border: 1px solid #d9bfb7; border: 1px solid #d9bfb7;
} }
@@ -4167,8 +4172,8 @@ export const PostMenuMobile = styled.div`
} }
`; `;
case 'Burichan': case 'Burichan':
return ` return `
ul { ul {
border: 1px solid #b7c5d9; border: 1px solid #b7c5d9;
} }
@@ -4184,8 +4189,8 @@ export const PostMenuMobile = styled.div`
} }
`; `;
case 'Tomorrow': case 'Tomorrow':
return ` return `
ul { ul {
border: 1px solid #282a2e; border: 1px solid #282a2e;
} }
@@ -4200,8 +4205,8 @@ export const PostMenuMobile = styled.div`
} }
`; `;
case 'Photon': case 'Photon':
return ` return `
ul { ul {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
@@ -4215,9 +4220,9 @@ export const PostMenuMobile = styled.div`
} }
} }
`; `;
default: default:
return ''; return '';
}}
} }
`; }}
`;
src/components/styled/views/Thread.styled.jsx
+94 -86
View File
@@ -2,15 +2,17 @@ import styled from 'styled-components';
export const ReplyFormLink = styled.div` export const ReplyFormLink = styled.div`
@media (min-width: 480px) { @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; display: none;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#post-form-link-desktop { #post-form-link-desktop {
display: none; display: none;
} }
@@ -24,7 +26,10 @@ export const ReplyFormLink = styled.div`
padding-top: 10px; 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; font-size: 10pt;
display: inline-block; display: inline-block;
margin: 0 2px; margin: 0 2px;
@@ -164,11 +169,11 @@ export const ReplyFormLink = styled.div`
color: #333 !important; color: #333 !important;
white-space: nowrap; white-space: nowrap;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
export const TopBar = styled.div` export const TopBar = styled.div`
@@ -186,7 +191,7 @@ export const TopBar = styled.div`
max-width: calc(100vw - 50vw); max-width: calc(100vw - 50vw);
word-wrap: break-word; word-wrap: break-word;
white-space: nowrap; white-space: nowrap;
text-overflow: ""; text-overflow: '';
overflow: hidden; overflow: hidden;
} }
@@ -195,10 +200,10 @@ export const TopBar = styled.div`
} }
.ellipsis-all:after { .ellipsis-all:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -223,7 +228,7 @@ export const TopBar = styled.div`
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.stats-all-catalog-container { .stats-all-catalog-container {
height: 25px; height: 25px;
position: absolute; position: absolute;
text-align: left; text-align: left;
@@ -237,7 +242,7 @@ export const TopBar = styled.div`
max-width: 90vw; max-width: 90vw;
word-wrap: break-word; word-wrap: break-word;
white-space: nowrap; white-space: nowrap;
text-overflow: ""; text-overflow: '';
overflow: hidden; overflow: hidden;
} }
@@ -246,17 +251,19 @@ export const TopBar = styled.div`
} }
.ellipsis-all:after { .ellipsis-all:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
line-height: 30px; line-height: 30px;
#return-button-desktop, #catalog-button-desktop, #bottom-button-desktop { #return-button-desktop,
#catalog-button-desktop,
#bottom-button-desktop {
display: none; display: none;
} }
@@ -293,10 +300,10 @@ export const TopBar = styled.div`
} }
.ellipsis:after { .ellipsis:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -317,7 +324,7 @@ export const TopBar = styled.div`
display: inline-block; display: inline-block;
} }
.reply-stat { .reply-stat {
position: relative; position: relative;
float: right; float: right;
margin-right: 5px; margin-right: 5px;
@@ -696,11 +703,11 @@ export const TopBar = styled.div`
color: #333 !important; color: #333 !important;
white-space: nowrap; white-space: nowrap;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
export const BottomBar = styled.div` export const BottomBar = styled.div`
@@ -709,10 +716,10 @@ export const BottomBar = styled.div`
} }
.ellipsis:after { .ellipsis:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -729,7 +736,7 @@ export const BottomBar = styled.div`
} }
} }
.reply-stat { .reply-stat {
position: relative; position: relative;
float: right; float: right;
margin-right: 5px; margin-right: 5px;
@@ -899,11 +906,15 @@ export const BoardForm = styled.div`
margin-right: 14px; margin-right: 14px;
} }
.capcode-admin {
color: red !important;
}
.ellipsis:after { .ellipsis:after {
content: "\\2026"; content: '\\2026';
position: absolute; position: absolute;
-webkit-animation: ellipsis steps(4,end) 1200ms infinite; -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
animation: ellipsis steps(4,end) 1500ms infinite; animation: ellipsis steps(4, end) 1500ms infinite;
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
} }
@@ -982,9 +993,9 @@ export const BoardForm = styled.div`
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #f0c0b0 !important; background-color: #f0c0b0 !important;
border: 1px solid #d99f91 !important; border: 1px solid #d99f91 !important;
border-left: none !important; border-left: none !important;
@@ -1008,8 +1019,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Yotsuba-B': case 'Yotsuba-B':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #d6bad0 !important; background-color: #d6bad0 !important;
border: 1px solid #ba9dbf !important; border: 1px solid #ba9dbf !important;
border-left: none !important; border-left: none !important;
@@ -1032,8 +1043,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Futaba': case 'Futaba':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #f0c0b0 !important; background-color: #f0c0b0 !important;
} }
@@ -1055,8 +1066,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Burichan': case 'Burichan':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #d6bad0 !important; background-color: #d6bad0 !important;
} }
@@ -1078,8 +1089,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Tomorrow': case 'Tomorrow':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #1d1d21 !important; background-color: #1d1d21 !important;
outline: 1px solid #111 !important; outline: 1px solid #111 !important;
} }
@@ -1100,8 +1111,8 @@ export const BoardForm = styled.div`
} }
}`; }`;
case 'Photon': case 'Photon':
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #ccc !important; background-color: #ccc !important;
outline: 1px solid #ccc !important; outline: 1px solid #ccc !important;
} }
@@ -1127,19 +1138,19 @@ export const BoardForm = styled.div`
} }
}} }}
} }
.file { .file {
display: block; display: block;
.file-text { .file-text {
max-width: 600px; max-width: 600px;
white-space: nowrap; white-space: nowrap;
} }
.fileText a { .fileText a {
text-decoration: underline; text-decoration: underline;
} }
.file-thumb { .file-thumb {
float: left; float: left;
margin: 3px 20px 5px 20px; margin: 3px 20px 5px 20px;
@@ -1155,7 +1166,7 @@ export const BoardForm = styled.div`
float: left; float: left;
margin: 3px 20px 5px 20px; margin: 3px 20px 5px 20px;
} }
.file-thumb img, .file-thumb img,
.file-thumb video, .file-thumb video,
.file-thumb audio { .file-thumb audio {
@@ -1170,7 +1181,6 @@ export const BoardForm = styled.div`
max-width: 125px; max-width: 125px;
max-height: 125px; max-height: 125px;
} }
} }
.thread-mobile { .thread-mobile {
@@ -1194,7 +1204,7 @@ export const BoardForm = styled.div`
margin: 4px 0; margin: 4px 0;
overflow: hidden; overflow: hidden;
} }
.post-info-mobile { .post-info-mobile {
overflow: hidden; overflow: hidden;
padding: 5px; padding: 5px;
@@ -1202,7 +1212,7 @@ export const BoardForm = styled.div`
display: block; display: block;
clear: left; clear: left;
} }
.post-menu-button-mobile { .post-menu-button-mobile {
line-height: 1em !important; line-height: 1em !important;
width: 1em !important; width: 1em !important;
@@ -1213,14 +1223,14 @@ export const BoardForm = styled.div`
float: left !important; float: left !important;
font-weight: 700 !important; font-weight: 700 !important;
opacity: 1 !important; opacity: 1 !important;
height: .5em !important; height: 0.5em !important;
font-size: 16px !important; font-size: 16px !important;
} }
.name-block-mobile { .name-block-mobile {
clear: none; clear: none;
float: left; float: left;
.subject-mobile { .subject-mobile {
display: block; display: block;
} }
@@ -1230,10 +1240,10 @@ export const BoardForm = styled.div`
float: right; float: right;
text-align: right; text-align: right;
} }
.file-mobile { .file-mobile {
display: block; display: block;
.file-thumb-mobile { .file-thumb-mobile {
margin-left: 10px !important; margin-left: 10px !important;
margin-right: 10px !important; margin-right: 10px !important;
@@ -1242,7 +1252,7 @@ export const BoardForm = styled.div`
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 15px; margin-top: 15px;
} }
.file-info-mobile { .file-info-mobile {
padding-top: 5px; padding-top: 5px;
text-align: center; text-align: center;
@@ -1250,7 +1260,6 @@ export const BoardForm = styled.div`
display: block !important; display: block !important;
clear: left !important; clear: left !important;
} }
} }
video { video {
@@ -1262,7 +1271,7 @@ export const BoardForm = styled.div`
width: 100%; width: 100%;
height: auto; height: auto;
} }
img { img {
border: none; border: none;
float: left; float: left;
@@ -1270,13 +1279,13 @@ export const BoardForm = styled.div`
max-height: 100px; max-height: 100px;
object-fit: scale-down; object-fit: scale-down;
} }
blockquote { blockquote {
padding-top: 5px; padding-top: 5px;
display: block; display: block;
margin: 10px !important; margin: 10px !important;
} }
.post-link-mobile { .post-link-mobile {
clear: both !important; clear: both !important;
padding: 5px; padding: 5px;
@@ -1284,12 +1293,12 @@ export const BoardForm = styled.div`
margin: -5px; margin: -5px;
display: block !important; display: block !important;
} }
.info-mobile { .info-mobile {
margin-top: 8px; margin-top: 8px;
float: left; float: left;
} }
.button-mobile { .button-mobile {
float: right; float: right;
border-radius: 3px; border-radius: 3px;
@@ -1313,7 +1322,7 @@ export const BoardForm = styled.div`
.file-mobile { .file-mobile {
display: block; display: block;
.file-thumb-mobile { .file-thumb-mobile {
margin-left: 10px !important; margin-left: 10px !important;
margin-right: 10px !important; margin-right: 10px !important;
@@ -1322,7 +1331,7 @@ export const BoardForm = styled.div`
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 15px; margin-top: 15px;
} }
.file-info-mobile { .file-info-mobile {
padding-top: 5px; padding-top: 5px;
text-align: center; text-align: center;
@@ -1335,7 +1344,7 @@ export const BoardForm = styled.div`
video { video {
max-width: 100px; max-width: 100px;
} }
img { img {
border: none; border: none;
float: left; float: left;
@@ -1356,12 +1365,12 @@ export const BoardForm = styled.div`
width: 1em !important; width: 1em !important;
text-align: center !important; text-align: center !important;
outline: none !important; outline: none !important;
transform: rotate(90deg)!important; transform: rotate(90deg) !important;
margin: 4px -5px 0 4px !important; margin: 4px -5px 0 4px !important;
float: left !important; float: left !important;
font-weight: 700 !important; font-weight: 700 !important;
opacity: 1 !important; opacity: 1 !important;
height: .5em !important; height: 0.5em !important;
font-size: 16px !important; font-size: 16px !important;
} }
@@ -1385,7 +1394,6 @@ export const BoardForm = styled.div`
margin: 10px !important; margin: 10px !important;
} }
} }
} }
${({ selectedStyle }) => { ${({ selectedStyle }) => {
@@ -2421,7 +2429,7 @@ export const BoardForm = styled.div`
margin-left: calc((100% - 100vw) / 2); margin-left: calc((100% - 100vw) / 2);
margin-right: calc((100% - 100vw) / 2); margin-right: calc((100% - 100vw) / 2);
} }
.name-block { .name-block {
display: block; display: block;
} }
@@ -2467,10 +2475,10 @@ export const BoardForm = styled.div`
return `.highlighted, .highlighted-click, .highlighted-address { return `.highlighted, .highlighted-click, .highlighted-address {
background-color: #ccc !important; background-color: #ccc !important;
}`; }`;
default: default:
return ''; return '';
} }
}} }}
${({ selectedStyle }) => { ${({ selectedStyle }) => {
@@ -3195,7 +3203,7 @@ export const BoardForm = styled.div`
} }
} }
}`; }`;
default: default:
return ''; return '';
} }
@@ -3207,7 +3215,7 @@ export const Footer = styled.div`
#version { #version {
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-family: "arial"; font-family: 'arial';
} }
@media (min-width: 480px) { @media (min-width: 480px) {
#break { #break {
@@ -3319,9 +3327,9 @@ export const Footer = styled.div`
color: #f30; color: #f30;
} }
}`; }`;
default: default:
return ''; return '';
} }
}} }}
`; `;
src/components/views/All.jsx
+1 -1
View File
@@ -915,7 +915,7 @@ const All = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; (u/ &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
src/components/views/Board.jsx
+11 -11
View File
@@ -990,7 +990,7 @@ const Board = () => {
setIsAdminListOpen(!isAdminListOpen); setIsAdminListOpen(!isAdminListOpen);
}} }}
> >
## Board Admins ## Board Mods
</span> </span>
&nbsp; &nbsp;
<span <span
@@ -1149,13 +1149,13 @@ const Board = () => {
)} )}
<span className='name-block-mobile'> <span className='name-block-mobile'>
<span <span
className='name-mobile capcode' className='name-mobile capcode-admin'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
setIsAdminListOpen(!isAdminListOpen); setIsAdminListOpen(!isAdminListOpen);
}} }}
> >
## Board Admins ## Board Mods
</span> </span>
&nbsp; &nbsp;
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}> <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
@@ -1215,7 +1215,7 @@ const Board = () => {
setIsAdminListOpen(!isAdminListOpen); setIsAdminListOpen(!isAdminListOpen);
}} }}
> >
## Board Admins ## Board Mods
</span> </span>
&nbsp; &nbsp;
<span <span
@@ -1374,13 +1374,13 @@ const Board = () => {
)} )}
<span className='name-block-mobile'> <span className='name-block-mobile'>
<span <span
className='name-mobile capcode' className='name-mobile capcode-admin'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
setIsAdminListOpen(!isAdminListOpen); setIsAdminListOpen(!isAdminListOpen);
}} }}
> >
## Board Admins ## Board Mods
</span> </span>
&nbsp; &nbsp;
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}> <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
@@ -1457,7 +1457,7 @@ const Board = () => {
setIsAdminListOpen(!isAdminListOpen); setIsAdminListOpen(!isAdminListOpen);
}} }}
> >
## Board Admins ## Board Mods
</span> </span>
&nbsp; &nbsp;
<span <span
@@ -1675,13 +1675,13 @@ const Board = () => {
)} )}
<span className='name-block-mobile'> <span className='name-block-mobile'>
<span <span
className='name-mobile capcode' className='name-mobile capcode-admin'
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
setIsAdminListOpen(!isAdminListOpen); setIsAdminListOpen(!isAdminListOpen);
}} }}
> >
## Board Admins ## Board Mods
</span> </span>
&nbsp; &nbsp;
<span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}> <span className='thread-icons-mobile' style={{ float: 'right', marginRight: '18px' }}>
@@ -1941,7 +1941,7 @@ const Board = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; (u/ &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
@@ -1960,7 +1960,7 @@ const Board = () => {
)} )}
</VerifiedAuthor> </VerifiedAuthor>
</span> </span>
) &nbsp; )&nbsp;
<span <span
key={`dt-${index}`} key={`dt-${index}`}
className='date-time' className='date-time'
src/components/views/Catalog.jsx
+1719 -1719
View File
File diff suppressed because it is too large Load Diff
src/components/views/Description.jsx
+717 -717
View File
File diff suppressed because it is too large Load Diff
src/components/views/Rules.jsx
+654 -654
View File
File diff suppressed because it is too large Load Diff
src/components/views/Subscriptions.jsx
+1 -1
View File
@@ -919,7 +919,7 @@ const Subscriptions = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; (u/ &nbsp;(u/
<span <span
key={`pa-${index}`} key={`pa-${index}`}
className='poster-address address-desktop' className='poster-address address-desktop'
src/components/views/Thread.jsx
+1 -1
View File
@@ -1096,7 +1096,7 @@ const Thread = () => {
Anonymous Anonymous
</span> </span>
)} )}
&nbsp; &nbsp; &nbsp;
<span <span
className='poster-address address-desktop' className='poster-address address-desktop'
id='reply-button' id='reply-button'