diff --git a/res/static/style/layout.css b/res/static/style/layout.css index f7e928e..2ed80f6 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -320,14 +320,36 @@ p { margin: 1em 0; } +/* Forms*/ + .form { + display: flex; + flex-direction: column; margin-left: auto; margin-right: auto; - text-align: left; - max-width: 30em; + text-align: initial; + max-width: 500px; width: 100%; } +.form>* { + display: block; + margin-left: 3px; + margin-right: 3px; +} + +.form>label { + margin-top: 1em; +} + +.form>input[type="submit"], +.form>button[type="submit"] { + align-self: end; + margin-top: 1em; +} + +/* Tables */ + table:not(.form) { border-collapse: collapse; width: 100%; @@ -344,7 +366,7 @@ table:not(.form) { min-width: 100%; } -tr:not(.form) { +tr { border-bottom: 1px var(--separator) solid; } @@ -353,16 +375,6 @@ tr>th { padding: 0.2em 0.5em; } -@media(max-width: 30em) { - - /* Forms will be stacked on small screens */ - tr.form>td { - float: left; - width: 100%; - padding: 0.5em; - } -} - pre { padding: 10px; border-bottom: 1px var(--separator) solid; @@ -416,12 +428,6 @@ details.request_patch { background-color: rgba(128, 0, 255, 0.1); } -/* Form fields */ - -.form_input { - width: 100%; -} - /* BUTTONS */ button, .button, @@ -583,7 +589,7 @@ input[type="date"] { border: none; border-radius: 6px; background: var(--input_background); - box-shadow: inset 1px 1px 2px -1px var(--shadow_color); + /* box-shadow: inset 1px 1px 2px -1px var(--shadow_color); */ padding: 3px 5px; color: var(--input_text); font-size: 1em; diff --git a/res/template/fragments/form.html b/res/template/fragments/form.html index 904bf49..6a694cc 100644 --- a/res/template/fragments/form.html +++ b/res/template/fragments/form.html @@ -21,80 +21,59 @@ {{end}} - +
{{range $field := .Fields}} -
- {{if eq $field.Type "textarea"}} - - {{else}} - - - {{end}} - - {{if or (ne $field.Description "") (eq $field.Separator true)}} - - - + + {{if eq $field.Type "text"}} + + {{else if eq $field.Type "number"}} + + {{else if eq $field.Type "username"}} + + {{else if eq $field.Type "email"}} + + {{else if eq $field.Type "current-password"}} + + {{else if eq $field.Type "new-password"}} + + {{else if eq $field.Type "textarea"}} + + {{else if eq $field.Type "captcha"}} + +
+ {{else if eq $field.Type "radio"}} + {{ range $val := $field.RadioValues}} + +
+ {{ end }} + {{else if eq $field.Type "description"}} + {{$field.DefaultValue}} + {{end}} + {{if ne $field.Description ""}} +
+ {{$field.Description}} +
{{end}} {{end}} - - {{if eq .BackLink ""}} - - {{else}} - - {{end}} - -
- {{$field.Label}}
- -
{{$field.Label}} - {{if eq $field.Type "text"}} - - {{else if eq $field.Type "number"}} - - {{else if eq $field.Type "username"}} - - {{else if eq $field.Type "email"}} - - {{else if eq $field.Type "current-password"}} - - {{else if eq $field.Type "new-password"}} - - {{else if eq $field.Type "captcha"}} - -
- {{else if eq $field.Type "radio"}} - {{ range $val := $field.RadioValues}} - -
- {{ end }} - {{else if eq $field.Type "description"}} - {{$field.DefaultValue}} - {{end}} -
- {{$field.Description}} - {{if eq $field.Separator true}} -
- {{end}} -
- {{if eq .SubmitRed true}} - - {{else}} - - {{end}} - - Back - {{if eq .SubmitRed true}} - - {{else}} - - {{end}} -
+ {{if eq .SubmitRed true}} + + {{else}} + + {{end}} + {{.PostFormHTML}} {{end}} diff --git a/svelte/src/admin_panel/AbuseReporters.svelte b/svelte/src/admin_panel/AbuseReporters.svelte index 9749fb7..8140fc6 100644 --- a/svelte/src/admin_panel/AbuseReporters.svelte +++ b/svelte/src/admin_panel/AbuseReporters.svelte @@ -129,37 +129,25 @@ onMount(get_reporters); {#if creating}
- - - - - - - - - - - - - - - - - - - - -
E-mail address
Mail server
Name
Status - - -
- - -
- -
+
+ + + + + + + +
+ + +
+ + +
+ +
{/if} diff --git a/svelte/src/admin_panel/IPBans.svelte b/svelte/src/admin_panel/IPBans.svelte index c5d42e3..762bcae 100644 --- a/svelte/src/admin_panel/IPBans.svelte +++ b/svelte/src/admin_panel/IPBans.svelte @@ -98,41 +98,33 @@ onMount(get_bans); {#if creating}
- - - - - - - - - - - - -
IP address
Reason - - -
- - -
- - -
- - -
- - -
- - -
- -
+
+ + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
{/if} diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte index 7028fc4..9171aa8 100644 --- a/svelte/src/user_home/AccountSettings.svelte +++ b/svelte/src/user_home/AccountSettings.svelte @@ -51,7 +51,7 @@ let email_change = { fields: [ { name: "new_email", - label: "New e-mail address", + label: "E-mail address", type: "email", default_value: window.user.email, description: `we will send an e-mail to the new address to @@ -83,7 +83,7 @@ let name_change = { fields: [ { name: "new_username", - label: "New name", + label: "Name", type: "username", default_value: window.user.username, description: `changing your username also changes the name used to @@ -143,15 +143,27 @@ let delete_account = {

Account settings

-

Change password

-
+
+

Change password

+
+
+
-

Change e-mail address

-
+
+

Change e-mail address

+
+
+
-

Change name

-
+
+

Change name

+
+
+
-

Delete account

-
+
+

Delete account

+
+
+
diff --git a/svelte/src/util/Form.svelte b/svelte/src/util/Form.svelte index e479461..d0da391 100644 --- a/svelte/src/util/Form.svelte +++ b/svelte/src/util/Form.svelte @@ -131,121 +131,107 @@ let handle_errors = (response) => { {/if} - +
{#each config.fields as field} -
- {#if field.type === "text_area"} - - {:else if field.type !== "description"} - - + value={val} + type="radio" + checked={val === field.default_value}/> +
+ {/each} + {/if} - + {/if} {#if field.description} - - - +
+ {@html field.description} +
{/if} {#if field.separator} - - - +
{/if} {/each} - - - -
- {field.label} -
- -
{field.label} - {#if field.type === "text"} - + {field.label} + + {#if field.type === "text"} + + {:else if field.type === "text_area"} + + {:else if field.type === "number"} + + {:else if field.type === "decimal"} + + {:else if field.type === "username"} + + {:else if field.type === "email"} + + {:else if field.type === "current_password"} + + {:else if field.type === "new_password"} + + {:else if field.type === "captcha"} + +
+ {:else if field.type === "radio"} +
+ {#each field.radio_values as val} + - {:else if field.type === "number"} - - {:else if field.type === "decimal"} - - {:else if field.type === "username"} - - {:else if field.type === "email"} - - {:else if field.type === "current_password"} - - {:else if field.type === "new_password"} - - {:else if field.type === "captcha"} - -
- {:else if field.type === "radio"} - {#each field.radio_values as val} - -
- {/each} - {/if} -
- {@html field.description} -
-
-
- {#if config.submit_red} - - {:else} - - {/if} -
+ {#if config.submit_red} + + {:else} + + {/if} +