feature section, split. more column options

app/helpers/merged/options_helper.rb

@@ -111,8 +111,9 @@ module Merged
 
     def column_option(section)
       option = section.option('columns')
-      option = 2 if option.blank?
       case option
+      when "1"
+        columns = "grid-cols-1"
       when "3"
         columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       when "4"

app/models/merged/active_base.rb

@@ -35,7 +35,7 @@ module Merged
     def self.save_all
       data = @records.collect {|obj| obj.attributes}
       File.write( self.full_path , data.to_yaml)
-      self.reload
+      self.reload(true)
     end
 
     def self.delete(id) # only works with id's

app/views/merged/view/_section_feature.haml

@@ -0,0 +1,14 @@
+%section.m-5.md:m-12.lg:m-20{ options(section , :background , :color)}
+  .grid.grid-cols-1.md:grid-cols-2
+    .flex.flex-col.lg:flex-row
+      .max-w-xl.pr-16.mx-auto.mb-10
+        %h2.my-4.md:my-10.text-4xl.font-extrabold.leading-none
+          = section.header
+        .mb-6{ prose_classes }
+          = markdown(section)
+        .flex.items-center
+          %a.inline-flex.items-center.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"} Learn more
+    - template = "merged/view/cards/" + section.card_template
+    .grid{ column_option(section)}
+      - section.cards.each do |card|
+        = render( template , card: card)

app/views/merged/view/cards/_card_feature_box.haml

@@ -1,4 +1,4 @@
-.relative.p-px.overflow-hidden.transition.duration-300.transform.border.rounded.shadow-sm.hover:scale-105.group.hover:shadow-xl
+.m-3.relative.p-px.overflow-hidden.transition.duration-300.transform.border.rounded.shadow-sm.hover:scale-105.group.hover:shadow-xl
   .absolute.bottom-0.left-0.w-full.h-1.duration-300.origin-left.transform.scale-x-0.bg-deep-purple-accent-400.group-hover:scale-x-100
   .absolute.bottom-0.left-0.w-1.h-full.duration-300.origin-bottom.transform.scale-y-0.bg-deep-purple-accent-400.group-hover:scale-y-100
   .absolute.top-0.left-0.w-full.h-1.duration-300.origin-right.transform.scale-x-0.bg-deep-purple-accent-400.group-hover:scale-x-100
@@ -12,4 +12,3 @@
       = markdown(card)
     - if card.has_option?("button_link")
       %a.inline-flex.items-center.text-sm.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"} Learn more
-      

app/views/merged/view/cards/_card_feature_normal.haml

@@ -1,7 +1,7 @@
 .max-w-md.sm:mx-auto.sm:text-center
-  .flex.items-center.justify-center.mb-4.rounded-full.mx-auto.w-40.h-40{options(card,:background )}
+  .mt-4.flex.items-center.justify-center.mb-4.rounded-full.mx-auto.w-40.h-40{options(card,:background )}
     = image_for( card , "h-20 w-20")
-  %h6.mb-3.text-xl.font-bold.leading-5{options(card, :color)}= card.header
+  %h4.mb-3.text-xl.font-bold.leading-5{options(card, :color)}= card.header
   .mb-3.text-sm.text-gray-900{ prose_classes }
     = markdown(card)
   - if card.has_option?("button_link")

config/merged/option_definitions.yml

@@ -6,7 +6,7 @@
   :id: 1
 - :name: columns
   :description: Number of columns in a layout that supports cards
-  :values: 2 3 4 5 6
+  :values: 1 2 3 4 5 6
   :default: 3
   :id: 2
 - :name: background

config/merged/section_styles.yml

@@ -1,8 +1,23 @@
 ---
 - template: section_cards
-  header: Two or more column layout with header
+  header: Section with Cards, 2-6 columns
-  text: A header with text and two column layout. Columns have a little gap, so
+  text: A header with text and column layout. Columns have a little gap, so
-    background color comes through. 2,3 or 4 columns. Cards freely choosable
+    background color comes through. 2 - 6 columns. Cards freely choosable
+  cards: true
+  fields:
+    - header
+    - text
+  options:
+    - background
+    - columns
+    - subheader
+    - color
+    - text_align
+- template: section_feature
+  header: Feature section with 2 column,
+  text: A split header with two column layout on the right.
+        Cards can be choosen freely but columns should be carefully
+        choosen to fit.
   cards: true
   fields:
     - header