wittling

app/assets/stylesheets/merged/merged.css

@@ -746,6 +746,10 @@ select {
   margin: 2rem;
 }
 
+.m-5 {
+  margin: 1.25rem;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -791,12 +795,12 @@ select {
   margin-bottom: 0px;
 }
 
-.mt-10 {
+.mt-16 {
-  margin-top: 2.5rem;
+  margin-top: 4rem;
 }
 
-.mt-5 {
+.mt-10 {
-  margin-top: 1.25rem;
+  margin-top: 2.5rem;
 }
 
 .mt-12 {
@@ -1116,6 +1120,11 @@ select {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
 .border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
@@ -1340,26 +1349,26 @@ select {
   padding-bottom: 0.375rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
 
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
 .pr-12 {
   padding-right: 3rem;
 }
@@ -1565,14 +1574,14 @@ select {
   transition-duration: 150ms;
 }
 
-.duration-700 {
-  transition-duration: 700ms;
-}
-
 .duration-300 {
   transition-duration: 300ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }

app/controllers/merged/form_controller.rb

@@ -37,10 +37,12 @@ module Merged
     def check_option(card , value)
       return unless value.blank?
       puts "Checking #{card.header} #{value}"
-      compulsory = card.option("compulsory") == "yes"
+      compulsory = card.option("compulsory") != "no"
       return unless compulsory
       # check different types
-      @errors[card.header] = "May not be blank"
+      message = card.text
+      message = "May not be empty" if message.blank?
+      @errors[card.header] = message
     end
 
     def check_maths

app/helpers/merged/merged_helper.rb

@@ -18,6 +18,11 @@ module Merged
       return "" if text.blank?
       renderer.render(text).html_safe
     end
+    def field_name(card)
+      name = card.header
+      name += "*" unless card.option("compulsory") == "no"
+      name
+    end
     def blue_button( text, url)
       button( text , url , "bg-blue-500" )
     end

app/views/merged/view/_form_section.haml

@@ -1,10 +1,10 @@
 .flex.flex-col.m-20{ options(section , :background , :color)}
   .flex.items-center.justify-center.flex-1
-    .max-w-prose.px-4.py-16.mx-auto.text-center
+    .max-w-prose.px-4.mt-16.mx-auto.text-center
       %h1.text-4xl.font-medium= section.header
       %p.mt-4.text-lg.pt-10
         = markdown(section)
-  .flex.items-center.justify-start.bg-white
+  .flex.items-center.justify-start.m-20
     .mx-auto.w-full.max-w-4xl{class: "max-w-[50%]"}
       = form_tag( form_sendit_path , {class: "mt-10" }) do
         - challenge = rand(8)

app/views/merged/view/cards/_form_field.haml

@@ -1,8 +1,8 @@
 -if card.option("form_type") == "message"
   .relative.z-0.col-span-2
-    %textarea.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header, :placeholder => " ", :rows => "5"}=params[card.header]
+    %textarea.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header , :placeholder => " ", :rows => "5"}=params[card.header]
     %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card.header
 -else
   .relative.z-0
     %input.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header, :placeholder => " " , "value" => params[card.header], :type => "text"}
-    %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card.header
+    %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= field_name(card)

config/merged/option.yaml

@@ -71,7 +71,7 @@
   desciption:
     Form fields may be compulsory or not. By default they are.
   values: yes no
-  default: yes
+  default: no
 - name: form_type
   desciption:
     Form fields may have a type for special handling. The default is text