minor styling
This commit is contained in:
@@ -300,7 +300,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
|
|||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
/>
|
/>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<progress className="progress is-primary" max="100"></progress>
|
<div className="container">
|
||||||
|
<progress className="progress is-primary" max="100"></progress>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="columns container is-mobile is-1-mobile">
|
<div className="columns container is-mobile is-1-mobile">
|
||||||
<div className="column">
|
<div className="column">
|
||||||
@@ -420,7 +422,9 @@ function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
|
|||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
/>
|
/>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<progress className="progress is-primary" max="100"></progress>
|
<div className="container">
|
||||||
|
<progress className="progress is-primary" max="100"></progress>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="columns container is-multiline is-mobile is-1-mobile">
|
<div className="columns container is-multiline is-mobile is-1-mobile">
|
||||||
<div className="column is-full is-flex is-justify-content-center">
|
<div className="column is-full is-flex is-justify-content-center">
|
||||||
@@ -521,7 +525,9 @@ export default function Rankings() {
|
|||||||
<TypeDnD {...{ user, teams, players }} />
|
<TypeDnD {...{ user, teams, players }} />
|
||||||
</TabController>
|
</TabController>
|
||||||
) : (
|
) : (
|
||||||
<progress className="progress is-primary" max="100"></progress>
|
<div className="container">
|
||||||
|
<progress className="progress is-primary" max="100"></progress>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -77,160 +77,170 @@ const TeamPanel = () => {
|
|||||||
<h2 className="subtitle">
|
<h2 className="subtitle">
|
||||||
{activeTeam.location}, {activeTeam.country}
|
{activeTeam.location}, {activeTeam.country}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="box">
|
<div className="panel">
|
||||||
<h2 className="title is-4">Players</h2>
|
<h2 className="panel-heading is-4">Players</h2>
|
||||||
{players ? (
|
<div className="panel-block">
|
||||||
<div className="buttons">
|
{players ? (
|
||||||
{players.map((p) => (
|
<div className="buttons">
|
||||||
|
{players.map((p) => (
|
||||||
|
<button
|
||||||
|
className={
|
||||||
|
"button is-primary is-light " +
|
||||||
|
p.gender +
|
||||||
|
(p.id === player.id ? " is-focused is-active" : "")
|
||||||
|
}
|
||||||
|
key={p.id}
|
||||||
|
onClick={() => {
|
||||||
|
setPlayer(p);
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{p.display_name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
className="button is-success is-light new-player"
|
||||||
|
key="add-player"
|
||||||
|
onClick={() => {
|
||||||
|
setPlayer(newPlayerTemplate);
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="loader" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="panel-block">
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="field is-grouped is-grouped-multiline">
|
||||||
|
<div className="field">
|
||||||
|
<label className="label">name</label>
|
||||||
|
<div className="control">
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={player.display_name}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPlayer({
|
||||||
|
...player,
|
||||||
|
...(player.id === 0 && {
|
||||||
|
username: e.target.value
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\W/g, ""),
|
||||||
|
}),
|
||||||
|
display_name: e.target.value,
|
||||||
|
});
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label className="label">username</label>
|
||||||
|
<div className="control">
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
disabled={player.id !== 0}
|
||||||
|
value={player.username}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPlayer({ ...player, username: e.target.value });
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label className="label">gender</label>
|
||||||
|
<div className="control">
|
||||||
|
<div className="select">
|
||||||
|
<select
|
||||||
|
name="gender"
|
||||||
|
value={player.gender}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPlayer({
|
||||||
|
...player,
|
||||||
|
gender: e.target.value as Gender,
|
||||||
|
});
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value={undefined}></option>
|
||||||
|
<option value="fmp">FMP</option>
|
||||||
|
<option value="mmp">MMP</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label className="label">
|
||||||
|
number <small>(optional)</small>
|
||||||
|
</label>
|
||||||
|
<div className="control">
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
type="text"
|
||||||
|
value={player.number || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPlayer({ ...player, number: e.target.value });
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label className="label">
|
||||||
|
email <small>(optional)</small>
|
||||||
|
</label>
|
||||||
|
<div className="control">
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
type="email"
|
||||||
|
value={player.email || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPlayer({ ...player, email: e.target.value });
|
||||||
|
setError({ ok: true, message: "" });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{error?.message && (
|
||||||
|
<p
|
||||||
|
className={
|
||||||
|
"help" + (error.ok ? " is-success" : " is-danger")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{error.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="field is-grouped is-grouped-centered">
|
||||||
<button
|
<button
|
||||||
className={
|
className={
|
||||||
"button is-primary is-light " +
|
"button is-light" +
|
||||||
p.gender +
|
(player.id === 0 ? " is-success" : " is-link")
|
||||||
(p.id === player.id ? " is-focused is-active" : "")
|
|
||||||
}
|
}
|
||||||
key={p.id}
|
|
||||||
onClick={() => {
|
|
||||||
setPlayer(p);
|
|
||||||
setError({ ok: true, message: "" });
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{p.display_name}
|
{player.id === 0 ? "add player" : "modify player"}
|
||||||
</button>
|
</button>
|
||||||
))}
|
{player.id !== 0 && (
|
||||||
<button
|
<button
|
||||||
className="button is-success is-light new-player"
|
className="button is-danger is-light"
|
||||||
key="add-player"
|
onClick={handleDisable}
|
||||||
onClick={() => {
|
>
|
||||||
setPlayer(newPlayerTemplate);
|
remove player
|
||||||
setError({ ok: true, message: "" });
|
</button>
|
||||||
}}
|
)}
|
||||||
>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span className="loader" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form className="container block" onSubmit={handleSubmit}>
|
|
||||||
<div className="field">
|
|
||||||
<label className="label">name</label>
|
|
||||||
<div className="control">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
value={player.display_name}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPlayer({
|
|
||||||
...player,
|
|
||||||
...(player.id === 0 && {
|
|
||||||
username: e.target.value
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/\W/g, ""),
|
|
||||||
}),
|
|
||||||
display_name: e.target.value,
|
|
||||||
});
|
|
||||||
setError({ ok: true, message: "" });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label className="label">username</label>
|
|
||||||
<div className="control">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
disabled={player.id !== 0}
|
|
||||||
value={player.username}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPlayer({ ...player, username: e.target.value });
|
|
||||||
setError({ ok: true, message: "" });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label className="label">gender</label>
|
|
||||||
<div className="control">
|
|
||||||
<div className="select">
|
|
||||||
<select
|
|
||||||
name="gender"
|
|
||||||
value={player.gender}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPlayer({
|
|
||||||
...player,
|
|
||||||
gender: e.target.value as Gender,
|
|
||||||
});
|
|
||||||
setError({ ok: true, message: "" });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value={undefined}></option>
|
|
||||||
<option value="fmp">FMP</option>
|
|
||||||
<option value="mmp">MMP</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div className="field">
|
</div>
|
||||||
<label className="label">number (optional)</label>
|
|
||||||
<div className="control">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="text"
|
|
||||||
value={player.number || ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPlayer({ ...player, number: e.target.value });
|
|
||||||
setError({ ok: true, message: "" });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="field">
|
|
||||||
<label className="label">email (optional)</label>
|
|
||||||
<div className="control">
|
|
||||||
<input
|
|
||||||
className="input"
|
|
||||||
type="email"
|
|
||||||
value={player.email || ""}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPlayer({ ...player, email: e.target.value });
|
|
||||||
setError({ ok: true, message: "" });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{error?.message && (
|
|
||||||
<p
|
|
||||||
className={
|
|
||||||
"help" + (error.ok ? " is-success" : " is-danger")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{error.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="field is-grouped">
|
|
||||||
<button
|
|
||||||
className={
|
|
||||||
"button is-light" +
|
|
||||||
(player.id === 0 ? " is-success" : " is-link")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{player.id === 0 ? "add player" : "modify player"}
|
|
||||||
</button>
|
|
||||||
{player.id !== 0 && (
|
|
||||||
<button
|
|
||||||
className="button is-danger is-light"
|
|
||||||
onClick={handleDisable}
|
|
||||||
>
|
|
||||||
remove player
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section className="section">
|
<section className="section">
|
||||||
|
|||||||
Reference in New Issue
Block a user