start on forms

README.md

@@ -111,11 +111,19 @@ pipeline).
 
 ```
 = stylesheet_link_tag "application"
-= stylesheet_link_tag "tailwind" , "inter-font", "data-turbo-track": "reload"
 = stylesheet_link_tag "merged/merged"
+= stylesheet_link_tag "tailwind" , "inter-font", "data-turbo-track": "reload"
 ```
 
-If you use tailwind with the basic install, add it after tailwind
+If you use tailwind with the basic install, add it _before_ tailwind,
+and switch preflight off in the apps tailwind config file (config/tailwind.config.js). Otherwise tailwind will reset the styles from merged
+or the other way around.
+
+```
+corePlugins: {
+  preflight: false,
+}
+```
 
 ## Contributing
 Ask first.

app/assets/stylesheets/merged/merged.css

@@ -714,10 +714,26 @@ select {
   left: 0px;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.-z-10 {
+  z-index: -10;
+}
+
 .order-last {
   order: 9999;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -779,6 +795,10 @@ select {
   margin-top: 2.5rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-12 {
   margin-top: 3rem;
 }
@@ -843,6 +863,10 @@ select {
   height: 14rem;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .h-64 {
   height: 16rem;
 }
@@ -859,18 +883,6 @@ select {
   height: 6rem;
 }
 
-.h-60 {
-  height: 15rem;
-}
-
-.h-40 {
-  height: 10rem;
-}
-
-.h-32 {
-  height: 8rem;
-}
-
 .w-6 {
   width: 1.5rem;
 }
@@ -907,6 +919,14 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[50\%\] {
+  max-width: 50%;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -919,6 +939,31 @@ select {
   flex: 1 1 0%;
 }
 
+.origin-\[0\] {
+  transform-origin: 0;
+}
+
+.-translate-y-6 {
+  --tw-translate-y: -1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-75 {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -959,6 +1004,10 @@ select {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1040,10 +1089,18 @@ select {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
@@ -1059,6 +1116,11 @@ select {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1183,6 +1245,10 @@ select {
   background-color: rgb(236 254 255 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -1279,11 +1345,21 @@ select {
   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;
 }
@@ -1493,6 +1569,10 @@ select {
   transition-duration: 700ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -1511,6 +1591,22 @@ select {
   color: rgb(75 85 99 / 0.75);
 }
 
+.focus\:border-blue-600:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .group:hover .group-hover\:translate-x-0\.5 {
   --tw-translate-x: 0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1531,6 +1627,55 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:placeholder-shown ~ .peer-placeholder-shown\:translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:placeholder-shown ~ .peer-placeholder-shown\:scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:focus ~ .peer-focus\:left-0 {
+  left: 0px;
+}
+
+.peer:focus ~ .peer-focus\:-translate-y-6 {
+  --tw-translate-y: -1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:focus ~ .peer-focus\:scale-75 {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:focus ~ .peer-focus\:text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .peer:focus ~ .peer-focus\:dark\:text-blue-500 {
+    --tw-text-opacity: 1;
+    color: rgb(59 130 246 / var(--tw-text-opacity));
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:mt-4 {
     margin-top: 1rem;

app/controllers/merged/sections_controller.rb

@@ -14,7 +14,7 @@ module Merged
       @sections = SectionStyle.sections
     end
     def select_card_template
-      @cards = Style.cards
+      @cards = CardStyle.cards
     end
 
     def new

app/models/merged/section.rb

@@ -37,7 +37,7 @@ module Merged
       new_style = template_style
       if(new_style.has_cards?)
         unless card_template
-          @content["card_template"] = Style.cards.keys.first
+          @content["card_template"] = CardStyle.cards.keys.first
           @content["cards"] = []
           raise "Should not have cards" unless cards.empty?
         end
@@ -153,7 +153,7 @@ module Merged
       end unless style.fields.blank?
       if(style.has_cards?)
         data["cards"] = []
-        data["card_template"] = Style.cards.keys.first
+        data["card_template"] = CardStyle.cards.keys.first
       end
       data
     end

app/views/merged/view/_form_section.haml

@@ -0,0 +1,14 @@
+.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
+      %h1.text-4xl.font-medium= section.header
+      %p.mt-4.text-lg.pt-10
+        = markdown(section)
+  .flex.items-center.justify-start.bg-white
+    .mx-auto.w-full.max-w-4xl{class: "max-w-[50%]"}
+      %form.mt-10{:action => "https://api.web3forms.com/submit"}
+        .grid.gap-6.md:grid-cols-2
+          - template = "merged/view/cards/" + section.card_template
+          - section.cards.each do |card|
+            = render( template , card: card)
+        %button.mt-5.rounded-md.bg-cyan-700.px-10.py-2.text-white{:type => "submit"} Send

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

@@ -0,0 +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 => "message", :placeholder => " ", :rows => "5"}
+    %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 => "email", :placeholder => " ", :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

config/merged/card_style.yaml

@@ -39,3 +39,13 @@
   fields:
     - header
     - text
+- template: form_field
+  header: A single field in a form
+  text: The header is the Name of the field, the description
+        serves as a placeholder.
+  fields:
+    - header
+    - text
+  options:
+    - compulsory
+    - form_type

config/merged/option.yaml

@@ -67,3 +67,14 @@
     Link must be a page name, ie only internal links allowed.
   values:
   default:
+- name: compulsory
+  desciption:
+    Form fields may be compulsory or not. By default they are.
+  values: on off
+  default: off
+- name: form_type
+  desciption:
+    Form fields may have a type for special handling. The default is text
+    but message would be a longer text, and email checked to be a name.
+  values: text message email phone date
+  default: text

config/merged/section_style.yaml

@@ -73,3 +73,14 @@
   header: Spacer
   text: Just for extra padding
   fields:
+- template: form_section
+  header: Contact or other form
+  text: Flexible form, with input fields as "cards". Only choose form_field
+        as contained in the form.
+  cards: true
+  fields:
+    - header
+    - text
+  options:
+    - background
+    - color