diff --git a/src/back/routes/admin/forms.admin-forms.css b/src/back/routes/admin/forms.admin-forms.css new file mode 100644 index 0000000..e625503 --- /dev/null +++ b/src/back/routes/admin/forms.admin-forms.css @@ -0,0 +1,146 @@ +.form-message { + border: 1px solid color-mix(in srgb, var(--color) 90%, black); + border-radius: 5px; + padding: 10px; + background-color: color-mix(in srgb, var(--color) 10%, white); + color: color-mix(in srgb, var(--color) 31%, black); + animation: notification-pop 400ms; + animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); +} + +body:not(*:has(.jdd-container)) .form-container { + label { + font-weight: bold; + } + + .form-input .form-input label { + font-weight: normal; /* for labels in checkboxed list */ + } + + .form { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-flow: dense; + gap: 8px; + max-width: 1224px; + margin: 0 auto; + + .form-messages { + grid-column: span 2; + position: sticky; + top: 16px; + z-index: 3; + } + + & > .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 2; + 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 2; + 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__number, + .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 + ); + height: 33px; + padding: 08px; + flex-grow: 1; + background-color: hsl(13.8, 40%, 100%); + } + } + + .form-input--type-checkboxed-list, + .form-input__wrapper--type--table { + ul { + padding-left: 0; + li { + list-style: none; + } + } + &.form-input__wrapper--options-count--5-or-more { + grid-row: span 2; + } + + &.form-input__wrapper--options-count--10-or-more { + grid-row: span 3; + } + + &.form-input__wrapper--options-count--15-or-more { + grid-row: span 4; + } + + &.form-input__wrapper--options-count--20-or-more { + grid-row: span 5; + + ul, + .table__wrapper { + max-height: 424px; + overflow-y: auto; + } + } + } + + .form-input__wrapper--title, + .form-input__wrapper--subtitle, + .form-input:has(textarea) { + grid-column: span 2; + } + } +} diff --git a/src/back/routes/admin/navbar/index.page.ts b/src/back/routes/admin/navbar/index.page.ts index 1ef2e59..1b7b38a 100644 --- a/src/back/routes/admin/navbar/index.page.ts +++ b/src/back/routes/admin/navbar/index.page.ts @@ -52,7 +52,7 @@ export default new CRUD({ fields_for_display, fields_for_filters, html, - list_title: "NavbarLinks list", + list_title: "Navbar Links", edit_title: "Edit", edit_button_text: "Edit", delete_button_text: "Delete", diff --git a/src/back/routes/admin/pages/[id]/edit.form.ts b/src/back/routes/admin/pages/[id]/edit.form.ts index 9d7d043..b07061a 100644 --- a/src/back/routes/admin/pages/[id]/edit.form.ts +++ b/src/back/routes/admin/pages/[id]/edit.form.ts @@ -113,6 +113,7 @@ export default new (class PagesCRUDEditForm extends Form { ${await super.render(ctx, data, show_field_errors)} `, description: "", + css_clumps: ["admin-forms"], }); } })(); diff --git a/src/back/routes/admin/pages/index.list.tsx b/src/back/routes/admin/pages/index.list.tsx index b93c3ef..df48664 100644 --- a/src/back/routes/admin/pages/index.list.tsx +++ b/src/back/routes/admin/pages/index.list.tsx @@ -17,6 +17,7 @@ import { PagesCRUDEditURL, PagesCRUDDeleteURL, EditPageContentURL, + AdminURL, } from "../../urls.js"; import type { FilePointer } from "@sealcode/file-manager"; @@ -39,11 +40,13 @@ const displayFields = [ field: "imageForMetadata", label: "imageForMetadata", format: async (value: FilePointer) => { - return imageRouter.image(await value.getPath(), { - container: { width: 45, height: 45 }, - crop: { width: 45, height: 45 }, - alt: "", - }); + return value + ? imageRouter.image(await value?.getPath(), { + container: { width: 45, height: 45 }, + crop: { width: 45, height: 45 }, + alt: "", + }) + : ""; }, }, ] as { @@ -157,7 +160,8 @@ export default new (class PagesCRUDListPage extends SealiousItemListPage< description: "", body: (
-

PagesCRUDList List

+ ← Back to Admin +

Pages

Create {super.render(ctx)}
diff --git a/src/main.css b/src/main.css index 6616a52..fe3d379 100644 --- a/src/main.css +++ b/src/main.css @@ -47,3 +47,9 @@ body.jdd-editor { a { color: var(--color-brand-link-fg); } + + +.sealious-list__actions { + display: flex; + gap: 16px; +}