make test sectio multi column

app/helpers/merged/merged_helper.rb

@@ -18,6 +18,14 @@ module Merged
       self.renderer.render(text).html_safe
     end
 
+    def split_section(section)
+      return [""] if section.text.blank?
+      words = self.renderer.render(section.text).split
+      bins = (words.length + 3) / section.option("columns").to_i
+      parts = words.each_slice(bins).to_a
+      parts.collect{|part| part.join(" ").html_safe}
+    end
+
     def aspect_ratio image
       x , y = image.aspect_ratio
       "#{x} / #{y}"

app/helpers/merged/view_helper.rb

@@ -2,6 +2,14 @@ module Merged
   module ViewHelper
     include MergedHelper
 
+    def rows( text )
+      return 5 if text.blank?
+      text = text.text unless text.is_a?(String)
+      rows = (text.length / 60).to_i
+      return 5 if rows < 5
+      rows
+    end
+
     # background image as inline style
     def bg(section , clazz = "")
       attributes = {class: clazz}

app/models/merged/page.rb

@@ -1,9 +1,9 @@
 module Merged
   class Page < ViewBase
 
-    fields :name , :type , :options, :redirects
+    fields :name , :type , :options, :redirects , :section_template
 
-    alias :template :type
+    alias :template :section_template
 
     def change_name
       self.name

app/views/merged/sections/show.haml

@@ -35,7 +35,7 @@
         = text_field_tag( :header , @section.header, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
       %label.block
         %h4.mt-4.text-lg.font-bold Text
-        = text_area_tag( :text , @section.text, rows: 5 ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+        = text_area_tag( :text , @section.text, rows: rows(@section) ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
       .mt-4= submit_button("Update")
 
   - if( @section.has_cards? )

app/views/merged/view/_section_cards.haml

@@ -1,5 +1,5 @@
 %section.m-20{ options(section , :background , :color)}
-  .flex{ item_align_option( section)}
+  .flex.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

app/views/merged/view/_section_text.haml

@@ -1,9 +1,14 @@
-%section{ options(section , :background , :margin)}
+.p-20.my-20{ options(section , :background , :color)}
-  .px-4.py-16.mx-20{options(section , :text_align , :color)}
+  %section
-    %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
+    .flex.justify-center
-      = section.header
+      .max-w-prose{ options(section , :text_align)}
-    -if section.has_option?("subheader")
+        - if !section.header.blank?
-      %h4.text-xl.mt-10.md:text-2xl
+          %h1.mb-10.text-2xl.font-bold.tracking-tight.sm:text-4xl
-        = section.option("subheader")
+            = section.header
-    .prose.mt-4.text-lg.pt-10
+        -if section.has_option?("subheader")
-      = markdown(section)
+          %p.prose.text-xl.pb-6
+            = section.option("subheader")
+
+    .mt-4.grid.gap-16{ column_option(section)}
+      - split_section(section).each do |part|
+        .prose.text-justify= part

config/merged/section_styles.yml

@@ -30,16 +30,16 @@
     - button_text
 - template: section_text
   header: Text only section for longer passages of text, mostly news
-  text: Text may be markdown
+  text: Text may be markdown. For longer text culumns should be set.
   fields:
     - header
     - text
   options:
+    - columns
     - background
     - color
     - margin
     - subheader
-    - text_align
 - template: section_half_image
   header: Split section with image left or right
   text: Image on one side, header and text on the other.