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

initial threads mockup

Browse Source
This commit is contained in:
plebbitor
2023-02-05 22:15:38 +01:00
parent dc6bed3a56
commit cd5c0116d8
3 changed files with 176 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/post_expand_minus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 B

src/components/Board.jsx
+67 -1
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Container, NavBar, Header, Break, PostForm, TopBar } from './styled/Board.styled';
import { Container, NavBar, Header, Break, PostForm, TopBar, BoardForm } from './styled/Board.styled';
import { useFeed } from '@plebbit/plebbit-react-hooks';
const ImageBanner = () => {
@@ -78,6 +78,72 @@ const Board = () => {
]
<hr />
</TopBar>
<BoardForm id="board-form" name="board-form" action="" method="post">
<div className="board">
<div id="t" className="thread">
<div id="pc" className="post-container op-container">
<div id="p" className="post op">
<span id="sa">
<img alt="H" className="ext-button thread-hide-button" data-cmd="hide" data-id="1-test" src="./post_expand_minus.png" title="Hide thread" />
</span>
<div id="pi" className="post-info">
<input type="checkbox" name="id" value="delete"></input>
<span className="name-block">
<span className="name">Tom</span>
<span className="poster-address">
(User: plebeius.eth)
</span>
</span>
<span className="date-time" data-utc="data">2 weeks ago</span>
<span className="post-number">
<a href="post-link" title="Link to this post">No.</a>
<a href="post-link" title="Reply to this post">00000001</a>
<span>
[
<a className="reply-link" href="post-link">Reply</a>
]
</span>
</span>
<a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
<div id="backlink-id" className="backlink">
<span>
<a className="quote-link" href="post-link">{'>>'}00000002</a>
</span>
</div>
<blockquote>
<span className="quote">
{'>'}imagine being a pleb
</span>
</blockquote>
</div>
</div>
</div>
<div id="pc" className="post-container reply-container">
<div className="side-arrows">{'>>'}</div>
<div className="post-reply">
<div className="post-info">
<input type="checkbox" name="id" value="delete"></input>
<span className="nameblock">
<span className="name">Anonymous</span>
<span className="poster-address">
(User: Qma319kE7rrHNce8vH9fAjPjihUF4EZCaKSK8dBaFtxsVn)
</span>
</span>
<span className="date-time" data-utc="data">2 weeks ago</span>
<span className="post-number">
<a href="post-link" title="Link to this post">No.</a>
<a href="post-link" title="Reply to this post">00000002</a>
</span>
<a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
</div>
<blockquote className="post-message">
I can imagine being a pleb
</blockquote>
</div>
</div>
</div>
</div>
</BoardForm>
</Container>
)
}
src/components/styled/Board.styled.jsx
+109
View File
@@ -120,4 +120,113 @@ export const TopBar = styled.div`
a:hover {
color: red;
}
`;
export const BoardForm = styled.form`
.thread {
margin: 0;
clear: both;
}
.op-container {
display: inline;
}
.op {
display: inline;
}
.post {
margin: 4px 0;
overflow: hidden;
}
.ext-button {
float: left;
margin-right: 5px;
margin-top: -1px;
cursor: pointer;
margin-bottom: -4px;
width: 18px;
height: 18px;
}
img {
border: none;
}
.post-info {
display: block;
width: 100%;
}
.name-block {
display: inline-block;
}
.name {
color: #117743;
font-weight: 700;
}
.post-link a {
text-decoration: none;
color: maroon;
}
.post-link a:hover {
color: red;
}
.reply-link a {
text-decoration: none;
color: #00e;
}
.reply-link a:hover {
color: red;
}
.post-menu-button {
color: #000080;
margin-left: 5px;
text-decoration: none;
line-height: 1em;
display: inline-block;
transition: transform 0.1s;
width: 1em;
height: 1em;
text-align: center;
outline: none;
opacity: 0.8;
}
.backlink {
font-size: 0.8em !important;
display: inline;
padding: 0;
padding-left: 5px;
}
.quote-link a {
color: navy !important;
text-decoration: none;
}
.quote-link a:hover {
color: red;
}
.backlink span {
padding: 0;
}
blockquote {
display: block;
}
.quote {
color: #789922;
}
`;