FeenixMakers/merged
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement item alignment (justify on flex) for sections

Browse Source
This commit is contained in:
Torsten 2022-12-15 15:19:07 +02:00
parent 33bb02c8c8
commit 2144f8a0f6
10 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/helpers/merged/options_helper.rb
View File

@ -19,13 +19,27 @@ module Merged
end
def text_align_option(section , clazz = "")
if section.has_option?("align")
if section.has_option?("text_align")
# text-center , text-left , text-right , leave comment for tailwind
clazz += " text-#{section.option('align')}"
clazz += " text-#{section.option('text_align')}"
end
{class: clazz}
end
def item_align_option(section , clazz = "")
if section.has_option?("item_align")
case section.option("item_align")
when "left"
clazz += " justify-start"
when "right"
clazz += " justify-end"
else
clazz += " justify-center"
end
end
{class: clazz }
end
def background_option(section , clazz = "")
if section.has_option?("background")
option = section.option('background')

2
app/views/merged/sections/_option_form_select.haml
View File

@ -1,4 +1,4 @@
%label.block
.mt-4.text-lg.font-bold
= option.name.capitalize
= option.name.camelcase
= select_tag( "option[#{option.name}]" , options_for_select(option.values, section.option(option.name)), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

2
app/views/merged/sections/_option_form_text.haml
View File

@ -1,4 +1,4 @@
%label.block
.mt-4.text-lg.font-bold
= option.name
= option.name.camelcase
= text_field_tag( "option[#{option.name}]" , section.option(option.name), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

4
app/views/merged/sections/index.haml
View File

@ -15,11 +15,11 @@
= yellow_button("Edit" , section_path(section.id) )
= green_button( "Copy" , new_page_section_url(@page.id, template: section.template) )
.p-2
=link_to(section_move_url(section.id , dir: :up)) do
=link_to(section_move_url(section.id , dir: :down)) do
%svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
.p-2
=link_to(section_move_url(section.id , dir: :down)) do
=link_to(section_move_url(section.id , dir: :up)) do
%svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
.basis-full.mb-3

6
app/views/merged/view/_section_cards.haml
View File

@ -1,6 +1,6 @@
.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
%section.m-20{ options(section , :background , :color)}
.flex{ item_align_option( section)}
.max-w-prose.px-4.py-16{ options(section , :text_align)}
%h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
= section.header
%p.mt-4.text-lg.pt-10

16
app/views/merged/view/_section_full_image.haml
View File

@ -1,13 +1,8 @@
%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)}
.flex{ item_align_option( section)}
.p-8.md:p-12.lg:px-16.lg:py-24{options(section , :shade )}
.mx-auto.max-w-xl{ options(section , :color, :text_align)}
%h2.text-2xl.font-bold.md:text-5xl
= section.header
%p.hidden.sm:mt-4.sm:block.text-2xl
@ -15,8 +10,3 @@
.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

6
app/views/merged/view/_section_full_up.haml
View File

@ -1,6 +1,6 @@
.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{options(section , :text_align , :color)}
%section{ options(section , :background , :margin)}
.flex{ options(section , :item_align )}
.px-4.py-16.mx-20{options(section , :text_align , :color)}
%h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
= section.header
-if section.has_option?("subheader")

12
app/views/merged/view/_section_half_header.haml
View File

@ -1,12 +0,0 @@
%section.m-20
.mx-auto.max-w-screen-xl.px-4.py-16.sm:px-6.sm:py-24.lg:px-8
.max-w-3xl
%h2.text-3xl.font-bold.sm:text-4xl
= section.header
.mt-8.grid.grid-cols-1.gap-8.lg:grid-cols-2.lg:gap-16
.relative.h-64.overflow-hidden.sm:h-80.lg:h-full
%img.absolute.inset-0.h-full.w-full.object-cover{:alt => "Party", :src => "https://images.unsplash.com/photo-1496843916299-590492c751f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80"}/
.lg:py-16
%article.space-y-4.text-gray-600
%p
= markdown(section)

4
app/views/merged/view/elements/_button.haml
View File

@ -1,2 +1,4 @@
- if section.has_option?("button_text") and section.has_option?("button_link")
= blue_button( section.option("button_text") , section.option("button_link"))
= link_to section.option("button_link") do
.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400.bg-green-700.hover:bg-blue-800
= section.option("button_text")

5
config/merged/section_styles.yml
View File

@ -11,6 +11,8 @@
- background
- columns
- color
- text_align
- item_align
- template: section_full_up
header: Centered Header with text
text: Full width header with centered headline and optional text
@ -22,6 +24,8 @@
- color
- margin
- subheader
- text_align
- item_align
- button_link
- button_text
- template: section_half_image
@ -53,6 +57,7 @@
- fixed
- color
- text_align
- item_align
- shade_color
- template: section_large_image
header: Two third image header with adjustable text