flexing card edit page too

app/helpers/merged/cards_helper.rb

@@ -1,4 +1,5 @@
 module Merged
   module CardsHelper
+    include ViewHelper #for previews
   end
 end

app/views/merged/cards/index.haml

@@ -10,9 +10,9 @@
 - template = find_template(@section)
 = render( template , section: @section)
 
-.grid.grid-cols-4.gap-2.m-8
-  - @section.cards.each_with_index do |card , index|
-    .relative.block.border.border-gray-100
+- @section.cards.each_with_index do |card , index|
+  .flex.gap-10.px-20.py-10{class: (card.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "card_#{card.id}"}
+    .basis-96
       .p-4
         %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
         = blue_button( "Up" , card_move_url(card.id , dir: :up) )
@@ -25,24 +25,25 @@
         = red_button("Remove image", card_set_image_path( card.id  , image: "") )
 
 
-    .relative.block.border.border-gray-100
+    .basis-96
       %h3.mt-4.text-lg.font-bold Image
       -if( card.image.blank? )
         %p No image
       -else
         = image_tag( "cms/" + card.image , class: "p-3")
-    .relative.block.border.border-gray-100
+    .basis-72.grow
+      %h3.mt-4.text-lg.font-bold Fields
       = form_tag( card_url(card.id) , {method: :patch  } ) do
         %label.block
-          %h4.text-lg.font-bold Header
+          .text-lg.font-bold Header
           = text_field_tag( :header , card.header, class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
         %label.block
-          %h4.mt-4.text-lg.font-bold Text
+          .mt-4.text-lg.font-bold Text
           = text_area_tag( :text , card.text, rows: 5 , class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm" )
         =submit_button( "Update")
 
-    .relative.block.border.border-gray-100
-      %h3.mt-4.text-lg.font-bold Options
+    .basis-72.grow
+      .mt-4.text-lg.font-bold Options
       = form_tag( card_url(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" }) do
         - card.option_definitions.each do |option|
           =render "merged/sections/option_form_#{option.type}" , section: card , option: option

app/views/merged/sections/_option_form_select.haml

@@ -1,4 +1,4 @@
 %label.block
-  %h4.text-lg.font-bold
+  .mt-4.text-lg.font-bold
     = option.name.capitalize
   = select_tag( "option[#{option.name}]" , options_for_select(option.values, section.option(option.name)), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

app/views/merged/sections/_option_form_text.haml

@@ -1,4 +1,4 @@
 %label.block
-  %h4.text-lg.font-bold
+  .mt-4.text-lg.font-bold
     = option.name
   = text_field_tag( "option[#{option.name}]" , section.option(option.name), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")