flexed sections show and pagination style nav

app/views/merged/cards/index.haml

@@ -1,9 +1,9 @@
 - content_for( :merged_menu ) do
-  .text-xl.font-bold.text-gray-900
-    Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
+  = render "merged/sections/sections_pagination" , section: @section
   .text-xl.text-gray-900
-    Cards for
-    = link_to "Section #{@section.index}", section_url( @section.id) , class: "underline"
+    Cards for Section #{@section.index} -
+    = link_to @section.header , section_url( @section.id) , class: "underline"
+  = link_to( "New Card" , new_section_card_url(@section.id) , class: "p-2 border border-gray-200 font-bold rounded-lg hover:bg-sky-100")
 
 = render "layouts/merged_header"
 
@@ -51,5 +51,3 @@
           %p No options
         -else
           = submit_button("Update")
-%p
-  = green_button( "New Card" , new_section_card_url(@section.id) )

app/views/merged/sections/_sections_pagination.haml

@@ -0,0 +1,23 @@
+.text-xl.font-bold.text-gray-900
+  Page #{link_to section.page.name, page_sections_url(section.page.id), class: "underline"}
+.inline-flex.items-center.justify-center.gap-3
+  .text-xl.font-bold.text-gray-900
+    Section #{section.header}
+  - if section.previous_section
+    =link_to section_url(section.previous_section.id) , class: "inline-flex h-8 w-8 items-center justify-center rounded border border-gray-100 hover:bg-sky-100" do
+      %span.sr-only Next Section
+      %svg.h-3.w-3{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
+        %path{"clip-rule" => "evenodd", :d => "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "fill-rule" => "evenodd"}
+  - else
+    .inline-flex.h-8.w-8.items-center.justify-center.rounded.border.border-gray-100
+  %p.text-xs
+    = section.index
+    %span{:class => "mx-0.25"} /
+    = section.page.sections.length
+  - if section.next_section
+    =link_to section_url(section.next_section.id), class: "inline-flex h-8 w-8 items-center justify-center rounded border border-gray-100 hover:bg-sky-100" do
+      %span.sr-only Next Section
+      %svg.h-3.w-3{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
+        %path{"clip-rule" => "evenodd", :d => "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "fill-rule" => "evenodd"}
+  - else
+    .inline-flex.h-8.w-8.items-center.justify-center.rounded.border.border-gray-100

app/views/merged/sections/select_card_template.haml

@@ -1,11 +1,13 @@
 - content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
   .text-xl.text-gray-900
-    Select Card Template for Section #{section.index}
+    Select Card Template for Section #{@section.index} - #{@section.header}
 
 = render "layouts/merged_header"
-.grid.grid-cols-4.gap-2.m-8
+.grid.grid-cols-4.gap-6.m-8
   - @cards.each do |style|
-    .relative.block.border.border-gray-100
+    .border.border-gray-300.rounded-lg.p-2
       = link_to( section_set_card_template_path( card_template: style.template )) do
-        =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72")
-        = style.header
+        .font-bold.text-lg.text-center.pb-4= style.header
+        =image_tag(style.card_preview , class: "w-full object-contain")

app/views/merged/sections/select_template.haml

@@ -6,9 +6,9 @@
 
 = render "layouts/merged_header"
 
-.grid.grid-cols-4.gap-2.m-8
+.grid.grid-cols-4.gap-6.m-8
   - @sections.each do |style|
-    .relative.block.border.border-gray-100
+    .border.border-gray-300.rounded-lg.p-2
       = link_to( section_set_template_path( template: style.template )) do
-        =image_tag(style.section_preview , class: "h-56 w-full object-contain lg:h-72")
-        = style.header
+        .font-bold.text-lg.text-center.pb-4= style.header
+        =image_tag(style.section_preview , class: "w-full object-contain")

app/views/merged/sections/show.haml

@@ -1,26 +1,28 @@
 - content_for( :merged_menu ) do
-  .text-xl.font-bold.text-gray-900
-    Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"}
-  .text-xl.text-gray-900
-    Section #{@section.index} / #{@section.page.sections.length} : #{@section.header}
-    - if @section.previous_section
-      =link_to "(prev)" , section_url(@section.previous_section.id)
-    - if @section.next_section
-      =link_to "(next)" , section_url(@section.next_section.id)
+  = render "sections_pagination" , section: @section
 
 = render "layouts/merged_header"
 
 - template = find_template(@section)
 = render( template , section: @section)
 
-.grid.grid-cols-3.gap-2.m-8
-  .relative.block.border.border-gray-100
+.flex.gap-2.m-8.flex-wrap
+  .basis-96
     %h3.mt-4.text-lg.font-bold Template  #{@section.template}
     = section_preview(@section , class: "w-full object-contain p-3")
     = yellow_button( "Change Template" , section_select_template_url(@section.id))
     = green_button( "New Section" , new_page_section_url(@section.page.id , template: @section.template) )
 
-  .relative.block.border.border-gray-100
+  .basis-96
+    %h3.mt-4.text-lg.font-bold Image
+    -if( @section.image.blank? )
+      %p No image
+    -else
+      = image_tag( "cms/" + @section.image , class: "p-3")
+    = yellow_button("Change Image", section_select_image_url(@section.id))
+    = red_button( "Remove image", section_set_image_path( @section.id  , image: ""))
+
+  .basis-80.grow
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
       %label.block
         %h4.text-lg.font-bold Header
@@ -30,24 +32,15 @@
         = text_area_tag( :text , @section.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 Image
-    -if( @section.image.blank? )
-      %p No image
-    -else
-      = image_tag( "cms/" + @section.image , class: "p-3")
-    = yellow_button("Change Image", section_select_image_url(@section.id))
-    = red_button( "Remove image", section_set_image_path( @section.id  , image: ""))
-
-.grid.grid-cols-3.gap-2.m-8
   - if( @section.has_cards? )
-    .relative.block.border.border-gray-100
+    .basis-full.h-0
+    .basis-96
       %h3.mt-4.text-lg.font-bold Card Template #{@section.card_template}
-      =card_preview(@section , class: "w-full object-contain")
+      =card_preview(@section , class: "p-3")
       %p.p-3
         =yellow_button("Change Card Template", section_select_card_template_url(@section.id))
 
-    .relative.block.border.border-gray-100
+    .basis-96.grow
       %h3.mt-4.text-lg.font-bold #{@section.cards.length} Cards
       -@section.cards.each do |card|
         .mt-4.text-md.font-bold= card.header
@@ -56,7 +49,7 @@
         = yellow_button( "View and Edit Cards" , section_cards_url(@section.id))
         = green_button( "New Card" , new_section_card_url(@section.id) )
 
-  .relative.block.border.border-gray-100
+  .basis-80.grow
     %h3.mt-4.text-lg.font-bold Options
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
       - @section.option_definitions.each do |option|