fix: improve styling for errors
This commit is contained in:
parent
a4c6d51bcc
commit
2d195fd48c
|
@ -1,5 +1,6 @@
|
||||||
<style>
|
<style>
|
||||||
#form {
|
#form {
|
||||||
|
box-sizing: border-box;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
@ -13,6 +14,10 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input--error {
|
||||||
|
border: 1px solid firebrick;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -28,6 +33,13 @@
|
||||||
value = e.currentTarget.value
|
value = e.currentTarget.value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let inputClasses = ''
|
||||||
|
$: inputClasses = [
|
||||||
|
error ? 'input--error' : '',
|
||||||
|
pending ? 'input--pending': '',
|
||||||
|
].join(' ')
|
||||||
|
console.log(inputClasses)
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
createEvent(value, { logger })
|
createEvent(value, { logger })
|
||||||
|
@ -40,6 +52,7 @@
|
||||||
pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|\d+$"
|
pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|\d+$"
|
||||||
id="url"
|
id="url"
|
||||||
name="url"
|
name="url"
|
||||||
|
class={inputClasses}
|
||||||
bind:value={value}
|
bind:value={value}
|
||||||
disabled={pending}
|
disabled={pending}
|
||||||
placeholder="Paste / type FB event URL or event number..."
|
placeholder="Paste / type FB event URL or event number..."
|
||||||
|
@ -47,6 +60,7 @@
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
id="submit"
|
id="submit"
|
||||||
|
class={inputClasses}
|
||||||
type='submit'
|
type='submit'
|
||||||
value='Submit'
|
value='Submit'
|
||||||
disabled={pending}
|
disabled={pending}
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
<style>
|
<style>
|
||||||
#status {
|
#status {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 2rem;
|
min-height: 1rem;
|
||||||
|
max-height: 3rem;
|
||||||
|
overflow: auto;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,6 +13,13 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status-item--error {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid firebrick;
|
||||||
|
background-color: salmon;
|
||||||
|
color: darkred;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
Loading…
Reference in New Issue