implement item alignment (justify on flex) for sections

app/helpers/merged/options_helper.rb

@@ -19,9 +19,23 @@ module Merged
     end
 
     def text_align_option(section , clazz = "")
-      if section.has_option?("align")
+      if section.has_option?("text_align")
         # text-center , text-left , text-right , leave comment for tailwind
-        clazz += " text-#{section.option('align')}"
+        clazz += " text-#{section.option('text_align')}"
+      end
+      {class: clazz}
+    end
+
+    def item_align_option(section , clazz = "")
+      if section.has_option?("item_align")
+        case section.option("item_align")
+        when "left"
+          clazz += " justify-start"
+        when "right"
+          clazz += " justify-end"
+        else
+          clazz += " justify-center"
+        end
       end
       {class: clazz }
     end

app/views/merged/sections/_option_form_select.haml

@@ -1,4 +1,4 @@
 %label.block
   .mt-4.text-lg.font-bold
-    = option.name.capitalize
+    = option.name.camelcase
   = select_tag( "option[#{option.name}]" , options_for_select(option.values, section.option(option.name)), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

app/views/merged/sections/_option_form_text.haml

@@ -1,4 +1,4 @@
 %label.block
   .mt-4.text-lg.font-bold
-    = option.name
+    = option.name.camelcase
   = text_field_tag( "option[#{option.name}]" , section.option(option.name), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

app/views/merged/sections/index.haml

@@ -15,11 +15,11 @@
         = yellow_button("Edit" , section_path(section.id) )
         = green_button( "Copy" , new_page_section_url(@page.id, template: section.template) )
         .p-2
-          =link_to(section_move_url(section.id , dir: :up)) do
+          =link_to(section_move_url(section.id , dir: :down)) do
             %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
               %path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
         .p-2
-          =link_to(section_move_url(section.id , dir: :down)) do
+          =link_to(section_move_url(section.id , dir: :up)) do
             %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
               %path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
         .basis-full.mb-3

app/views/merged/view/_section_cards.haml

@@ -1,6 +1,6 @@
-.flex.flex-col.m-20{ options(section , :background , :color)}
+%section.m-20{ options(section , :background , :color)}
-  .flex.items-center.justify-center.flex-1
+  .flex{ item_align_option( section)}
-    .max-w-prose.px-4.py-16.mx-auto.text-center
+    .max-w-prose.px-4.py-16{ options(section , :text_align)}
       %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
         = section.header
       %p.mt-4.text-lg.pt-10

app/views/merged/view/_section_full_image.haml

@@ -1,13 +1,8 @@
 %section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{bg(section)}
   .px-4.py-8.sm:px-6.lg:px-8
-    .grid.grid-cols-1.md:grid-cols-3
+    .flex{ item_align_option( section)}
-      -if(section.option("align") == "center")
+      .p-8.md:p-12.lg:px-16.lg:py-24{options(section , :shade )}
-        %div
+        .mx-auto.max-w-xl{ options(section , :color, :text_align)}
-      -if(section.option("align") == "right")
-        %div
-        %div
-      .p-8.md:p-12.lg:px-16.lg:py-24{shade_option(section)}
-        .mx-auto.max-w-xl{ options(section , :color)}
           %h2.text-2xl.font-bold.md:text-5xl
             = section.header
           %p.hidden.sm:mt-4.sm:block.text-2xl
@@ -15,8 +10,3 @@
           .mt-4.md:mt-8
             -if section.has_option?("button_text")
               = render 'merged/view/elements/button' , section: section
-      -if(section.option("align") == "center")
-        %div
-      -if(section.option("align") == "left")
-        %div
-        %div

app/views/merged/view/_section_full_up.haml

@@ -1,6 +1,6 @@
-.flex.flex-col{ options(section , :background , :color , :margin)}
+%section{ options(section , :background , :margin)}
-  .flex.items-center.justify-center.flex-1
+  .flex{ options(section , :item_align )}
-    .max-w-prose.px-4.py-16.mx-auto.text-center{options(section , :text_align , :color)}
+    .px-4.py-16.mx-20{options(section , :text_align , :color)}
       %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
         = section.header
       -if section.has_option?("subheader")

app/views/merged/view/_section_half_header.haml

@@ -1,12 +0,0 @@
-%section.m-20
-  .mx-auto.max-w-screen-xl.px-4.py-16.sm:px-6.sm:py-24.lg:px-8
-    .max-w-3xl
-      %h2.text-3xl.font-bold.sm:text-4xl
-        = section.header
-    .mt-8.grid.grid-cols-1.gap-8.lg:grid-cols-2.lg:gap-16
-      .relative.h-64.overflow-hidden.sm:h-80.lg:h-full
-        %img.absolute.inset-0.h-full.w-full.object-cover{:alt => "Party", :src => "https://images.unsplash.com/photo-1496843916299-590492c751f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80"}/
-      .lg:py-16
-        %article.space-y-4.text-gray-600
-          %p
-            = markdown(section)

app/views/merged/view/elements/_button.haml

@@ -1,2 +1,4 @@
 - if section.has_option?("button_text") and section.has_option?("button_link")
-  = blue_button( section.option("button_text") , section.option("button_link"))
+  = link_to section.option("button_link") do
+    .mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400.bg-green-700.hover:bg-blue-800
+      = section.option("button_text")

config/merged/section_styles.yml

@@ -11,6 +11,8 @@
     - background
     - columns
     - color
+    - text_align
+    - item_align
 - template: section_full_up
   header: Centered Header with text
   text: Full width header with centered headline and optional text
@@ -22,6 +24,8 @@
     - color
     - margin
     - subheader
+    - text_align
+    - item_align
     - button_link
     - button_text
 - template: section_half_image
@@ -53,6 +57,7 @@
     - fixed
     - color
     - text_align
+    - item_align
     - shade_color
 - template: section_large_image
   header: Two third image header with adjustable text