unify section_half left and right and use option to get both

This commit is contained in:
Torsten 2022-12-04 18:37:11 +02:00
parent 77a7917869
commit d30ce30370
11 changed files with 26 additions and 38 deletions

View File

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

Before

Width:  |  Height:  |  Size: 974 KiB

After

Width:  |  Height:  |  Size: 974 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -19,6 +19,13 @@ module Merged
end
end
def order_option(section)
return {} unless section.has_option?("order")
puts "Option #{section.option('order')}"
return {} if section.option("order") == "left"
{class: "order-first"}
end
def button(text , url , color)
link_to(url) do
content_tag(:button , class: color + " " + button_classes ) do

View File

@ -32,9 +32,9 @@ module Merged
option_defs = []
@content["options"].each do |name|
option = Style.options[name]
raise "no option for #{name}:name.class" if option.blank?
raise "no option for #{name}:#{name.class}" if option.blank?
option_defs << option
end
end if @content["options"]
option_defs
end

View File

@ -59,4 +59,7 @@
= section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
- @section.option_definitions.each do |option|
=render "option_form_#{option.type}" , section: @section , option: option
-if @section.option_definitions.empty?
%p No options
-else
= submit_button("Update")

View File

@ -1,13 +0,0 @@
%section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{style: bg(section)}
.p-8.md:p-12.lg:px-16.lg:py-24
.max-w-lg.text-center.sm:text-left{:class => "bg-black/25"}
%h2.text-2xl.font-bold.text-white.sm:text-3xl.md:text-5xl
= section.header
%p.hidden.max-w-md.md:mt-6.md:block.md:text-lg.md:leading-relaxed{:class => "text-white/90"}
= section.text
-if section.has_option?("button_text")
.mt-4.sm:mt-8
%a.inline-flex.items-center.rounded-full.bg-indigo-700.px-8.py-3.text-white.shadow-lg.transition.hover:bg-indigo-600.focus:outline-none.focus:ring{:href => section["button_link"]}
%span.text-sm.font-medium section.option("button_text")
%svg.ml-3.h-5.w-5{:fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M17 8l4 4m0 0l-4 4m4-4H3", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}

View File

@ -1,6 +1,6 @@
%section.overflow-hidden.sm:grid.sm:grid-cols-2
= image_for( section , "p-5 h-56 w-full object-cover sm:h-full")
.p-8.m-5.bg-cyan-100.md:p-12.lg:px-16.lg:py-24
.p-8.m-5.bg-cyan-100.md:p-12.lg:px-16.lg:py-24{ order_option(section)}
.mx-auto.max-w-xl.text-center.sm:text-left
%h2.text-2xl.font-bold.text-gray-900.md:text-3xl
= section.header

View File

@ -1,11 +0,0 @@
%section.overflow-hidden.sm:grid.sm:grid-cols-2
.p-8.m-5.bg-cyan-100.md:p-12.lg:px-16.lg:py-24
.mx-auto.max-w-xl.text-center.sm:text-left
%h2.text-2xl.font-bold.text-gray-900.md:text-3xl
= section.header
%p.hidden.text-gray-500.md:mt-4.md:block
= section.text
.mt-4.md:mt-8
-if section.has_option?("button_text")
= render 'merged/view/elements/button' , section: section
= image_for( section , "p-5 h-56 w-full object-cover sm:h-full")

View File

@ -14,16 +14,18 @@ sections:
fields:
- header
- text
- template: section_half_right
header: Split section image right
text: Image right, header and text on the left. Optional button.
- template: section_half_image
header: Split section with image left or right
text: Image on one side, header and text on the other.
Order depends on order option. Optional button.
fields:
- header
- text
options:
- button_link
- button_text
- template: section_full_left2
- order
- 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
@ -32,12 +34,6 @@ sections:
- text
options:
- fixed
- template: section_half_left
header: Split section image left
text: Image left, header and text on the right. Optional button.
fields:
- header
- text
- template: section_spacer
header: Spacer
text: Just for extra padding
@ -56,6 +52,12 @@ options:
during scrolling
values: on off
default: off
- name: order
desciption:
For two column layout determine order of sub-cards
Values of left and right usually refer to where the image is
values: left right
default: left
- name: button_text
desciption:
Text for an optional button. Must also set button_link