new section with two third image. margin option

app/helpers/merged/options_helper.rb

@@ -11,12 +11,13 @@ module Merged
       all
     end
 
-    def order_option(section)
+    def order_option(section , clazz = "")
-      return {} unless section.has_option?("order")
+      if section.has_option?("order")
-      option = section.option('order')
+        option = section.option('order')
-      puts "Order #{option}"
+        puts "Order #{option}"
-      return {} if option == "left"
+        clazz += " order-last" if option == "right"
-      {class: "order-last"}
+      end
+      {class: clazz}
     end
 
     def align_option(section)
@@ -36,6 +37,13 @@ module Merged
       {class: background}
     end
 
+    def margin_option(section)
+      return {} unless section.has_option?("margin")
+      option = section.option('margin')
+      puts "Margin #{option}"
+      {class: margin_for(option)}
+    end
+
     def color_option(section)
       return {} unless section.has_option?("color")
       option = section.option('color')
@@ -71,7 +79,7 @@ module Merged
       { "white" =>  "bg-white" ,
         "none" =>  "" ,
         "light_blue" => "bg-cyan-100" ,
-        "light_grey" => "bg-grey-100" ,
+        "light_gray" => "bg-gray-100" ,
         "light_orange" => "bg-orange-50" ,
         "solid_blue" => "bg-cyan-700" ,
         "solid_red" => "bg-orange-800" ,
@@ -81,6 +89,13 @@ module Merged
         "solid_black" => "bg-slate-900" ,
       }[option] || ""
     end
+    # need full margin names for tailwind to pick it up
+    def margin_for( option )
+      { "0" =>  "m-0" ,
+        "none" =>  "" ,
+        "20" => "m-20" ,
+      }[option] || ""
+    end
     # need full color names for tailwind to pick it up
     def color_for( option )
       { "white" => "text-white",

app/helpers/merged/view_helper.rb

@@ -7,16 +7,17 @@ module Merged
     end
 
     # background image as inline style
-    def bg(section)
+    def bg(section , clazz = "")
-      return {class: ""} if section.image.blank?
+      attributes = {class: clazz}
+      return attributes if section.image.blank?
       #puts "--#{Image.image_root}/#{section.image}--"
       img = asset_url( "#{Image.image_root}/#{section.image}" )
-      style = {"style" => "background-image: url('#{img}');" }
+      attributes["style"] = "background-image: url('#{img}');"
       if(section.option("fixed") == "on")
-        style[:class] = "bg-fixed"
+        attributes[:class] = attributes[:class] + " bg-fixed"
         puts "Adding fixed"
       end
-      style
+      attributes
     end
 
     # works for with sections and cards that respond to .image

app/models/merged/section.rb

@@ -90,6 +90,16 @@ module Merged
       @page.move_section_down(self)
     end
 
+    def previous_section
+      return nil if index == 0
+      page.sections[index - 1]
+    end
+
+    def next_section
+      return nil if index == (page.sections.length - 1)
+      page.sections[index + 1]
+    end
+
     def move_card_up(card)
       return if cards.length == 1
       return if card.index == 0

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

@@ -8,13 +8,17 @@
         Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"}
   .flex.items-center.justify-center.flex-1
     %h3.text-xl.font-bold.tracking-tight.text-gray-900
-      Section #{@section.index + 1}
+      Section #{@section.index + 1} / #{@section.page.sections.length}
-
+      - unless @section.index == 0
+        =link_to "(prev)" , section_url(@section.previous_section.id) 
+      - unless @section.index == (@section.page.sections.length - 1)
+        =link_to "(next)" , section_url(@section.next_section.id)
 .grid.grid-cols-3.gap-2.m-8
   .relative.block.border.border-gray-100
     %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.name) )
 
   .relative.block.border.border-gray-100
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do

app/views/merged/view/_section_full_up.haml

@@ -1,4 +1,4 @@
-.flex.flex-col.m-20{ options(section , :background , :color)}
+.flex.flex-col{ options(section , :background , :color , :margin)}
   .flex.items-center.justify-center.flex-1
     .max-w-prose.px-4.py-16.mx-auto.text-center
       %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl

app/views/merged/view/_section_large_image.haml

@@ -0,0 +1,8 @@
+.flex.justify-center.h-96.p-8{margin_option(section )}
+  .flex.items-center.w-full.overflow-hidden{order_option(section, "w-2/3")}
+    = image_for(section ,"")
+  .flex.items-center.w-full.max-w-md.px-6.mx-auto{:class => "w-1/3"}
+    .flex-1{color_option(section)}
+      .text-center
+        %h2.text-4xl.font-bold.text-center.mb-8= section.header
+        %p.mt-3= section.text

config/styles.yaml

@@ -21,6 +21,7 @@ sections:
   options:
     - background
     - color
+    - margin
     - button_link
     - button_text
 - template: section_half_image
@@ -41,10 +42,10 @@ sections:
     - button_text
 - template: section_full_image
   header: Full image header with adjustable text
-  text: Large picture background with Header and text towards
+  text: Large picture background with Header and text on top.
-    adjustable alignment (left, center, right).
+    Adjustable alignment (left, center, right).
     Text may be slightly shaded for readability,
-    text color can be changed too
+    text color can be changed too.
   fields:
     - header
     - text
@@ -53,6 +54,19 @@ sections:
     - color
     - align
     - shade_color
+- template: section_large_image
+  header: Two third image header with adjustable text
+  text: Large picture background with Header and text offset.
+    Adjustable alignment (left, center, right).
+    Text section may have background color.
+    Text color can be changed too
+  fields:
+    - header
+    - text
+  options:
+    - order
+    - color
+    - background
 - template: section_spacer
   header: Spacer
   text: Just for extra padding
@@ -97,13 +111,13 @@ options:
     desciption:
       Background colors. Light colors stay with black text.
       Solid colors invert to white text.
-    values: white none light_blue light_grey light_orange solid_blue solid_red solid_indigo
+    values: white none light_blue light_gray light_orange solid_blue solid_red solid_indigo
     default: none
   - name: color
     desciption:
       Text colors. Don't use with solid background colors.
       Same colors as background available. Default none, meas as parent.
-    values: none white light_blue light_grey solid_black solid_blue solid_red solid_indigo
+    values: none white light_blue light_gray solid_black solid_blue solid_red solid_indigo
     default: none
   - name: shade_color
     desciption:
@@ -123,6 +137,12 @@ options:
       For cards it can also mean up and down
     values: left right
     default: left
+  - name: margin
+    desciption:
+      Most sections have standard margin of 20.
+      This option makes it possible to remove that
+    values: 0 20
+    default: 20
   - name: button_text
     desciption:
       Text for an optional button. Must also set button_link