changing to flex, polishing menu

app/views/merged/cards/index.haml

@@ -2,8 +2,8 @@
   .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
-      Cards for
+    Cards for
-      = link_to "Section #{@section.index}", section_url( @section.id) , class: "underline"
+    = link_to "Section #{@section.index}", section_url( @section.id) , class: "underline"
 
 = render "layouts/merged_header"
 

app/views/merged/images/index.haml

@@ -1,3 +1,7 @@
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    All Images
+
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-4.m-8

app/views/merged/pages/index.haml

@@ -1,3 +1,7 @@
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    All Pages
+
 = render "layouts/merged_header"
 .overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.m-20
   %table.min-w-full.divide-y.divide-gray-200.text-sm

app/views/merged/sections/index.html.haml

@@ -8,8 +8,8 @@
 = render "layouts/merged_header"
 
 -@page.sections.each do |section |
-  .flex.gap-10.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
+  .flex.gap-10.p-4{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
-    .basis-52
+    .basis-80
       %h3.mt-4.text-lg.font-bold Section #{section.index} : #{section.header}
       = blue_button( "Up" , section_move_url(section.id , dir: :up) )
       = blue_button( "Down" , section_move_url(section.id , dir: :down) )
@@ -17,17 +17,17 @@
       = green_button( "Copy" , new_page_section_url(@page.id, template: section.template) )
       = form_tag( section_url(section.id) , {method: :delete  } ) do
         =submit_button( "Delete" , true)
-    .basis-52.grow-0
+    .basis-72
       %h3.mt-4.text-lg.font-bold Template
       = link_to(section_select_template_url(section.id)) do
         %p= section.template
         = section_preview(section , class: "object-contain")
-    .basis-52
+    .basis-52.grow
       %h3.mt-4.text-lg.font-bold Header
       %p= section.header
       %h3.mt-4.text-lg.font-bold Text
       %p= section.text[0..100] + " ..." if section.text
-    .basis-52
+    .basis-72
       - if section.has_cards?
         %h3.mt-4.text-lg.font-bold #{section.cards.length} Cards
         =link_to section_cards_url(section.id) do
@@ -39,7 +39,7 @@
             = image_tag( "cms/" + section.image , class: "h-40")
           -else
             %p No image
-    .basis-52
+    .basis-52.grow
       %h3.mt-4.text-lg.font-bold Options
       - section.options.each do|name , value|
         %p

app/views/merged/sections/select_template.haml

@@ -2,7 +2,7 @@
   .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 Template for Section #{@section.index}
+    Select Template for Section #{@section.index} - #{@section.header}
 
 = render "layouts/merged_header"
 

app/views/merged/sections/show.html.haml

@@ -2,7 +2,7 @@
   .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 #{@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

app/views/merged/styles/index.haml

@@ -1,8 +1,9 @@
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Section styles
+
 = render "layouts/merged_header"
 
-.px-4.py-8.mx-auto.text-center
-  %h1.text-4xl.font-bold
-    Section styles
 .grid.grid-cols-3.gap-4.m-8
   -@section_styles.each do | style|
     %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm