mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
added complete footer in all views
This commit is contained in:
plebbitor
@@ -53,7 +53,7 @@ const createQuotelink = (handlequoteclick, comment, children) => {
|
||||
|
||||
|
||||
const Post = ({ content, handlequoteclick, comment }) => {
|
||||
const doubleNewlineContent = content.replaceAll(/\n(?!\n)/g, '\n\n');
|
||||
const doubleNewlineContent = content?.replaceAll(/\n(?!\n)/g, '\n\n');
|
||||
const sanitizedContent = DOMPurify.sanitize(doubleNewlineContent);
|
||||
|
||||
return (
|
||||
|
||||
@@ -7,6 +7,10 @@ export const Container = styled.div`
|
||||
margin-top: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
||||
.footer-links {
|
||||
text-decoration: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavBar = styled.div`
|
||||
@@ -1535,6 +1539,7 @@ export const TopBar = styled.div`
|
||||
|
||||
export const BoardForm = styled.div`
|
||||
@media (min-width: 480px) {
|
||||
margin-bottom: 25px;
|
||||
.thread-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -2783,4 +2783,119 @@ export const BoardForm = styled.div`
|
||||
}
|
||||
}}
|
||||
}
|
||||
`;
|
||||
|
||||
export const Footer = styled.div`
|
||||
#version {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-family: "arial";
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
#break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
#version {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin-top: 60px;
|
||||
|
||||
.style-changer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#version {
|
||||
margin-top: -2em;
|
||||
}
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
return `
|
||||
.footer-links {
|
||||
a {
|
||||
color: #00e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Yotsuba-B':
|
||||
return `
|
||||
.footer-links {
|
||||
a {
|
||||
color: #34345c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #d00;
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Futaba':
|
||||
return `
|
||||
.footer-links {
|
||||
a {
|
||||
color: #00e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
return `
|
||||
.footer-links {
|
||||
a {
|
||||
color: #34345c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #d00;
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Tomorrow':
|
||||
return `
|
||||
.footer-links {
|
||||
a {
|
||||
color: #81a2be;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #5f89ac;
|
||||
}
|
||||
}`;
|
||||
|
||||
case 'Photon':
|
||||
return `
|
||||
.footer-links {
|
||||
a {
|
||||
color: #f60;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f30;
|
||||
}
|
||||
}`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
@@ -7,6 +7,7 @@ import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
@@ -932,14 +933,77 @@ const Board = () => {
|
||||
)}
|
||||
</div>
|
||||
</BoardForm>
|
||||
<div style={{
|
||||
textAlign: "center",
|
||||
fontSize: "11px",
|
||||
marginTop: "2em",
|
||||
marginBottom: "2em",
|
||||
}}>
|
||||
plebchan v0.1.0. GPL-2.0
|
||||
</div>
|
||||
<Footer selectedStyle={selectedStyle}>
|
||||
<Break id="break" selectedStyle={selectedStyle} style={{
|
||||
marginTop: "-36px",
|
||||
width: "100%",
|
||||
}} />
|
||||
<Break selectedStyle={selectedStyle} style={{
|
||||
width: "100%",
|
||||
}} />
|
||||
<span className="style-changer" style={{
|
||||
float: "right",
|
||||
marginTop: "2px",
|
||||
}}>
|
||||
Style:
|
||||
|
||||
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
|
||||
<option value="Yotsuba">Yotsuba</option>
|
||||
<option value="Yotsuba-B">Yotsuba B</option>
|
||||
<option value="Futaba">Futaba</option>
|
||||
<option value="Burichan">Burichan</option>
|
||||
<option value="Tomorrow">Tomorrow</option>
|
||||
<option value="Photon">Photon</option>
|
||||
</select>
|
||||
</span>
|
||||
<NavBar selectedStyle={selectedStyle} style={{
|
||||
marginTop: "42px",
|
||||
}}>
|
||||
<>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<Link key={`a-${subplebbit.address}`}
|
||||
to={`/p/${subplebbit.address}`}
|
||||
onClick={() => {
|
||||
setSelectedTitle(subplebbit.title);
|
||||
setSelectedAddress(subplebbit.address);
|
||||
}}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
]
|
||||
</span>
|
||||
))}
|
||||
<span className="nav">
|
||||
[
|
||||
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
]
|
||||
[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
)}>Home</Link>
|
||||
]
|
||||
</span>
|
||||
</>
|
||||
</NavBar>
|
||||
<div id="version">
|
||||
plebchan v0.1.0. GPL-2.0
|
||||
</div>
|
||||
<div className="footer-links"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
fontSize: "x-small",
|
||||
fontFamily: "arial",
|
||||
marginTop: "10px",
|
||||
marginBottom: "15px",
|
||||
}}>
|
||||
<a href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
|
||||
•
|
||||
<a href="https://github.com/plebbit" target="_blank" rel="noopener noreferrer">GitHub</a>
|
||||
•
|
||||
<a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
|
||||
•
|
||||
<a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
|
||||
</div>
|
||||
</Footer>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@ import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
|
||||
import { Threads } from '../styled/Catalog.styled';
|
||||
import { TopBar } from '../styled/Thread.styled';
|
||||
import { TopBar, Footer } from '../styled/Thread.styled';
|
||||
import CatalogLoader from '../CatalogLoader';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
@@ -417,15 +417,78 @@ const Catalog = () => {
|
||||
</InfiniteScroll>
|
||||
)}
|
||||
</Threads>
|
||||
<Footer selectedStyle={selectedStyle}>
|
||||
<Break id="break" selectedStyle={selectedStyle} style={{
|
||||
marginTop: "-36px",
|
||||
width: "100%",
|
||||
}} />
|
||||
<Break selectedStyle={selectedStyle} style={{
|
||||
width: "100%",
|
||||
}} />
|
||||
<span className="style-changer" style={{
|
||||
float: "right",
|
||||
marginTop: "2px",
|
||||
}}>
|
||||
Style:
|
||||
|
||||
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
|
||||
<option value="Yotsuba">Yotsuba</option>
|
||||
<option value="Yotsuba-B">Yotsuba B</option>
|
||||
<option value="Futaba">Futaba</option>
|
||||
<option value="Burichan">Burichan</option>
|
||||
<option value="Tomorrow">Tomorrow</option>
|
||||
<option value="Photon">Photon</option>
|
||||
</select>
|
||||
</span>
|
||||
<NavBar selectedStyle={selectedStyle} style={{
|
||||
marginTop: "42px",
|
||||
}}>
|
||||
<>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<Link key={`a-${subplebbit.address}`}
|
||||
to={`/p/${subplebbit.address}`}
|
||||
onClick={() => {
|
||||
setSelectedTitle(subplebbit.title);
|
||||
setSelectedAddress(subplebbit.address);
|
||||
}}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
]
|
||||
</span>
|
||||
))}
|
||||
<span className="nav">
|
||||
[
|
||||
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
]
|
||||
[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
)}>Home</Link>
|
||||
]
|
||||
</span>
|
||||
</>
|
||||
</NavBar>
|
||||
<div id="version">
|
||||
plebchan v0.1.0. GPL-2.0
|
||||
</div>
|
||||
<div className="footer-links"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
fontSize: "x-small",
|
||||
fontFamily: "arial",
|
||||
marginTop: "10px",
|
||||
marginBottom: "15px",
|
||||
}}>
|
||||
<a href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
|
||||
•
|
||||
<a href="https://github.com/plebbit" target="_blank" rel="noopener noreferrer">GitHub</a>
|
||||
•
|
||||
<a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
|
||||
•
|
||||
<a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
|
||||
</div>
|
||||
</Footer>
|
||||
</Container>
|
||||
<div style={{
|
||||
textAlign: "center",
|
||||
fontSize: "11px",
|
||||
marginTop: "2em",
|
||||
marginBottom: "2em",
|
||||
}}>
|
||||
plebchan v0.1.0. GPL-2.0
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAccount, useComment, usePublishComment } from '@plebbit/plebbit-reac
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar, BoardForm } from '../styled/Thread.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
@@ -909,8 +909,8 @@ const Thread = () => {
|
||||
</BottomBar>
|
||||
{comment.replyCount > 2 ? (
|
||||
<div id="bottombar-mobile">
|
||||
<TopBar selectedStyle={selectedStyle} style={{marginTop: "20px"}}>
|
||||
<hr />
|
||||
<hr style={{marginTop: "30px"}} />
|
||||
<TopBar selectedStyle={selectedStyle} style={{marginTop: "-5px"}}>
|
||||
<span className="style-changer">
|
||||
Style:
|
||||
|
||||
@@ -977,14 +977,77 @@ const Thread = () => {
|
||||
<PostLoader />
|
||||
)}
|
||||
</BoardForm>
|
||||
<div style={{
|
||||
textAlign: "center",
|
||||
fontSize: "11px",
|
||||
marginTop: "2em",
|
||||
marginBottom: "2em",
|
||||
}}>
|
||||
plebchan v0.1.0. GPL-2.0
|
||||
</div>
|
||||
<Footer selectedStyle={selectedStyle}>
|
||||
<Break id="break" selectedStyle={selectedStyle} style={{
|
||||
marginTop: "-36px",
|
||||
width: "100%",
|
||||
}} />
|
||||
<Break selectedStyle={selectedStyle} style={{
|
||||
width: "100%",
|
||||
}} />
|
||||
<span className="style-changer" style={{
|
||||
float: "right",
|
||||
marginTop: "2px",
|
||||
}}>
|
||||
Style:
|
||||
|
||||
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
|
||||
<option value="Yotsuba">Yotsuba</option>
|
||||
<option value="Yotsuba-B">Yotsuba B</option>
|
||||
<option value="Futaba">Futaba</option>
|
||||
<option value="Burichan">Burichan</option>
|
||||
<option value="Tomorrow">Tomorrow</option>
|
||||
<option value="Photon">Photon</option>
|
||||
</select>
|
||||
</span>
|
||||
<NavBar selectedStyle={selectedStyle} style={{
|
||||
marginTop: "42px",
|
||||
}}>
|
||||
<>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<Link key={`a-${subplebbit.address}`}
|
||||
to={`/p/${subplebbit.address}`}
|
||||
onClick={() => {
|
||||
setSelectedTitle(subplebbit.title);
|
||||
setSelectedAddress(subplebbit.address);
|
||||
}}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
]
|
||||
</span>
|
||||
))}
|
||||
<span className="nav">
|
||||
[
|
||||
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
]
|
||||
[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
)}>Home</Link>
|
||||
]
|
||||
</span>
|
||||
</>
|
||||
</NavBar>
|
||||
<div id="version">
|
||||
plebchan v0.1.0. GPL-2.0
|
||||
</div>
|
||||
<div className="footer-links"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
fontSize: "x-small",
|
||||
fontFamily: "arial",
|
||||
marginTop: "10px",
|
||||
marginBottom: "15px",
|
||||
}}>
|
||||
<a href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
|
||||
•
|
||||
<a href="https://github.com/plebbit" target="_blank" rel="noopener noreferrer">GitHub</a>
|
||||
•
|
||||
<a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
|
||||
•
|
||||
<a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
|
||||
</div>
|
||||
</Footer>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user