mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
added post form
This commit is contained in:
plebbitor
@@ -367,6 +367,469 @@ export const Break = styled.hr`
|
||||
}}
|
||||
`;
|
||||
|
||||
export const PostFormLink = styled.div`
|
||||
display: ${props => (props.showPostFormLink ? 'block' : 'none')};
|
||||
`;
|
||||
|
||||
export const PostFormTable = styled.table`
|
||||
display: ${props => (props.showPostForm ? 'table' : 'none')};
|
||||
width: 468px;
|
||||
border-spacing: 1px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #ea8;
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
border: 1px solid #800;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Yotsuba B':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #98e;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
border: 1px solid #000;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Futaba':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #ea8;
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Burichan':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #98e;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Tomorrow':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #282a2e;
|
||||
color: #c5c8c6;
|
||||
font-weight: 700;
|
||||
border: 1px solid #111;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
|
||||
case 'Photon':
|
||||
return `tbody > tr > td:first-child {
|
||||
background-color: #ddd;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
tbody > tr > td > input[type="text"] {
|
||||
width: 244px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"] > tbody textarea {
|
||||
margin: 0;
|
||||
margin-right: 2px;
|
||||
padding: 2px 4px 3px;
|
||||
border: 1px solid #aaa;
|
||||
outline: none;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 292px;
|
||||
margin-bottom: -3px;
|
||||
outline: none;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
#t-root {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
border: 1px solid #777;
|
||||
margin: 2px 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#t-resp {
|
||||
width: 254px;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
padding: 0px 2px;
|
||||
font-family: monospace;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#t-help {
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 0px 0px 0px 6px;
|
||||
vertical-align: middle;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#t-cnt {
|
||||
height: 80px;
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
}`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
|
||||
export const PostForm = styled.form`
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
|
||||
Reference in New Issue
Block a user