improve spacing
This commit is contained in:
@@ -70,158 +70,169 @@ const TeamPanel = () => {
|
||||
(team) => team.id == teams?.activeTeam
|
||||
)[0];
|
||||
return (
|
||||
<section className="section">
|
||||
<h1 className="title">{activeTeam.name}</h1>
|
||||
<h2 className="subtitle">
|
||||
{activeTeam.location}, {activeTeam.country}
|
||||
</h2>
|
||||
<div className="box">
|
||||
<h2 className="title is-4">Players</h2>
|
||||
{players ? (
|
||||
<div className="buttons">
|
||||
{players.map((p) => (
|
||||
<>
|
||||
<section className="section">
|
||||
<h1 className="title">{activeTeam.name}</h1>
|
||||
<h2 className="subtitle">
|
||||
{activeTeam.location}, {activeTeam.country}
|
||||
</h2>
|
||||
<div className="box">
|
||||
<h2 className="title is-4">Players</h2>
|
||||
{players ? (
|
||||
<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-primary is-light " +
|
||||
p.gender +
|
||||
(p.id === player.id ? " is-focused is-active" : "")
|
||||
}
|
||||
key={p.id}
|
||||
className="button is-success is-light new-player"
|
||||
key="add-player"
|
||||
onClick={() => {
|
||||
setPlayer(p);
|
||||
setPlayer(newPlayerTemplate);
|
||||
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>
|
||||
) : (
|
||||
<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}
|
||||
<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, gender: e.target.value as Gender });
|
||||
setPlayer({
|
||||
...player,
|
||||
...(player.id === 0 && {
|
||||
username: e.target.value
|
||||
.toLowerCase()
|
||||
.replace(/\W/g, ""),
|
||||
}),
|
||||
display_name: e.target.value,
|
||||
});
|
||||
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 (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 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>
|
||||
<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 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>
|
||||
{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 && (
|
||||
<div className="field">
|
||||
<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-danger is-light"
|
||||
onClick={handleDisable}
|
||||
className={
|
||||
"button is-light" +
|
||||
(player.id === 0 ? " is-success" : " is-link")
|
||||
}
|
||||
>
|
||||
remove player
|
||||
{player.id === 0 ? "add player" : "modify player"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<Calendar playerId={player.id} />
|
||||
</section>
|
||||
{player.id !== 0 && (
|
||||
<button
|
||||
className="button is-danger is-light"
|
||||
onClick={handleDisable}
|
||||
>
|
||||
remove player
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section className="section">
|
||||
<Calendar playerId={player.id} />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
} else <span className="loader" />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user