diff --git a/src/back/routes/admin/forms.admin-forms.css b/src/back/routes/admin/forms.admin-forms.css index ced526b..97f577f 100644 --- a/src/back/routes/admin/forms.admin-forms.css +++ b/src/back/routes/admin/forms.admin-forms.css @@ -21,113 +21,6 @@ body:not(*:has(.jdd-container)) .form-container { } .form { - display: grid; - grid-template-columns: 1fr 1fr; - --column-count: 2; - - @container (max-width: 900px) { - grid-template-columns: 1fr; - --column-count: 1; - } - - grid-auto-flow: dense; - gap: 8px; - max-width: 1224px; - margin: 0 auto; - - .form-messages { - grid-column: span var(--column-count); - position: sticky; - top: 16px; - z-index: 3; - display: flex; - flex-flow: column; - gap: 8px; - - .form-message { - display: inline-block; - align-self: center; - } - } - - & > .form-input__wrapper { - border-radius: 4px; - padding: 1rem; - background-color: color-mix( - in srgb, - var(--color-brand-accent) 20%, - transparent - ); - border: 1px solid var(--color-brand-accent); - } - - & > h2 { - grid-column: span var(--column-count); - font-family: var(--font-sans-serif); - color: var(--color-brand-text-fg); - font-size: 36px; - margin: 1rem 0; - } - - input[type="submit"] { - background-color: var(--color-brand-accent); - color: white; - grid-column: span var(--column-count); - border-radius: 10px; - height: 40px; - border: none; - cursor: pointer; - - &:hover { - filter: brightness(1.2); - } - } - - textarea { - width: 100%; - min-height: 120px; - } - - .form-input--type-checkbox { - grid-row: span 1; - } - - .form-input__wrapper--control-type__image { - grid-row: span 2; - gap: 8px; - } - - .form-input__wrapper--text, - .form-input__wrapper--type__date, - .form-input__wrapper--type__datetime-local, - .form-input__wrapper--type__number, - .form-input__wrapper--enum, - .form-input--type-simple-input, - .form-input__wrapper--type__password { - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 8px; - - input, - select { - font-size: 14px; - border-radius: 3px; - border-style: solid; - border-width: 1px; - border-color: color-mix( - in srgb, - var(--color-brand-accent) 50%, - transparent - ); - box-sizing: border-box; - height: 50px; - padding: 8px; - flex-grow: 1; - background-color: hsl(13.8, 40%, 100%); - } - } - .form-input__wrapper--file:not(.form-input__wrapper--control-type__photo) { grid-row: span 2; display: grid; diff --git a/src/back/routes/admin/forms.css b/src/back/routes/admin/forms.css index 601166e..22d4299 100644 --- a/src/back/routes/admin/forms.css +++ b/src/back/routes/admin/forms.css @@ -115,7 +115,106 @@ } } -.form { +.form-container .form { + display: grid; + grid-template-columns: 1fr 1fr; + --column-count: 2; + + @container (max-width: 900px) { + grid-template-columns: 1fr; + --column-count: 1; + } + + grid-auto-flow: dense; + gap: 8px; + max-width: 1224px; + margin: 0 auto; + + .form-messages { + grid-column: span var(--column-count); + position: sticky; + top: 16px; + z-index: 3; + display: flex; + flex-flow: column; + gap: 8px; + + .form-message { + display: inline-block; + align-self: center; + } + } + + & > .form-input__wrapper { + border-radius: 4px; + padding: 1rem; + background-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent); + border: 1px solid var(--color-brand-accent); + } + + & > h2 { + grid-column: span var(--column-count); + font-family: var(--font-sans-serif); + color: var(--color-brand-text-fg); + font-size: 36px; + margin: 1rem 0; + } + + input[type="submit"] { + background-color: var(--color-brand-accent); + color: white; + grid-column: span var(--column-count); + border-radius: 10px; + height: 40px; + border: none; + cursor: pointer; + + &:hover { + filter: brightness(1.2); + } + } + + textarea { + width: 100%; + min-height: 120px; + } + + .form-input--type-checkbox { + grid-row: span 1; + } + + .form-input__wrapper--control-type__image { + grid-row: span 2; + gap: 8px; + } + + .form-input__wrapper--text, + .form-input__wrapper--type__date, + .form-input__wrapper--type__datetime-local, + .form-input__wrapper--type__number, + .form-input__wrapper--enum, + .form-input--type-simple-input, + .form-input__wrapper--type__password { + display: flex; + flex-flow: row nowrap; + align-items: center; + gap: 8px; + + input, + select { + font-size: 14px; + border-radius: 3px; + border-style: solid; + border-width: 1px; + border-color: color-mix(in srgb, var(--color-brand-accent) 50%, transparent); + box-sizing: border-box; + height: 50px; + padding: 8px; + flex-grow: 1; + background-color: var(--color-brand-canvas); + } + } + .file_preview__icon { display: flex; flex-flow: row; diff --git a/src/back/routes/login.form.ts b/src/back/routes/login.form.ts index f6fad9d..0810d56 100644 --- a/src/back/routes/login.form.ts +++ b/src/back/routes/login.form.ts @@ -22,6 +22,7 @@ export default new (class LoginForm extends Form { fields = fields; controls = [ + new Controls.FormHeader(`Log in`), new Controls.SimpleInput(fields.username, { label: "Username:", type: "text",