wittling indexes

app/helpers/merged/merged_helper.rb

@@ -34,20 +34,20 @@ module Merged
       name
     end
     def blue_button( text, url)
-      button( text , url , "bg-blue-500" )
+      button( text , url , "bg-cyan-200" )
     end
     def yellow_button( text, url)
-      button( text , url , "bg-yellow-500" )
+      button( text , url , "bg-yellow-200" )
     end
     def red_button( text, url)
-      button( text , url , "bg-red-500" )
+      button( text , url , "bg-red-200" )
     end
     def green_button( text, url)
-      button( text , url , "bg-green-500" )
+      button( text , url , "bg-green-200" )
     end
     def submit_button(text , danger = false )
-      clazz = "bg-blue-500 " #full names, no tricks for tailwind
+      clazz = "bg-cyan-200 " #full names, no tricks for tailwind
-      clazz = "bg-red-500 " if danger
+      clazz = "bg-red-300 " if danger
       clazz += button_classes
       content_tag(:button , class: clazz  , type: :submit) do
         text
@@ -61,7 +61,7 @@ module Merged
       end
     end
     def button_classes
-      "mr-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white"
+      "mr-3 inline-block rounded-lg px-4 py-3 text-md font-medium border border-gray-400"
     end
     # section should be hash with at least 'template' key
     def find_template(section)

app/views/merged/cards/index.haml

@@ -15,6 +15,7 @@
     .basis-96
       .p-4
         %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
+        .flex.flex-wrap
           = blue_button( "Up" , card_move_url(card.id , dir: :up) )
           = blue_button( "Down" , card_move_url(card.id , dir: :down) )
           = form_tag( card_url(card.id) , {method: :delete  } ) do
@@ -33,7 +34,7 @@
         = image_tag( "cms/" + card.image , class: "p-3")
     .basis-72.grow
       %h3.mt-4.text-lg.font-bold Fields
-      = form_tag( card_url(card.id) , {method: :patch  } ) do
+      = form_tag( card_url(card.id) , {method: :patch  , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do
         %label.block
           .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")

app/views/merged/sections/index.haml

@@ -9,12 +9,20 @@
 
 -@page.sections.each do |section |
   .flex.gap-10.p-4{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
-    .basis-80
+    .basis-60
       %h3.mt-4.text-lg.font-bold Section #{section.index} : #{section.header}
-      = blue_button( "Up" , section_move_url(section.id , dir: :up) )
+      .flex.flex-wrap
-      = blue_button( "Down" , section_move_url(section.id , dir: :down) )
         = yellow_button("Edit" , section_path(section.id) )
         = green_button( "Copy" , new_page_section_url(@page.id, template: section.template) )
+        .p-2
+          =link_to(section_move_url(section.id , dir: :up)) do
+            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+              %path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .p-2
+          =link_to(section_move_url(section.id , dir: :down)) do
+            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+              %path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .basis-full.mb-3
         = form_tag( section_url(section.id) , {method: :delete  } ) do
           =submit_button( "Delete" , true)
     .basis-72