From e2431d276c8f7fb7bdd1ef92113f8e8a9a85de54 Mon Sep 17 00:00:00 2001 From: Torsten Date: Tue, 6 Dec 2022 19:54:17 +0200 Subject: [PATCH] tricks for full image section (renamed from full_left) --- ...n_full_left.png => section_full_image.png} | Bin app/helpers/merged/options_helper.rb | 19 ++++++++++++ app/helpers/merged/view_helper.rb | 2 +- app/models/merged/style.rb | 2 +- app/views/merged/cards/select_image.haml | 4 +-- app/views/merged/images/index.haml | 3 +- app/views/merged/sections/select_image.haml | 4 +-- .../merged/view/_section_full_image.haml | 22 ++++++++++++++ app/views/merged/view/_section_full_left.haml | 13 --------- app/views/merged/view/_section_full_up.haml | 8 +++--- config/styles.yaml | 27 +++++++++++++----- 11 files changed, 72 insertions(+), 32 deletions(-) rename app/assets/images/merged/section_preview/{section_full_left.png => section_full_image.png} (100%) create mode 100644 app/views/merged/view/_section_full_image.haml delete mode 100644 app/views/merged/view/_section_full_left.haml diff --git a/app/assets/images/merged/section_preview/section_full_left.png b/app/assets/images/merged/section_preview/section_full_image.png similarity index 100% rename from app/assets/images/merged/section_preview/section_full_left.png rename to app/assets/images/merged/section_preview/section_full_image.png diff --git a/app/helpers/merged/options_helper.rb b/app/helpers/merged/options_helper.rb index 9cb9882..3e9a810 100644 --- a/app/helpers/merged/options_helper.rb +++ b/app/helpers/merged/options_helper.rb @@ -43,6 +43,13 @@ module Merged {class: color_for(option) } end + def shade_option(section) + return {} unless section.has_option?("shade_color") + option = section.option('shade_color') + puts "Shade color #{option} , #{shade_for(option)}" + {class: shade_for(option) } + end + def column_option(section) option = section.option('columns') option = 2 if option.blank? @@ -87,5 +94,17 @@ module Merged "solid_black" => "text-slate-900" , }[option] || "" end + # need full color names for tailwind to pick it up + + def shade_for( option ) + { "white_25" => "bg-white/25", + "none" => "", + "black_25" => "bg-black/25" , + "light_blue_25" => "bg-cyan-100/25" , + "light_red_25" => "bg-orange-300/25" , + "solid_blue_25" => "bg-cyan-700/25" , + "solid_red_25" => "bg-orange-800/25" , + }[option] || "" + end end end diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb index 87a4d61..ebec07f 100644 --- a/app/helpers/merged/view_helper.rb +++ b/app/helpers/merged/view_helper.rb @@ -8,7 +8,7 @@ module Merged # background image as inline style def bg(section) - return "" if section.image.blank? + return {class: ""} if section.image.blank? #puts "--#{Image.image_root}/#{section.image}--" img = asset_url( "#{Image.image_root}/#{section.image}" ) style = {"style" => "background-image: url('#{img}');" } diff --git a/app/models/merged/style.rb b/app/models/merged/style.rb index 8f57635..ea1eb1c 100644 --- a/app/models/merged/style.rb +++ b/app/models/merged/style.rb @@ -54,7 +54,7 @@ module Merged end def self.load - if @@sections.length == 0 + if @@sections.length == 0 or Rails.env.development? all = YAML.load_file(Engine.root.join("config/styles.yaml")) all["sections"].each do |content| section = Style.new(content) diff --git a/app/views/merged/cards/select_image.haml b/app/views/merged/cards/select_image.haml index 119f6ba..b67dee4 100644 --- a/app/views/merged/cards/select_image.haml +++ b/app/views/merged/cards/select_image.haml @@ -7,8 +7,8 @@ %p will be taken from uploaded file = hidden_field_tag :redirect , card_set_image_url(@card.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_button 'Submit' + -@images.each do |name , image| .relative.block.border.border-gray-100 = link_to( card_set_image_path( image: name)) do diff --git a/app/views/merged/images/index.haml b/app/views/merged/images/index.haml index 171c9f3..cda789d 100644 --- a/app/views/merged/images/index.haml +++ b/app/views/merged/images/index.haml @@ -6,8 +6,7 @@ %h5.mt-4.text-lg.font-bold Name is optional %p will be taken from uploaded file = 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_button 'Submit' -@images.each do |name , image| .relative.block.border.border-gray-100 =image_tag("cms/#{name}" , class: "h-56 w-full object-contain lg:h-72") diff --git a/app/views/merged/sections/select_image.haml b/app/views/merged/sections/select_image.haml index c756ca1..5a92a64 100644 --- a/app/views/merged/sections/select_image.haml +++ b/app/views/merged/sections/select_image.haml @@ -7,9 +7,9 @@ %p will be taken from uploaded file = 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_button 'Submit' -@images.each do |name , image| .relative.block.border.border-gray-100 = link_to( section_set_image_path( image: name)) do =image_tag("#{image_root}/#{name}" , class: "h-56 w-full object-contain lg:h-72") + = image.name diff --git a/app/views/merged/view/_section_full_image.haml b/app/views/merged/view/_section_full_image.haml new file mode 100644 index 0000000..e9ff6df --- /dev/null +++ b/app/views/merged/view/_section_full_image.haml @@ -0,0 +1,22 @@ +%section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{bg(section)} + .px-4.py-8.sm:px-6.lg:px-8 + .grid.grid-cols-1.md:grid-cols-3 + -if(section.option("align") == "center") + %div + -if(section.option("align") == "right") + %div + %div + .p-8.md:p-12.lg:px-16.lg:py-24{shade_option(section)} + .mx-auto.max-w-xl{ options(section , :color)} + %h2.text-2xl.font-bold.md:text-5xl + = section.header + %p.hidden.sm:mt-4.sm:block.text-2xl + = section.text + .mt-4.md:mt-8 + -if section.has_option?("button_text") + = render 'merged/view/elements/button' , section: section + -if(section.option("align") == "center") + %div + -if(section.option("align") == "left") + %div + %div diff --git a/app/views/merged/view/_section_full_left.haml b/app/views/merged/view/_section_full_left.haml deleted file mode 100644 index 919f348..0000000 --- a/app/views/merged/view/_section_full_left.haml +++ /dev/null @@ -1,13 +0,0 @@ -%section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{bg(section)} - .mx-auto.max-w-screen-2xl.px-4.py-8.sm:px-6.lg:px-8 - .grid.grid-cols-1.gap-4.md:grid-cols-2 - .p-8.md:p-12.lg:px-16.lg:py-24{class: 'bg-black/25'} - .mx-auto.max-w-xl.text-center - %h2.text-2xl.font-bold.text-white.md:text-5xl - = section.header - %p.hidden.sm:mt-4.sm:block.text-2xl.text-white - = section.text - .mt-4.md:mt-8 - -if section.has_option?("button_text") - = render 'merged/view/elements/button' , section: section - .grid.grid-cols-2.gap-4.md:grid-cols-1.lg:grid-cols-2 diff --git a/app/views/merged/view/_section_full_up.haml b/app/views/merged/view/_section_full_up.haml index ff4967d..bec67e8 100644 --- a/app/views/merged/view/_section_full_up.haml +++ b/app/views/merged/view/_section_full_up.haml @@ -1,7 +1,7 @@ -.flex.flex-col.m-20.bg-white +.flex.flex-col.m-20{ options(section , :background , :color)} .flex.items-center.justify-center.flex-1 - .max-w-xl.px-4.py-8.mx-auto.text-center - %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl + .max-w-prose.px-4.py-16.mx-auto.text-center + %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl = section.header - %p.mt-4.text-gray-500 + %p.mt-4.text-lg.pt-10 = section.text diff --git a/config/styles.yaml b/config/styles.yaml index c3c1300..3a441df 100644 --- a/config/styles.yaml +++ b/config/styles.yaml @@ -12,15 +12,17 @@ sections: - background - columns - color - - align - - button_link - - button_text - template: section_full_up header: Centered Header with text text: Full width header with centered headline and optional text fields: - header - text + options: + - background + - color + - button_link + - button_text - template: section_half_image header: Split section with image left or right text: Image on one side, header and text on the other. @@ -37,15 +39,20 @@ sections: - 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. - Text is slightly shaded for readability +- 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 may be slightly shaded for readability, + text color can be changed too fields: - header - text options: - fixed + - color + - align + - shade_color - template: section_spacer header: Spacer text: Just for extra padding @@ -98,6 +105,12 @@ options: 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: shade_color + desciption: + Color of transparent shaded area. + The number means transparency. + values: none black_25 white_25 light_red_25 light_blue_25 solid_blue_25 solid_red_25 + default: none - name: align desciption: Align text of children. Normal Word meaning