Styles and fixes in the admin view

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;
+		}
+	}
+}

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",

src/back/routes/admin/pages/[id]/edit.form.ts

@@ -113,6 +113,7 @@ export default new (class PagesCRUDEditForm extends Form<typeof fields, void> {
 				${await super.render(ctx, data, show_field_errors)}
 			</div>`,
 			description: "",
+			css_clumps: ["admin-forms"],
 		});
 	}
 })();

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(), {
+			return value
-				container: { width: 45, height: 45 },
+				? imageRouter.image(await value?.getPath(), {
-				crop: { width: 45, height: 45 },
+						container: { width: 45, height: 45 },
-				alt: "",
+						crop: { width: 45, height: 45 },
-			});
+						alt: "",
+				  })
+				: "";
 		},
 	},
 ] as {
@@ -157,7 +160,8 @@ export default new (class PagesCRUDListPage extends SealiousItemListPage<
 			description: "",
 			body: (
 				<div class="sealious-list-wrapper pages-crudlist--wrapper">
-					<h2>PagesCRUDList List</h2>
+					<a href={AdminURL}>← Back to Admin</a>
+					<h2>Pages</h2>
 					<a href={PagesCRUDCreateURL}> Create </a>
 					{super.render(ctx)}
 				</div>

src/main.css

@@ -47,3 +47,9 @@ body.jdd-editor {
 a {
 	color: var(--color-brand-link-fg);
 }
+
+
+.sealious-list__actions {
+    display: flex;
+    gap: 16px;
+}