#8 add form styles and admin forms

Crabston · Jun 18, 2024 · d61c3fe · d61c3fe
1 parent 943715b
commit d61c3fe
Show file tree

Hide file tree

Showing 5 changed files with 301 additions and 1 deletion.
diff --git a/blueprints/form.yaml b/blueprints/form.yaml
@@ -0,0 +1,169 @@
+title: Formular
+'@extends':
+  type: default
+  context: blueprints://pages
+
+form:
+  fields:
+    tabs:
+      fields:
+        form:
+          type: tab
+          title: Formular
+          fields:
+
+            title:
+              type: spacer
+              title: Formular Einstellungen
+
+            header.form.name:
+              label: Formular Name
+              type: text
+
+            # TODO: create fields that work an will be saved in the frontmatter correctly
+            fields:
+              type: section
+              title: Formular Felder
+              text: _Noch nicht implementiert._ Felder bitte via Frontmatter setzen.
+              underline: true
+              #fields:
+              #  header.form.fields:
+              #    type: list
+              #    style: vertical
+              #    label: Formular Felder
+              #    fields:
+#
+              #      .type:
+              #        type: select
+              #        label: Typ
+              #        options:
+              #          text: Text
+              #          email: E-Mail
+              #          textarea: Textarea
+              #          select: Select
+              #          radio: Radio
+              #          checkboxes: Checkboxes
+              #          hidden: Hidden
+              #          honeypot: Honeypot
+              #          columns: Columns
+#
+              #      .label:
+              #        toggleable: true
+              #        type: text
+              #        label: Label
+#
+              #      .placeholder:
+              #        toggleable: true
+              #        type: text
+              #        label: Platzhalter
+#
+              #      .classes:
+              #        toggleable: true
+              #        type: text
+              #        label: CSS Klassen
+#
+              #      .validate.required:
+              #        toggleable: true
+              #        type: toggle
+              #        label: Erforderlich
+              #        options:
+              #          1: Aktiviert
+              #          0: Deaktiviert
+#
+              #      .fields:
+              #        toggleable: true
+              #        type: list
+              #        style: horizontal
+              #        label: Felder
+              #        help: Typ muss auf Columns gesetzt sein
+              #        min: 1
+              #        max: 4
+              #        fields:
+              #          .type:
+              #            type: text
+              #            default: column
+              #            classes: hidden
+              #            readonly: true
+              #          .fields:
+              #            type: list
+              #            style: vertical
+              #            max: 1
+              #            fields:
+#
+              #              .type:
+              #                type: select
+              #                label: Typ
+              #                options:
+              #                  text: Text
+              #                  email: E-Mail
+              #                  textarea: Textarea
+              #                  select: Select
+              #                  radio: Radio
+              #                  checkboxes: Checkboxes
+              #                  hidden: Hidden
+              #                  honeypot: Honeypot
+              #                  columns: Columns
+#
+              #              .label:
+              #                toggleable: true
+              #                type: text
+              #                label: Label
+#
+              #              .placeholder:
+              #                toggleable: true
+              #                type: text
+              #                label: Platzhalter
+#
+              #              .classes:
+              #                toggleable: true
+              #                type: text
+              #                label: CSS Klassen
+#
+              #              .validate.required:
+              #                toggleable: true
+              #                type: toggle
+              #                label: Erforderlich
+              #                options:
+              #                  1: Aktiviert
+              #                  0: Deaktiviert
+
+            # TODO: add predefined buttons
+            buttons:
+              type: section
+              title: Formular Knöpfe
+              underline: true
+              fields:
+                header.form.buttons:
+                  type: list
+                  style: horizontal
+                  label: Formular Knöpfe
+                  fields:
+                    .type:
+                      type: select
+                      label: Typ
+                      options:
+                        submit: Submit
+                        reset: Reset
+                    .value:
+                      type: text
+                      label: Label
+                    .classes:
+                      toggleable: true
+                      type: text
+                      label: CSS Klassen
+
+            # TODO: add process options for email & save and eventually more
+            process:
+              type: section
+              title: Formular Verarbeitung
+              text: Weitere Optionen müssen via Frontmatter gesetzt werden.
+              underline: true
+              fields:
+                header.form.process.display:
+                  type: text
+                  label: Seite
+                  help: Seite auf die nach dem Absenden des Formulars weitergeleitet wird
+                header.form.process.message:
+                  type: text
+                  label: Nachricht
+                  help: Nachricht die nach dem Absenden des Formulars angezeigt wird
diff --git a/css/minimal.css b/css/minimal.css
diff --git a/css/minimal.css.map b/css/minimal.css.map
diff --git a/scss/_elements.scss b/scss/_elements.scss
@@ -2,6 +2,7 @@
 
 @import 'variables';
 @import "elements/table";
+@import "elements/form";
 
 // overlays
 .image-overlay {

diff --git a/scss/elements/_form.scss b/scss/elements/_form.scss
@@ -0,0 +1,82 @@
+// forms
+@use 'sass:selector';
+@import '../variables';
+
+@mixin unify-parent($child) {
+	@at-root #{selector.unify(&, $child)} {
+		@content;
+	}
+}
+
+// desktop
+form {
+	$form-padding: .5rem;
+	$form-field-height: 2.5rem;
+
+	@mixin layout {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+	}
+
+	@mixin form-field {
+		width: 100%;
+		height: $form-field-height;
+		padding: $form-padding;
+	}
+
+	.form-columns {
+		@include layout;
+
+		.form-column {
+			width: 100%;
+		}
+	}
+
+	.form-field {
+		padding: .5rem;
+
+		.form-data :not(.no-css) {
+			@include unify-parent('textarea') {
+				width: 100%;
+				min-height: 2*$form-field-height;
+				max-height: 8*$form-field-height;
+				padding: $form-padding;
+				resize: vertical;
+			}
+
+			@include unify-parent('input') {
+				&[type='text'],
+				&[type='email'],
+				&[type='tel'],
+				&[type='date'],
+				&[type='number'],
+				&[type='url'],
+				&[type='range'] {
+					@include form-field;
+				}
+			}
+
+			@include unify-parent('select') {
+				@include form-field;
+
+				&[multiple] {
+					height: auto;
+					max-height: 6*$form-field-height;
+				}
+			}
+		}
+
+	}
+
+	// TODO: unify buttons with fancy class
+	.buttons {
+		@include layout;
+		gap: 1rem;
+		padding: $form-padding;
+
+		button {
+			@include form-field;
+		}
+	}
+}