inlined section editors, improved layout

app/models/merged/card.rb

@@ -9,6 +9,12 @@ module Merged
 
     attr_reader  :content  , :index , :section
 
+    [ :id , :text , :header, :image ].each do |meth|
+      define_method(meth) do
+        @content[meth.to_s]
+      end
+    end
+
     def initialize(section , index , card_data)
       @section = section
       @index = index
@@ -18,9 +24,6 @@ module Merged
       @@all[self.id] = self
     end
 
-    def id
-      @content['id']
-    end
 
     def update(key , value)
       return if key == "id" #not updating that

app/models/merged/section.rb

@@ -32,7 +32,7 @@ module Merged
     end
 
     def cards?
-      @content["cards"] == true
+      ! cards.empty?
     end
 
     def update(key , value)

app/views/merged/sections/editors/_button.haml

@@ -1,9 +0,0 @@
-.relative.block.border.border-gray-100
-  %h3.mt-4.text-lg.font-bold= key.upcase
-  %p
-    .font-bold Text
-    = value["text"]
-.relative.block.border.border-gray-100
-  %p
-    .font-bold Link
-    = value["link"]

app/views/merged/sections/editors/_card_template.haml

@@ -1,11 +0,0 @@
-.relative.block.border.border-gray-100
-  %h3.mt-4.text-lg.font-bold= key.upcase
-  %p= value
-  %p #{section.content['cards'].length} cards
-  %p view cards (index)
-  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
-    =link_to "View and Edit Cards" , section_cards_url(@section.id)
-  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
-    =link_to "Change Card Template" , section_select_card_template_url(@section.id)
-.relative.block.border.border-gray-100
-  =image_tag("merged/card_preview/#{value}" , class: "w-full object-contain")

app/views/merged/sections/editors/_header.haml

@@ -1,6 +0,0 @@
-.relative.block.border.border-gray-100
-  %h3.mt-4.text-lg.font-bold= key.upcase
-= section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
-  = text_field_tag( :header , @section.content["header"], class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
-    Update

app/views/merged/sections/editors/_image.haml

@@ -1,13 +0,0 @@
-.relative.block.border.border-gray-100
-  %h3.mt-4.text-lg.font-bold= key.upcase
-  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
-    =link_to "Change Image" , section_select_image_url(@section.id)
-  %button.ml-3.inline-block.rounded-lg.bg-red-500.px-5.py-3.text-md.font-medium.text-white
-    = link_to( "Remove image" , section_set_image_path( @section.id  , image: ""))
-
-
-.relative.block.border.border-gray-100
-  -if( value.blank? )
-    No image
-  -else
-    = image_tag( "cms/" + value)

app/views/merged/sections/editors/_template.haml

@@ -1,6 +0,0 @@
-.relative.block.border.border-gray-100
-  %h3.mt-4.text-lg.font-bold= key.upcase + " : " + value
-  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
-    =link_to "Change Template" , section_select_template_url(@section.id)
-.relative.block.border.border-gray-100
-  =image_tag("merged/section_preview/#{section.template}" , class: "w-full object-contain")

app/views/merged/sections/editors/_text.haml

@@ -1,7 +0,0 @@
-.relative.block.border.border-gray-100
-  %h3.mt-4.text-lg.font-bold= key.upcase
-.relative.block.border.border-gray-100
-  = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
-    = text_area_tag( :text , @section.content["text"], class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-    %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
-      Update

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

@@ -37,7 +37,7 @@
         -if section.image
           = image_tag "cms/" + section.image
         -else
-          No image
+          %p No image
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Options
       %p To be done

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

@@ -9,6 +9,50 @@
     %h3.text-xl.font-bold.tracking-tight.text-gray-900
       Section #{@section.id}
 
-.grid.grid-cols-2.gap-2.m-8
+.grid.grid-cols-3.gap-2.m-8
-  - @section.content.each do |key , value|
+  .relative.block.border.border-gray-100
-    = render "merged/sections/editors/#{key}", section: @section , key: key , value: value
+    %h3.mt-4.text-lg.font-bold Template  #{@section.template}
+    = section_preview(@section , class: "w-full object-contain p-3")
+    %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+      =link_to "Change Template" , section_select_template_url(@section.id)
+
+  .relative.block.border.border-gray-100
+    = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
+      %h3.mt-4.text-lg.font-bold Header
+      = text_field_tag( :header , @section.header, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+      %h3.mt-4.text-lg.font-bold Text
+      = text_area_tag( :text , @section.text, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+      %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
+        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")
+    %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+      =link_to "Change Image" , section_select_image_url(@section.id)
+    %button.ml-3.inline-block.rounded-lg.bg-red-500.px-5.py-3.text-md.font-medium.text-white
+      = link_to( "Remove image" , section_set_image_path( @section.id  , image: ""))
+
+
+.grid.grid-cols-3.gap-2.m-8
+  - if( @section.cards? )
+    .relative.block.border.border-gray-100
+      %h3.mt-4.text-lg.font-bold Card Template #{@section.card_template}
+      =card_preview(@section , class: "w-full object-contain")
+      %p.p-3
+        %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+          =link_to "Change Card Template" , section_select_card_template_url(@section.id)
+    .relative.block.border.border-gray-100
+      %h3.mt-4.text-lg.font-bold #{@section.cards.length} Cards
+      -@section.cards.each do |card|
+        .mt-4.text-md.font-bold= card.header
+        .text-sm "#{card.text[0..70]} ....."
+      %p.p-3
+        %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+          =link_to "View and Edit Cards" , section_cards_url(@section.id)
+  .relative.block.border.border-gray-100
+    %h3.mt-4.text-lg.font-bold Options
+    To be done