Lots of improvements, try out some htmx

src/OAP/Oap.Theme/ResourceManagementOptionsConfiguration.cs

@@ -9,6 +9,11 @@ public class ResourceManagementOptionsConfiguration : IConfigureOptions<Resource
 	{
 		m_manifest = new ResourceManifest();
 
+		m_manifest
+			.DefineScript("OapTheme-scripts")
+			.SetUrl("~/Oap.Theme/site.min.js", "~/Oap.Theme/site.js")
+			.SetVersion("6.0.7");
+
 		m_manifest
 			.DefineStyle("OapTheme-styles")
 			.SetUrl("~/Oap.Theme/site.css")

src/OAP/Oap.Theme/Styles/richtext.css

@@ -15,7 +15,7 @@ div.richtext ul li {
 }
 
 div.richtext p {
-    @apply my-4;
+    @apply mb-2;
 }
 
 div.richtext .red {

src/OAP/Oap.Theme/Views/Content-OapApplicationFormStep.cshtml

@@ -1,9 +1,11 @@
-<div>
+<div id="form-step">
     <h2 class="text-lg font-bold">
         @Model.Header.TitlePart.Title
     </h2>
     
+    <div class="mt-2 mb-6">
         @await DisplayAsync(Model.Content.HtmlBodyPart)
+    </div>
 
     @await DisplayAsync(Model.Content.FlowPart)
 </div>

src/OAP/Oap.Theme/Views/Form.Wrapper.cshtml

@@ -0,0 +1,36 @@
+@using Microsoft.AspNetCore.Html
+@using OrchardCore.ContentManagement
+@using OrchardCore.Forms.Models
+@using OrchardCore.Mvc.Utilities
+@using OrchardCore.Workflows
+
+@{
+    var formPart = ((ContentItem)Model.ContentItem).As<FormPart>();
+    string encType = formPart.Method == "POST" ? formPart.EncType : string.Empty;
+    var formContentTypeClassName = "form-" + ((string)Model.ContentItem.ContentType).HtmlClassify();
+
+    var elementId = ((ContentItem)Model.ContentItem).As<FormElementPart>()?.Id;
+    string formId = string.IsNullOrWhiteSpace(elementId) ? $"form_{Model.ContentItem.ContentItemId}" : elementId;
+}
+
+<form id="@formId"
+    action="@formPart.Action"
+    method="@formPart.Method"
+    enctype="@encType"
+    class="@formContentTypeClassName"
+    hx-post="@formPart.Action"
+    hx-target="#form-step"
+    hx-swap="outerHTML transition:true"
+    hx-select="#form-step">
+    @if (formPart.EnableAntiForgeryToken)
+    {
+        @Html.AntiForgeryToken()
+    }
+
+    @if (formPart.SaveFormLocation)
+    {
+        <input type="hidden" name="@WorkflowConstants.FormLocationKeyInputName" value="@ViewContext.HttpContext.Request.Path" />
+    }
+
+    @await DisplayAsync((IHtmlContent)Model.Metadata.ChildContent)
+</form>

src/OAP/Oap.Theme/Views/FormElementLabelPart.cshtml

@@ -11,7 +11,7 @@
 
 @if (Model.Value.Option == LabelOptions.Standard)
 {
-    <label for="@fieldId" class="block font-bold text-gray-900">@Model.Value.Label</label>
+    <label for="@fieldId" class="block mt-2 font-bold text-gray-900">@Model.Value.Label</label>
 }
 else if (Model.Value.Option == LabelOptions.ScreenReaders)
 {

src/OAP/Oap.Theme/Views/Input-HtmlBodyPart.cshtml

@@ -1,6 +1,6 @@
 @model OrchardCore.Html.ViewModels.HtmlBodyPartViewModel
 
-<div class="mt-1 text-sm leading-6 text-gray-600">
+<div class="text-sm text-gray-600">
     <div class="richtext">
         @Html.Raw(Model.Html)
     </div>

src/OAP/Oap.Theme/Views/Layout.cshtml

@@ -17,6 +17,7 @@
     <link type="image/x-icon" rel="shortcut icon" href="~/Oap.Theme/assets/favicon.ico">
 
     <style asp-name="oaptheme-styles"></style>
+    <script asp-name="oaptheme-scripts" at="Foot"></script>
 
     <resources type="HeadLink" />
     <resources type="Stylesheet" />

src/OAP/Oap.Theme/Views/OapApplicationForm-ListPart.cshtml

@@ -2,14 +2,13 @@
 @inject OrchardCore.ContentManagement.Display.IContentItemDisplayManager ContentItemDisplayManager
 
 <div class="flex flex-col gap-x-4">
-    @foreach (var step in Model.ContentItems)
+    @{
-    {
         var stepContent = await ContentItemDisplayManager.BuildDisplayAsync(
-            step,
+            Model.ContentItems.First(),
             Model.Context.Updater,
             Model.Context.DisplayType,
             Model.Context.GroupId);
+    }
     
     @await DisplayAsync(stepContent)
-    }
 </div>

src/OAP/Oap.Theme/Views/Widget-Form.cshtml

@@ -1,3 +1,3 @@
-<div class="flex flex-col gap-6">
+<div class="flex flex-col gap-2">
     @await DisplayAsync(Model.Content)
 </div>

src/OAP/Oap.Theme/Views/Widget-Select.cshtml

@@ -1,4 +1,4 @@
-<fieldset>
+<fieldset class="mt-2">
     @await DisplayAsync(Model.Content.FormElementLabelPart)
     @await DisplayAsync(Model.Content.Explanation)
     @await DisplayAsync(Model.Content.SelectPart)

src/OAP/Oap.Theme/wwwroot/site.css

@@ -534,8 +534,7 @@ div.richtext ul li {
   list-style-type: disc;
 }
 div.richtext p {
-  margin-top: 1rem;
+  margin-bottom: 0.5rem;
-  margin-bottom: 1rem;
 }
 div.richtext .red {
   --tw-text-opacity: 1;
@@ -579,8 +578,8 @@ span.field-validation-error {
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mt-6 {
+.mb-4 {
-  margin-top: 1.5rem;
+  margin-bottom: 1rem;
 }
 .block {
   display: block;
@@ -591,20 +590,14 @@ span.field-validation-error {
 .table {
   display: table;
 }
-.grid {
-  display: grid;
-}
 .hidden {
   display: none;
 }
-.h-full {
-  height: 100%;
-}
 .h-4 {
   height: 1rem;
 }
-.min-h-full {
+.w-1\/3 {
-  min-height: 100%;
+  width: 33.333333%;
 }
 .w-4 {
   width: 1rem;
@@ -612,21 +605,12 @@ span.field-validation-error {
 .w-full {
   width: 100%;
 }
-.w-1\/3 {
-  width: 33.333333%;
-}
 .max-w-screen-md {
   max-width: 768px;
 }
 .cursor-pointer {
   cursor: pointer;
 }
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.flex-row {
-  flex-direction: row;
-}
 .flex-col {
   flex-direction: column;
 }
@@ -636,22 +620,14 @@ span.field-validation-error {
 .justify-end {
   justify-content: flex-end;
 }
-.gap-4 {
+.gap-2 {
-  gap: 1rem;
+  gap: 0.5rem;
-}
-.gap-6 {
-  gap: 1.5rem;
-}
-.gap-x-4 {
-  column-gap: 1rem;
 }
 .gap-x-3 {
   column-gap: 0.75rem;
 }
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+.gap-x-4 {
-  --tw-space-y-reverse: 0;
+  column-gap: 1rem;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
@@ -700,20 +676,17 @@ span.field-validation-error {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
 .py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .pb-1 {
   padding-bottom: 0.25rem;
 }
-.pl-4 {
-  padding-left: 1rem;
-}
 .text-center {
   text-align: center;
 }
@@ -735,9 +708,6 @@ span.field-validation-error {
 .font-bold {
   font-weight: 700;
 }
-.font-semibold {
-  font-weight: 600;
-}
 .font-medium {
   font-weight: 500;
 }
@@ -748,14 +718,14 @@ span.field-validation-error {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));