octo
/
mastoradio
forked from Mastodon/mastoradio-la-radio-di-mastodon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add (wip) error message in settings form

This commit is contained in:
Tixie 2020-03-03 22:25:40 +01:00
parent d64b384203
commit c4d7185672
3 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/scss/3-components/_forms.scss
View File

@ -113,6 +113,10 @@ input {
line-height: 1.3em; line-height: 1.3em;
} }
input.error {
border-color: #da0000;
}
input[readonly] { input[readonly] {
background: #f1f1f1; background: #f1f1f1;
} }

10
src/assets/scss/3-components/_notifications.scss
View File

@ -9,15 +9,17 @@
$notif-success: #00d1b2; $notif-success: #00d1b2;
$notif-warning: #ffdd57; $notif-warning: #ffdd57;
$notif-error: #ff3860; $notif-error: rgba(#da0000, .15);
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
/* == module */ /* == module */
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
.notif { .notif {
padding: 1em; margin-top: .5rem;
border-radius: 4px; padding: .5em 1em;
border-radius: .3rem;
font-size: 1.3rem;
} }
.notif--success { .notif--success {
@ -32,5 +34,5 @@ $notif-error: #ff3860;
.notif--error { .notif--error {
background-color: $notif-error; background-color: $notif-error;
color: #fff; color: #9e0000;
} }

3
src/components/Settings.svelte
View File

@ -9,7 +9,8 @@
<div class="settings-side__subtitle">The mastodon instance from the toods are fetched</div> <div class="settings-side__subtitle">The mastodon instance from the toods are fetched</div>
</div> </div>
<div class="settings-main"> <div class="settings-main">
<input class="f-size-full" type="text" id="domain" name="domain" on:change={handleChange} bind:value={$form.domain}> <input class="f-size-full error" type="text" id="domain" name="domain" on:change={handleChange} bind:value={$form.domain}>
<div class="notif notif--error">Le format n'est pas bon, déso</div>
</div> </div>
{#if $errors.domain} {#if $errors.domain}
<span>{$errors.domain}</span> <span>{$errors.domain}</span>