options for cards and new card styles

app/controllers/merged/cards_controller.rb

@@ -40,12 +40,15 @@ module Merged
 
     def update
       @card.allowed_fields.each do |key|
-        puts "Update Card #{key}"
         if( params.has_key?(key) )
           @card.update(key, params[key])
           puts "updating:#{key}=#{params[key]}"
         end
       end
+      options = params[:option]
+      @card.option_definitions.each do |option|
+        @card.set_option(option.name,  options[option.name])
+      end if options
       @card.save
       redirect_to section_cards_url(@card.section.id)
     end

app/controllers/merged/sections_controller.rb

@@ -69,7 +69,6 @@ module Merged
 
     def update
       @section.allowed_fields.each do |key|
-        puts "Update Section #{key}"
         if( params.has_key?(key) )
           @section.update(key, params[key])
           puts "updating:#{key}=#{params[key]}"

app/helpers/merged/merged_helper.rb

@@ -29,14 +29,32 @@ module Merged
       {class: "order-last"}
     end
 
+    def align_option(section)
+      return {} unless section.has_option?("align")
+      option = section.option('align')
+      puts "align #{option}"
+      # text-center , text-left , text-right , leave comment for tailwind
+      {class: "text-#{option}"}
+    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"
+      when "light_blue"
         background = "bg-cyan-100"
+      when "solid_blue"
+        background = "bg-cyan-700 text-white"
+      when "solid_red"
+        background = "bg-orange-800 text-white"
+      when "solid_green"
+        background = "bg-green-700 text-white"
+      when "solid_petrol"
+        background = "bg-teal-700 text-white"
+      when "solid_indigo"
+        background = "bg-indigo-800 text-white"
       else
         background = "white"
       end
@@ -55,7 +73,7 @@ module Merged
       else # two
         columns = "grid-cols-1 md:grid-cols-2"
       end
-      {class: columns}
+      {class: columns + " gap-6"}
 
     end
     def button(text , url , color)

app/models/merged/card.rb

@@ -4,6 +4,8 @@ module Merged
     include ActiveModel::Conversion
     extend  ActiveModel::Naming
 
+    include Optioned
+
     cattr_reader :all
     @@all = {}
 
@@ -24,6 +26,10 @@ module Merged
       @@all[self.id] = self
     end
 
+    def template_style
+      @section.card_template
+    end
+
     def destroy
       @section.remove_card( self)
     end

app/models/merged/optioned.rb

@@ -0,0 +1,28 @@
+module Merged
+  #relies only on @content["options"]
+  #and a method template_style
+  module Optioned
+    def has_option?(option)
+      options.has_key?(option)
+    end
+
+    def option_definitions
+      template_style.options
+    end
+
+    def option(name)
+      options[name]
+    end
+
+    def options
+      @content["options"] || {}
+    end
+
+    def set_option( option , value)
+      puts "#{template_style} setting option #{option}=#{value.class}"
+      @content["options"] = {} if @content["options"].nil?
+      options[option] = value
+    end
+
+  end
+end

app/models/merged/section.rb

@@ -3,6 +3,7 @@ module Merged
     include ActiveModel::API
     include ActiveModel::Conversion
     extend  ActiveModel::Naming
+    include Optioned
 
     cattr_reader :all
     @@all = {}
@@ -24,39 +25,12 @@ module Merged
       end
     end
 
-    [:template , :card_template , :id , :text , :header, :image, :options].each do |meth|
+    [:template , :card_template , :id , :text , :header, :image].each do |meth|
       define_method(meth) do
         @content[meth.to_s]
       end
     end
 
-    [:button_link , :button_text ].each do |meth|
-      define_method(meth) do
-        @content["options"][meth.to_s]
-      end
-    end
-
-    def has_option?(option)
-      options.has_key?(option)
-    end
-
-    def option_definitions
-      template_style.options
-    end
-
-    def option(name)
-      options[name]
-    end
-
-    def options
-      @content["options"] || {}
-    end
-
-    def set_option( option , value)
-      puts "#{template} setting option #{option}=#{value.class}"
-      @content["options"] = {} if @content["options"].nil?
-      options[option] = value
-    end
 
     def set_template(new_template)
       @content["template"] = new_template
@@ -77,6 +51,7 @@ module Merged
     def template_style
       Style.sections[ template ]
     end
+
     def allowed_fields
       template_style.fields
     end

app/views/merged/cards/index.haml

@@ -45,6 +45,12 @@
 
     .relative.block.border.border-gray-100
       %h3.mt-4.text-lg.font-bold Options
