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:
|
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.
|
- 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.
|
- 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 for image-upload and whatever
|
- Admins are users with 0cd and access to `Admintools`in their User Menu
|
||||||
- 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
|
- 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.
|
- 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`
|
- 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
|
- 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 (
|
return (
|
||||||
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
<div className="content">
|
||||||
{resp && (
|
{resp && (
|
||||||
<div className="respbox">
|
<div className="respbox">
|
||||||
{resp.split('\n').map((line) => (
|
{resp.split('\n').map((line) => (
|
||||||
|
|
|
@ -186,7 +186,7 @@ function Converter() {
|
||||||
const gimpLink = <a href="https://www.gimp.org">GIMP</a>;
|
const gimpLink = <a href="https://www.gimp.org">GIMP</a>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div className="content">
|
||||||
<div>{t`Choose Canvas`}:
|
<div>{t`Choose Canvas`}:
|
||||||
<select
|
<select
|
||||||
value={selectedCanvas}
|
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`;
|
: `Status: ${cleanerstats.method} from ${cleanerstats.tl} to ${cleanerstats.br} on canvas ${canvases[cleanerstats.canvasId].ident} to ${cleanerstats.percent} done`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
<div className="content">
|
||||||
{resp && (
|
{resp && (
|
||||||
<div className="respbox">
|
<div className="respbox">
|
||||||
{resp.split('\n').map((line) => (
|
{resp.split('\n').map((line) => (
|
||||||
|
|
|
@ -96,173 +96,177 @@ function ModWatchtools() {
|
||||||
const cidColumn = (types) ? (types.indexOf('cid')) : -1;
|
const cidColumn = (types) ? (types.indexOf('cid')) : -1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
|
<>
|
||||||
{resp && (
|
<div className="content">
|
||||||
<div className="respbox">
|
{resp && (
|
||||||
{resp.split('\n').map((line) => (
|
<div className="respbox">
|
||||||
<p key={line.slice(0, 3)}>
|
{resp.split('\n').map((line) => (
|
||||||
{line}
|
<p key={line.slice(0, 3)}>
|
||||||
</p>
|
{line}
|
||||||
))}
|
</p>
|
||||||
<span
|
))}
|
||||||
role="button"
|
<span
|
||||||
tabIndex={-1}
|
role="button"
|
||||||
className="modallink"
|
tabIndex={-1}
|
||||||
onClick={() => setResp(null)}
|
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`}
|
{Object.keys(canvases)
|
||||||
</span>
|
.filter((c) => !canvases[c].v)
|
||||||
</div>
|
.map((canvas) => (
|
||||||
)}
|
<option
|
||||||
<p>{t`Check who placed in an area`}</p>
|
key={canvas}
|
||||||
<p>{t`Canvas`}:
|
value={canvas}
|
||||||
<select
|
>
|
||||||
value={selectedCanvas}
|
{canvases[canvas].title}
|
||||||
onChange={(e) => {
|
</option>
|
||||||
const sel = e.target;
|
))}
|
||||||
selectCanvas(sel.options[sel.selectedIndex].value);
|
</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) => (
|
{(submitting) ? '...' : t`Get Pixels`}
|
||||||
<option
|
</button>
|
||||||
key={canvas}
|
<button
|
||||||
value={canvas}
|
type="button"
|
||||||
>
|
onClick={() => {
|
||||||
{canvases[canvas].title}
|
if (submitting) {
|
||||||
</option>
|
return;
|
||||||
))}
|
}
|
||||||
</select>
|
setSubmitting(true);
|
||||||
{` ${t`Interval`}: `}
|
submitWatchAction(
|
||||||
<input
|
'summary',
|
||||||
value={interval}
|
selectedCanvas,
|
||||||
style={{
|
tlcoords,
|
||||||
display: 'inline-block',
|
brcoords,
|
||||||
width: '100%',
|
interval,
|
||||||
maxWidth: '5em',
|
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"
|
{(submitting) ? '...' : t`Get Users`}
|
||||||
onChange={(evt) => {
|
</button>
|
||||||
const newInterval = evt.target.value.trim();
|
</div>
|
||||||
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>
|
|
||||||
<br />
|
<br />
|
||||||
{(rows && columns && types) && (
|
{(rows && columns && types) && (
|
||||||
<React.Fragment key="pxltable">
|
<React.Fragment key="pxltable">
|
||||||
|
@ -391,7 +395,7 @@ function ModWatchtools() {
|
||||||
</table>
|
</table>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,7 +30,7 @@ function Modtools() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div className="content">
|
||||||
{parts.map((part, ind) => (
|
{parts.map((part, ind) => (
|
||||||
<React.Fragment key={part}>
|
<React.Fragment key={part}>
|
||||||
<span
|
<span
|
||||||
|
@ -45,8 +45,8 @@ function Modtools() {
|
||||||
&& <span className="hdivider" />}
|
&& <span className="hdivider" />}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
|
<div className="modaldivider" />
|
||||||
</div>
|
</div>
|
||||||
<div className="modaldivider" />
|
|
||||||
{Content && <Content />}
|
{Content && <Content />}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -20,7 +20,7 @@ const Rankings = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div className="content">
|
||||||
<span
|
<span
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
|
|
|
@ -21,7 +21,7 @@ const Tabs = ({ children, activeTab, setActiveTab }) => (
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</ol>
|
</ol>
|
||||||
<div className="content">
|
<div className="tab-content">
|
||||||
{children.map((child) => {
|
{children.map((child) => {
|
||||||
if (!child.props || child.props.label !== activeTab) {
|
if (!child.props || child.props.label !== activeTab) {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
|
|
@ -56,7 +56,7 @@ const UserAreaContent = () => {
|
||||||
const Area = AREAS[area];
|
const Area = AREAS[area];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ textAlign: 'center' }}>
|
<div className="content">
|
||||||
<UserMessages />
|
<UserMessages />
|
||||||
<Stat
|
<Stat
|
||||||
text={t`Todays Placed Pixels`}
|
text={t`Todays Placed Pixels`}
|
||||||
|
|
|
@ -132,6 +132,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-list {
|
.tab-list {
|
||||||
|
font-size: 16px;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
@ -269,13 +270,6 @@ tr:nth-child(even) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.win-content {
|
|
||||||
position: relative;
|
|
||||||
width: calc(100% - 3px);
|
|
||||||
height: calc(100% - 28px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextmenu {
|
.contextmenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -536,6 +530,19 @@ tr:nth-child(even) {
|
||||||
overflow-y: auto;
|
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 {
|
.Alert {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
@ -551,12 +558,6 @@ tr:nth-child(even) {
|
||||||
.content {
|
.content {
|
||||||
padding-left: 5%;
|
padding-left: 5%;
|
||||||
padding-right: 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;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user