forked from ppfun/pixelplanet
change stylings
This commit is contained in:
parent
53b9aeeec7
commit
eefa210ed0
|
@ -116,9 +116,9 @@ Configuration takes place in the environment variables that are defined in ecosy
|
|||
Notes:
|
||||
|
||||
- HOST / PORT is the host on which the ppfun server is listening. In example: If you have a reverse proxy on the same machine, HOST should still be unset or localhost, because it's where the proxy forwards to.
|
||||
- to be able to use USE_PROXYCHECK effectively, you have to have an account on proxycheck.io and PROXYCHECK_KEY set.
|
||||
- Admins are users with 0cd and access to `Admintools`in their User Menu for image-upload and whatever
|
||||
- You can find out the id of a user by looking into the logs (i.e. `info: {ip} / {id} wants to place 2 in (1701, -8315)`) when he places a pixel or by checking the MySql Users database
|
||||
- to be able to use USE_PROXYCHECK you have to have an account on proxycheck.io and set PROXYCHECK_KEY.
|
||||
- Admins are users with 0cd and access to `Admintools`in their User Menu
|
||||
- You can find out the id of a user by wiriting a message in chat and pinging
|
||||
- pixelplanet uses the unix command sendmail for sending verification and password reset mails. If you don't want to set up your own mail server, look into [ssmtp](https://wiki.archlinux.org/title/SSMTP), which provides a sendmail interface that forwards to other providers like gmail.
|
||||
- default configuartion values can be seen in `src/core/config.js`
|
||||
- The HTML for SocialMedia logins is in src/componets/UserAreaModal.js , delete stuff from there if you don't need it. The HTML for the Help Screen is in src/components/HelpModal.js
|
||||
|
|
|
@ -84,7 +84,7 @@ function Admintools() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
||||
<div className="content">
|
||||
{resp && (
|
||||
<div className="respbox">
|
||||
{resp.split('\n').map((line) => (
|
||||
|
|
|
@ -186,7 +186,7 @@ function Converter() {
|
|||
const gimpLink = <a href="https://www.gimp.org">GIMP</a>;
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div className="content">
|
||||
<div>{t`Choose Canvas`}:
|
||||
<select
|
||||
value={selectedCanvas}
|
||||
|
|
|
@ -215,7 +215,7 @@ function ModCanvastools() {
|
|||
: `Status: ${cleanerstats.method} from ${cleanerstats.tl} to ${cleanerstats.br} on canvas ${canvases[cleanerstats.canvasId].ident} to ${cleanerstats.percent} done`;
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
||||
<div className="content">
|
||||
{resp && (
|
||||
<div className="respbox">
|
||||
{resp.split('\n').map((line) => (
|
||||
|
|
|
@ -96,173 +96,177 @@ function ModWatchtools() {
|
|||
const cidColumn = (types) ? (types.indexOf('cid')) : -1;
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
||||
{resp && (
|
||||
<div className="respbox">
|
||||
{resp.split('\n').map((line) => (
|
||||
<p key={line.slice(0, 3)}>
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className="modallink"
|
||||
onClick={() => setResp(null)}
|
||||
<>
|
||||
<div className="content">
|
||||
{resp && (
|
||||
<div className="respbox">
|
||||
{resp.split('\n').map((line) => (
|
||||
<p key={line.slice(0, 3)}>
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className="modallink"
|
||||
onClick={() => setResp(null)}
|
||||
>
|
||||
{t`Close`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<p>{t`Check who placed in an area`}</p>
|
||||
<p>{t`Canvas`}:
|
||||
<select
|
||||
value={selectedCanvas}
|
||||
onChange={(e) => {
|
||||
const sel = e.target;
|
||||
selectCanvas(sel.options[sel.selectedIndex].value);
|
||||
}}
|
||||
>
|
||||
{t`Close`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<p>{t`Check who placed in an area`}</p>
|
||||
<p>{t`Canvas`}:
|
||||
<select
|
||||
value={selectedCanvas}
|
||||
onChange={(e) => {
|
||||
const sel = e.target;
|
||||
selectCanvas(sel.options[sel.selectedIndex].value);
|
||||
{Object.keys(canvases)
|
||||
.filter((c) => !canvases[c].v)
|
||||
.map((canvas) => (
|
||||
<option
|
||||
key={canvas}
|
||||
value={canvas}
|
||||
>
|
||||
{canvases[canvas].title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{` ${t`Interval`}: `}
|
||||
<input
|
||||
value={interval}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '5em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="15m"
|
||||
onChange={(evt) => {
|
||||
const newInterval = evt.target.value.trim();
|
||||
selectInterval(newInterval);
|
||||
keepState.interval = newInterval;
|
||||
}}
|
||||
/>
|
||||
{` ${t`IID (optional)`}: `}
|
||||
<input
|
||||
value={iid}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '10em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="xxxx-xxxxx-xxxx"
|
||||
onChange={(evt) => {
|
||||
const newIid = evt.target.value.trim();
|
||||
selectIid(newIid);
|
||||
keepState.iid = newIid;
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
{t`Top-left corner`} (X_Y):
|
||||
<input
|
||||
value={tlcoords}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '15em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="X_Y"
|
||||
onChange={(evt) => {
|
||||
const co = evt.target.value.trim();
|
||||
selectTLCoords(co);
|
||||
keepState.tlcoords = co;
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
{t`Bottom-right corner`} (X_Y):
|
||||
<input
|
||||
value={brcoords}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '15em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="X_Y"
|
||||
onChange={(evt) => {
|
||||
const co = evt.target.value.trim();
|
||||
selectBRCoords(co);
|
||||
keepState.brcoords = co;
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (submitting) {
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
submitWatchAction(
|
||||
'all',
|
||||
selectedCanvas,
|
||||
tlcoords,
|
||||
brcoords,
|
||||
interval,
|
||||
iid,
|
||||
(ret) => {
|
||||
setSubmitting(false);
|
||||
setResp(ret.info);
|
||||
if (ret.rows) {
|
||||
setSortBy(0);
|
||||
setTable({
|
||||
columns: ret.columns,
|
||||
types: ret.types,
|
||||
rows: ret.rows,
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
{Object.keys(canvases).filter((c) => !canvases[c].v).map((canvas) => (
|
||||
<option
|
||||
key={canvas}
|
||||
value={canvas}
|
||||
>
|
||||
{canvases[canvas].title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{` ${t`Interval`}: `}
|
||||
<input
|
||||
value={interval}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '5em',
|
||||
{(submitting) ? '...' : t`Get Pixels`}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (submitting) {
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
submitWatchAction(
|
||||
'summary',
|
||||
selectedCanvas,
|
||||
tlcoords,
|
||||
brcoords,
|
||||
interval,
|
||||
iid,
|
||||
(ret) => {
|
||||
setSubmitting(false);
|
||||
setResp(ret.info);
|
||||
if (ret.rows) {
|
||||
setSortBy(0);
|
||||
setTable({
|
||||
columns: ret.columns,
|
||||
types: ret.types,
|
||||
rows: ret.rows,
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
type="text"
|
||||
placeholder="15m"
|
||||
onChange={(evt) => {
|
||||
const newInterval = evt.target.value.trim();
|
||||
selectInterval(newInterval);
|
||||
keepState.interval = newInterval;
|
||||
}}
|
||||
/>
|
||||
{` ${t`IID (optional)`}: `}
|
||||
<input
|
||||
value={iid}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '10em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="xxxx-xxxxx-xxxx"
|
||||
onChange={(evt) => {
|
||||
const newIid = evt.target.value.trim();
|
||||
selectIid(newIid);
|
||||
keepState.iid = newIid;
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
{t`Top-left corner`} (X_Y):
|
||||
<input
|
||||
value={tlcoords}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '15em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="X_Y"
|
||||
onChange={(evt) => {
|
||||
const co = evt.target.value.trim();
|
||||
selectTLCoords(co);
|
||||
keepState.tlcoords = co;
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
{t`Bottom-right corner`} (X_Y):
|
||||
<input
|
||||
value={brcoords}
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
maxWidth: '15em',
|
||||
}}
|
||||
type="text"
|
||||
placeholder="X_Y"
|
||||
onChange={(evt) => {
|
||||
const co = evt.target.value.trim();
|
||||
selectBRCoords(co);
|
||||
keepState.brcoords = co;
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (submitting) {
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
submitWatchAction(
|
||||
'all',
|
||||
selectedCanvas,
|
||||
tlcoords,
|
||||
brcoords,
|
||||
interval,
|
||||
iid,
|
||||
(ret) => {
|
||||
setSubmitting(false);
|
||||
setResp(ret.info);
|
||||
if (ret.rows) {
|
||||
setSortBy(0);
|
||||
setTable({
|
||||
columns: ret.columns,
|
||||
types: ret.types,
|
||||
rows: ret.rows,
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
{(submitting) ? '...' : t`Get Pixels`}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (submitting) {
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
submitWatchAction(
|
||||
'summary',
|
||||
selectedCanvas,
|
||||
tlcoords,
|
||||
brcoords,
|
||||
interval,
|
||||
iid,
|
||||
(ret) => {
|
||||
setSubmitting(false);
|
||||
setResp(ret.info);
|
||||
if (ret.rows) {
|
||||
setSortBy(0);
|
||||
setTable({
|
||||
columns: ret.columns,
|
||||
types: ret.types,
|
||||
rows: ret.rows,
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
{(submitting) ? '...' : t`Get Users`}
|
||||
</button>
|
||||
>
|
||||
{(submitting) ? '...' : t`Get Users`}
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
{(rows && columns && types) && (
|
||||
<React.Fragment key="pxltable">
|
||||
|
@ -391,7 +395,7 @@ function ModWatchtools() {
|
|||
</table>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@ function Modtools() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div className="content">
|
||||
{parts.map((part, ind) => (
|
||||
<React.Fragment key={part}>
|
||||
<span
|
||||
|
@ -45,8 +45,8 @@ function Modtools() {
|
|||
&& <span className="hdivider" />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
<div className="modaldivider" />
|
||||
</div>
|
||||
<div className="modaldivider" />
|
||||
{Content && <Content />}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -20,7 +20,7 @@ const Rankings = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="content">
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
|
|
|
@ -21,7 +21,7 @@ const Tabs = ({ children, activeTab, setActiveTab }) => (
|
|||
);
|
||||
})}
|
||||
</ol>
|
||||
<div className="content">
|
||||
<div className="tab-content">
|
||||
{children.map((child) => {
|
||||
if (!child.props || child.props.label !== activeTab) {
|
||||
return undefined;
|
||||
|
|
|
@ -56,7 +56,7 @@ const UserAreaContent = () => {
|
|||
const Area = AREAS[area];
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div className="content">
|
||||
<UserMessages />
|
||||
<Stat
|
||||
text={t`Todays Placed Pixels`}
|
||||
|
|
|
@ -132,6 +132,7 @@ a:hover {
|
|||
}
|
||||
|
||||
.tab-list {
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
@ -269,13 +270,6 @@ tr:nth-child(even) {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.win-content {
|
||||
position: relative;
|
||||
width: calc(100% - 3px);
|
||||
height: calc(100% - 28px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
|
@ -536,6 +530,19 @@ tr:nth-child(even) {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.win-content {
|
||||
position: relative;
|
||||
width: calc(100% - 3px);
|
||||
height: calc(100% - 28px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content, .win-content {
|
||||
color: hsla(0, 0%, 0%, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.Alert {
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
|
@ -551,12 +558,6 @@ tr:nth-child(even) {
|
|||
.content {
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
color: hsla(0, 0%, 0%, 0.6);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user