-      To be done
+      = form_tag( card_url(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" }) do
+        - card.option_definitions.each do |option|
+          =render "merged/sections/option_form_#{option.type}" , section: card , option: option
+        -if card.option_definitions.empty?
+          %p No options
+        -else
+          = submit_button("Update")
 %p
   = green_button( "New Card" , new_section_card_url(@section.id) )

app/views/merged/sections/select_card_template.haml

@@ -1,5 +1,5 @@
 .grid.grid-cols-4.gap-2.m-8
-  - @cards.each do |style|
+  - @cards.each do |name ,style|
     .relative.block.border.border-gray-100
       = link_to( section_set_card_template_path( card_template: style.template )) do
         =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72")

app/views/merged/sections/select_image.haml

@@ -8,7 +8,7 @@
       = hidden_field_tag :redirect , section_set_image_url(@section.id,image: "NEW")
       = file_field_tag 'image_file'
       .inline-block.rounded.border.border-indigo-600.bg-indigo-600.px-12.py-3.text-sm.font-medium.text-white.hover:bg-transparent.hover:text-indigo-600.focus:outline-none.focus:ring.active:text-indigo-500{:href => merged.new_image_path}
-        = submit_tag 'Submit'
+      = submit_tag 'Submit'
   -@images.each do |name , image|
     .relative.block.border.border-gray-100
       = link_to( section_set_image_path( image: name)) do

app/views/merged/view/_section_cards.haml

@@ -7,5 +7,5 @@
         = section.text
   - template = "merged/view/cards/" + section.card_template
   .grid{ column_option(section)}
-    - section.cards.each do |element|
+    - section.cards.each do |card|
-      = render( template , element: element)
+      = render( template , card: card)

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

@@ -1,7 +1,7 @@
 .group.m-4.overflow-hidden.relative.flex.h-96.items-end.bg-black
-  = image_for( element , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
+  = image_for( card , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
   .relative.w-full.bg-cyan-600.m-2.p-4.text-center.tracking-widest.text-white.transition-colors.group-hover:bg-cyan-700{:class => "sm:w-1/2"}
     %h3.text-lg.uppercase
-      = element.header
+      = card.header
     %p.mt-1.text-xs.font-medium
-      = element.text
+      = card.text

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

@@ -0,0 +1,16 @@
+%article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+  %img.h-56.w-full.object-cover{:alt => "Office", :src => "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"}/
+  .p-4.sm:p-6
+    %a{:href => "#"}
+      %h3.text-lg.font-medium.text-gray-900
+        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae
+      dolores, possimus pariatur animi temporibus nesciunt praesentium dolore
+      sed nulla ipsum eveniet corporis quidem, mollitia itaque minus soluta,
+      voluptates neque explicabo tempora nisi culpa eius atque dignissimos.
+      Molestias explicabo corporis voluptatem?
+    %a.group.mt-4.inline-flex.items-center.gap-1.text-sm.font-medium.text-blue-600{:href => "#"}
+      Find out more
+      %span.block.transition{"aria-hidden" => "true", :class => "group-hover:translate-x-0.5"}
+        →

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

@@ -0,0 +1,5 @@
+%div{background_option(card)}
+  = image_for( card , "h-96 w-full object-cover")
+  %div.m-4{align_option(card)}
+    %h3.mt-4.p-4.text-xl.font-bold= card.header
+    %p.mt-2.p-4= card.text

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

@@ -1,2 +1,2 @@
-- unless section.button_text.blank? or section.button_link.blank?
+- unless section.has_option?("button_text") and section.has_option?("button_link")
   = blue_button( section.button_text , section.button_link)

config/styles.yaml

@@ -1,9 +1,9 @@
 ---
 sections:
-- template: section_2_col
+- template: section_cards
-  header: Two column  layout with header
+  header: Two or more column layout with header
   text: A header with text and two column layout. Columns have a little gap, so
-    background color comes through.
+    background color comes through. 2,3 or 4 columns. Cards freely choosable
   cards: true
   fields:
     - header
@@ -51,6 +51,21 @@ cards:
   fields:
     - header
     - text
+- template: card_normal_square
+  header: Standard card with square image
+  text: Image, header, text, normal stuff
+  fields:
+    - header
+    - text
+  options:
+    - background
+    - align
+- template: card_normal_round
+  header: Standard card with square image
+  text: Image, header, text, normal stuff
+  fields:
+    - header
+    - text
 options:
   - name: fixed
     desciption:
@@ -65,9 +80,15 @@ options:
     default: 3
   - name: background
     desciption:
-      Slight background color
+      Background colors. Light colors stay with black text.
-    values: white blue
+      Solid colors invert to white text.
+    values: white light_blue solid_blue solid_red solid_indigo
     default: white
+  - name: align
+    desciption:
+      Align text of children. Normal Word meaning
+    values: left center right
+    default: left
   - name: order
     desciption:
       For two column layout determine order of sub-cards

spec/models/merged/style_spec.rb

@@ -22,7 +22,7 @@ module Merged
       expect(spacer.fields).to be nil
     end
     it "2 col has fields" do
-      spacer = Style.sections["section_2_col"]
+      spacer = Style.sections["section_cards"]
       expect(spacer.fields.class).to be Array
       expect(spacer.fields.length).to be 2
     end

test/dummy/cms/index.yaml

@@ -1,5 +1,5 @@
 ---
-- template: section_2_col
+- template: section_cards
   header: Sizes and kinds
   text: We offer different sizes and different types of studios for artists. There
     large and small rooms, with more or less light, also rooms with tiles for wet-work.