background color for two col

app/controllers/merged/sections_controller.rb

@@ -78,7 +78,7 @@ module Merged
       options = params[:option]
       @section.option_definitions.each do |option|
         @section.set_option(option.name,  options[option.name])
-      end
+      end if options
       @section.save
       redirect_to :section
     end

app/helpers/merged/merged_helper.rb

@@ -23,9 +23,23 @@ module Merged
 
     def order_option(section)
       return {} unless section.has_option?("order")
-      puts "Option #{section.option('order')}"
-      return {} if section.option("order") == "left"
-      {class: "order-first"}
+      puts "Order #{section.option('order')}"
+      return {} if section.option("order") == "right"
+      {class: "order-last"}
+    end
+
+    def background_option(section)
+      return {} unless section.has_option?("background")
+      option = section.option('background')
+      puts "Background #{option}"
+      return {} if option == "white"
+      case option
+      when "blue"
+        background = "bg-cyan-100"
+      else
+        background = "white"
+      end
+      {class: background}
     end
 
     def button(text , url , color)

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

@@ -4,6 +4,9 @@
       %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
         Page
         = @page.name
+  .flex.items-center.justify-center.flex-1
+    %h3.text-xl.font-bold.tracking-tight.text-gray-900
+      =link_to "View live" , "/#{@page.name}" , target: @page.name
 
 -@page.sections.each do |section |
   .grid.grid-cols-5.gap-2.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' }

app/views/merged/view/_section_half_image.haml

@@ -1,10 +1,11 @@
 %section.overflow-hidden.sm:grid.sm:grid-cols-2
+  %div{ order_option(section)}
     = image_for( section , "p-5 h-56 w-full object-cover sm:h-full")
-  .p-8.m-5.bg-cyan-100.md:p-12.lg:px-16.lg:py-24{ order_option(section)}
+  .p-8.m-5.md:p-12.lg:px-16.lg:py-24{ background_option(section)}
     .mx-auto.max-w-xl.text-center.sm:text-left
       %h2.text-2xl.font-bold.text-gray-900.md:text-3xl
         = section.header
-      %p.hidden.text-gray-500.md:mt-4.md:block
+      %p.text-gray-500.mt-4.md:block
         = section.text
       .mt-4.md:mt-8
         -if section.has_option?("button_text")

config/styles.yaml

@@ -25,6 +25,7 @@ sections:
     - button_link
     - button_text
     - order
+    - background
 - template: section_full_left
   header: Full image header, text left
   text: Large picture background with Header and text towards the left.
@@ -52,6 +53,11 @@ options:
       during scrolling
     values: on off
     default: off
+  - name: background
+    desciption:
+      Slight background color
+    values: white blue
+    default: white
   - name: order
     desciption:
       For two column layout determine order of sub-cards