diff --git a/app/assets/images/merged/section_preview/section_large_image.png b/app/assets/images/merged/section_preview/section_large_image.png new file mode 100644 index 0000000..2f9e390 Binary files /dev/null and b/app/assets/images/merged/section_preview/section_large_image.png differ diff --git a/app/helpers/merged/options_helper.rb b/app/helpers/merged/options_helper.rb index 3e9a810..3a43a4c 100644 --- a/app/helpers/merged/options_helper.rb +++ b/app/helpers/merged/options_helper.rb @@ -11,12 +11,13 @@ module Merged 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"} + def order_option(section , clazz = "") + if section.has_option?("order") + option = section.option('order') + puts "Order #{option}" + clazz += " order-last" if option == "right" + end + {class: clazz} end def align_option(section) @@ -36,6 +37,13 @@ module Merged {class: background} end + def margin_option(section) + return {} unless section.has_option?("margin") + option = section.option('margin') + puts "Margin #{option}" + {class: margin_for(option)} + end + def color_option(section) return {} unless section.has_option?("color") option = section.option('color') @@ -71,7 +79,7 @@ module Merged { "white" => "bg-white" , "none" => "" , "light_blue" => "bg-cyan-100" , - "light_grey" => "bg-grey-100" , + "light_gray" => "bg-gray-100" , "light_orange" => "bg-orange-50" , "solid_blue" => "bg-cyan-700" , "solid_red" => "bg-orange-800" , @@ -81,6 +89,13 @@ module Merged "solid_black" => "bg-slate-900" , }[option] || "" end + # need full margin names for tailwind to pick it up + def margin_for( option ) + { "0" => "m-0" , + "none" => "" , + "20" => "m-20" , + }[option] || "" + end # need full color names for tailwind to pick it up def color_for( option ) { "white" => "text-white", diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb index ebec07f..a2bfb10 100644 --- a/app/helpers/merged/view_helper.rb +++ b/app/helpers/merged/view_helper.rb @@ -7,16 +7,17 @@ module Merged end # background image as inline style - def bg(section) - return {class: ""} if section.image.blank? + def bg(section , clazz = "") + attributes = {class: clazz} + return attributes if section.image.blank? #puts "--#{Image.image_root}/#{section.image}--" img = asset_url( "#{Image.image_root}/#{section.image}" ) - style = {"style" => "background-image: url('#{img}');" } + attributes["style"] = "background-image: url('#{img}');" if(section.option("fixed") == "on") - style[:class] = "bg-fixed" + attributes[:class] = attributes[:class] + " bg-fixed" puts "Adding fixed" end - style + attributes end # works for with sections and cards that respond to .image diff --git a/app/models/merged/section.rb b/app/models/merged/section.rb index 182f3df..989e7b1 100644 --- a/app/models/merged/section.rb +++ b/app/models/merged/section.rb @@ -90,6 +90,16 @@ module Merged @page.move_section_down(self) end + def previous_section + return nil if index == 0 + page.sections[index - 1] + end + + def next_section + return nil if index == (page.sections.length - 1) + page.sections[index + 1] + end + def move_card_up(card) return if cards.length == 1 return if card.index == 0 diff --git a/app/views/merged/sections/show.html.haml b/app/views/merged/sections/show.html.haml index 836a8d9..fd9bbe5 100644 --- a/app/views/merged/sections/show.html.haml +++ b/app/views/merged/sections/show.html.haml @@ -8,13 +8,17 @@ Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"} .flex.items-center.justify-center.flex-1 %h3.text-xl.font-bold.tracking-tight.text-gray-900 - Section #{@section.index + 1} - + Section #{@section.index + 1} / #{@section.page.sections.length} + - unless @section.index == 0 + =link_to "(prev)" , section_url(@section.previous_section.id) + - unless @section.index == (@section.page.sections.length - 1) + =link_to "(next)" , section_url(@section.next_section.id) .grid.grid-cols-3.gap-2.m-8 .relative.block.border.border-gray-100 %h3.mt-4.text-lg.font-bold Template #{@section.template} = section_preview(@section , class: "w-full object-contain p-3") = yellow_button( "Change Template" , section_select_template_url(@section.id)) + = green_button( "New Section" , new_page_section_url(@section.page.name) ) .relative.block.border.border-gray-100 = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do diff --git a/app/views/merged/view/_section_full_up.haml b/app/views/merged/view/_section_full_up.haml index bec67e8..78473f5 100644 --- a/app/views/merged/view/_section_full_up.haml +++ b/app/views/merged/view/_section_full_up.haml @@ -1,4 +1,4 @@ -.flex.flex-col.m-20{ options(section , :background , :color)} +.flex.flex-col{ options(section , :background , :color , :margin)} .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.sm:text-4xl diff --git a/app/views/merged/view/_section_large_image.haml b/app/views/merged/view/_section_large_image.haml new file mode 100644 index 0000000..25f042c --- /dev/null +++ b/app/views/merged/view/_section_large_image.haml @@ -0,0 +1,8 @@ +.flex.justify-center.h-96.p-8{margin_option(section )} + .flex.items-center.w-full.overflow-hidden{order_option(section, "w-2/3")} + = image_for(section ,"") + .flex.items-center.w-full.max-w-md.px-6.mx-auto{:class => "w-1/3"} + .flex-1{color_option(section)} + .text-center + %h2.text-4xl.font-bold.text-center.mb-8= section.header + %p.mt-3= section.text diff --git a/config/styles.yaml b/config/styles.yaml index 3a441df..764d495 100644 --- a/config/styles.yaml +++ b/config/styles.yaml @@ -21,6 +21,7 @@ sections: options: - background - color + - margin - button_link - button_text - template: section_half_image @@ -41,10 +42,10 @@ sections: - button_text - template: section_full_image header: Full image header with adjustable text - text: Large picture background with Header and text towards - adjustable alignment (left, center, right). + text: Large picture background with Header and text on top. + Adjustable alignment (left, center, right). Text may be slightly shaded for readability, - text color can be changed too + text color can be changed too. fields: - header - text @@ -53,6 +54,19 @@ sections: - color - align - shade_color +- template: section_large_image + header: Two third image header with adjustable text + text: Large picture background with Header and text offset. + Adjustable alignment (left, center, right). + Text section may have background color. + Text color can be changed too + fields: + - header + - text + options: + - order + - color + - background - template: section_spacer header: Spacer text: Just for extra padding @@ -97,13 +111,13 @@ options: desciption: Background colors. Light colors stay with black text. Solid colors invert to white text. - values: white none light_blue light_grey light_orange solid_blue solid_red solid_indigo + values: white none light_blue light_gray 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 + values: none white light_blue light_gray solid_black solid_blue solid_red solid_indigo default: none - name: shade_color desciption: @@ -123,6 +137,12 @@ options: For cards it can also mean up and down values: left right default: left + - name: margin + desciption: + Most sections have standard margin of 20. + This option makes it possible to remove that + values: 0 20 + default: 20 - name: button_text desciption: Text for an optional button. Must also set button_link