xerbalind/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity

improve submitpane styling

Browse source
This commit is contained in:
Ilion Beyst 2022-03-06 17:22:05 +01:00
parent a8c913f284
commit 95b733ba4d
1 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
web/pw-server/src/lib/components/SubmitPane.svelte
View file

@ -79,6 +79,7 @@
<div class="submit-pane"> <div class="submit-pane">
<div class="match-form"> <div class="match-form">
<h4>Play a match</h4>
<div class="play-text">Select an opponent to test your bot</div> <div class="play-text">Select an opponent to test your bot</div>
<div class="opponentSelect"> <div class="opponentSelect">
<Select <Select
@ -86,12 +87,14 @@
labelIdentifier="name" labelIdentifier="name"
items={availableBots} items={availableBots}
bind:value={selectedOpponent} bind:value={selectedOpponent}
isClearable={false}
/> />
</div> </div>
<button class="submit-button play-button" on:click={submitBot}>Play</button> <button class="submit-button play-button" on:click={submitBot}>Play</button>
</div> </div>
<div class="save-form"> <div class="save-form">
<h4>Save your bot</h4> <h4>Save your bot</h4>
<div>Add your bot to the opponents list</div>
<input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} /> <input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
{#if saveErrorText} {#if saveErrorText}
<div class="error-text">{saveErrorText}</div> <div class="error-text">{saveErrorText}</div>
@ -108,6 +111,10 @@
flex-direction: column; flex-direction: column;
} }
.submit-pane h4 {
margin-bottom: 0.3em;
}
.opponentSelect { .opponentSelect {
margin: 20px 0; margin: 20px 0;
} }
@ -131,25 +138,13 @@
cursor: pointer; cursor: pointer;
} }
.play-button {
padding: 8px 16px;
border-radius: 8px;
border: 0;
font-size: 18pt;
display: block;
margin: 10px auto;
background-color: lightgreen;
cursor: pointer;
}
.bot-name-input { .bot-name-input {
width: 100%; width: 100%;
} font-size: 16px;
.save-button {
background-color: lightgreen;
cursor: pointer;
padding: 8px 16px; padding: 8px 16px;
border: 0; box-sizing: border-box;
margin: 10px 0;
border: 1px solid rgb(216, 219, 223);
border-radius: 3px;
} }
</style> </style>