minor styling
This commit is contained in:
@@ -300,7 +300,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
{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="column">
|
||||
@@ -420,7 +422,9 @@ function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
{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="column is-full is-flex is-justify-content-center">
|
||||
@@ -521,7 +525,9 @@ export default function Rankings() {
|
||||
<TypeDnD {...{ user, teams, players }} />
|
||||
</TabController>
|
||||
) : (
|
||||
<progress className="progress is-primary" max="100"></progress>
|
||||
<div className="container">
|
||||
<progress className="progress is-primary" max="100"></progress>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -77,160 +77,170 @@ const TeamPanel = () => {
|
||||
<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) => (
|
||||
<div className="panel">
|
||||
<h2 className="panel-heading is-4">Players</h2>
|
||||
<div className="panel-block">
|
||||
{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-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
|
||||
className={
|
||||
"button is-primary is-light " +
|
||||
p.gender +
|
||||
(p.id === player.id ? " is-focused is-active" : "")
|
||||
"button is-light" +
|
||||
(player.id === 0 ? " is-success" : " is-link")
|
||||
}
|
||||
key={p.id}
|
||||
onClick={() => {
|
||||
setPlayer(p);
|
||||
setError({ ok: true, message: "" });
|
||||
}}
|
||||
>
|
||||
{p.display_name}
|
||||
{player.id === 0 ? "add player" : "modify player"}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
{player.id !== 0 && (
|
||||
<button
|
||||
className="button is-danger is-light"
|
||||
onClick={handleDisable}
|
||||
>
|
||||
remove player
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
</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 className="section">
|
||||
|
||||
Reference in New Issue
Block a user