diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb index a8e8ed2..741f8fa 100644 --- a/app/helpers/merged/merged_helper.rb +++ b/app/helpers/merged/merged_helper.rb @@ -21,70 +21,5 @@ module Merged end end - def order_option(section) - return {} unless section.has_option?("order") - option = section.option('order') - puts "Order #{option}" - return {} if option == "right" - {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 "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 - {class: background} - end - - def column_option(section) - option = section.option('columns') - option = 2 if option.blank? - puts "Columns #{option}" - case option - when "3" - columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" - when "4" - columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" - else # two - columns = "grid-cols-1 md:grid-cols-2" - end - {class: columns } - - end - def button(text , url , color) - link_to(url) do - content_tag(:button , class: color + " " + button_classes ) do - text - end - end - end - def button_classes - "ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white" - end end end diff --git a/app/helpers/merged/options_helper.rb b/app/helpers/merged/options_helper.rb new file mode 100644 index 0000000..9cb9882 --- /dev/null +++ b/app/helpers/merged/options_helper.rb @@ -0,0 +1,91 @@ +module Merged + module OptionsHelper + + # use options with as many option names as neccessary + def options(section, *args ) + all = {} + args.each do |option_name| + hash = send "#{option_name}_option".to_sym , section + all.merge!(hash) { |key, one, two| one.to_s + " " + two.to_s } + end + all + end + + def order_option(section) + return {} unless section.has_option?("order") + option = section.option('order') + puts "Order #{option}" + return {} if option == "left" + {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}" + background = bg_for(option) + background += " text-white" if option.include?("solid") + {class: background} + end + + def color_option(section) + return {} unless section.has_option?("color") + option = section.option('color') + puts "Text color #{option} , #{color_for(option)}" + {class: color_for(option) } + end + + def column_option(section) + option = section.option('columns') + option = 2 if option.blank? + puts "Columns #{option}" + case option + when "3" + columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" + when "4" + columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" + else # two + columns = "grid-cols-1 md:grid-cols-2" + end + {class: columns } + end + + private + # need full color names for tailwind to pick it up + def bg_for( option ) + { "white" => "bg-white" , + "none" => "" , + "light_blue" => "bg-cyan-100" , + "light_grey" => "bg-grey-100" , + "light_orange" => "bg-orange-50" , + "solid_blue" => "bg-cyan-700" , + "solid_red" => "bg-orange-800" , + "solid_green" => "bg-green-700" , + "solid_petrol" => "bg-teal-700" , + "solid_indigo" => "bg-indigo-800" , + "solid_black" => "bg-slate-900" , + }[option] || "" + end + # need full color names for tailwind to pick it up + def color_for( option ) + { "white" => "text-white", + "none" => "", + "light_blue" => "text-cyan-100" , + "solid_blue" => "text-cyan-700" , + "solid_red" => "text-orange-800" , + "solid_green" => "text-green-700" , + "solid_petrol" => "text-teal-700" , + "solid_indigo" => "text-indigo-800" , + "solid_black" => "text-slate-900" , + }[option] || "" + end + end +end diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb index ff927bb..87a4d61 100644 --- a/app/helpers/merged/view_helper.rb +++ b/app/helpers/merged/view_helper.rb @@ -1,6 +1,6 @@ module Merged module ViewHelper - include MergedHelper + include OptionsHelper # section should be hash with at least 'template' key def find_template(section) "merged/view/" + section.template @@ -25,5 +25,16 @@ module Merged image_tag("#{Image.image_root}/#{element.image}" , class: classes) end + def button(text , url , color) + link_to(url) do + content_tag(:button , class: color + " " + button_classes ) do + text + end + end + end + def button_classes + "ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white" + end + end end diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index 5cd69db..56fea8f 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -16,7 +16,7 @@ - @section.cards.each_with_index do |card , index| .relative.block.border.border-gray-100 .p-4 - %h3.mt-4.text-lg.font-bold Card #{index + 1} + %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header} = blue_button( "Up" , card_move_url(card.id , dir: :up) ) = blue_button( "Down" , card_move_url(card.id , dir: :down) ) = form_tag( card_url(card.id) , {method: :delete } ) do diff --git a/app/views/merged/view/_section_cards.haml b/app/views/merged/view/_section_cards.haml index 38396a5..8fb24fc 100644 --- a/app/views/merged/view/_section_cards.haml +++ b/app/views/merged/view/_section_cards.haml @@ -1,9 +1,9 @@ -.flex.flex-col.m-20{ background_option(section)} +.flex.flex-col.m-20{ options(section , :background , :color)} .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.text-gray-900.sm:text-4xl + %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl = section.header - %p.mt-4.text-gray-700.pt-10 + %p.mt-4.text-lg.pt-10 = section.text - template = "merged/view/cards/" + section.card_template .grid{ column_option(section)} diff --git a/app/views/merged/view/_section_half_image.haml b/app/views/merged/view/_section_half_image.haml index c066ecc..97f57ae 100644 --- a/app/views/merged/view/_section_half_image.haml +++ b/app/views/merged/view/_section_half_image.haml @@ -2,11 +2,17 @@ %div{ order_option(section)} = image_for( section , "h-56 w-full object-cover sm:h-full") .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)} - .mx-auto.max-w-xl.text-center.sm:text-left - %h2.text-2xl.font-bold.text-gray-900.md:text-3xl + .mx-auto.max-w-xl{options(section , :align , :color)} + %h2.mt-12.text-2xl.font-bold.md:text-4xl = section.header - %p.text-gray-500.mt-4.md:block + -if section.has_option?("subheader") + %h4.text-xl.mt-10.md:text-2xl + = section.option("subheader") + %p.mt-8.md:block = section.text - .mt-4.md:mt-8 + -if section.has_option?("text") + %p.mt-8.md:block + = section.option("text") + .mt-8.md:mt-8 -if section.has_option?("button_text") = render 'merged/view/elements/button' , section: section diff --git a/app/views/merged/view/cards/_card_normal_square.haml b/app/views/merged/view/cards/_card_normal_square.haml index 4d84896..d2bff2c 100644 --- a/app/views/merged/view/cards/_card_normal_square.haml +++ b/app/views/merged/view/cards/_card_normal_square.haml @@ -1,5 +1,7 @@ %div.m-10{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 + %div.m-6{options(card , :align , :color)} + %h3.p-4.text-2xl.font-bold= card.header + -if card.has_option?("subheader") + %h4.p-4.text-xl= card.option("subheader") %p.mt-2.p-4= card.text diff --git a/config/styles.yaml b/config/styles.yaml index 49b43c8..c3c1300 100644 --- a/config/styles.yaml +++ b/config/styles.yaml @@ -11,6 +11,8 @@ sections: options: - background - columns + - color + - align - button_link - button_text - template: section_full_up @@ -27,10 +29,14 @@ sections: - header - text options: - - button_link - - button_text - order - background + - color + - subheader + - text + - align + - button_link + - button_text - template: section_full_left header: Full image header, text left text: Large picture background with Header and text towards the left. @@ -59,7 +65,9 @@ cards: - text options: - background + - color - align + - subheader - template: card_normal_round header: Standard card with square image text: Image, header, text, normal stuff @@ -82,8 +90,14 @@ options: desciption: Background colors. Light colors stay with black text. Solid colors invert to white text. - values: white light_blue solid_blue solid_red solid_indigo - default: white + values: white none light_blue light_grey 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 + default: none - name: align desciption: Align text of children. Normal Word meaning @@ -93,6 +107,7 @@ options: desciption: For two column layout determine order of sub-cards Values of left and right usually refer to where the image is + For cards it can also mean up and down values: left right default: left - name: button_text @@ -100,6 +115,16 @@ options: Text for an optional button. Must also set button_link values: default: + - name: subheader + desciption: + Smaller header between Header and text + values: + default: + - name: text + desciption: + Second text. Just a second paragraph + values: + default: - name: button_link desciption: Link for an option button. Must also set button_text.