From 2144f8a0f60fb644a70f62010b88e49dc97b1775 Mon Sep 17 00:00:00 2001 From: Torsten Date: Thu, 15 Dec 2022 15:19:07 +0200 Subject: [PATCH] implement item alignment (justify on flex) for sections --- app/helpers/merged/options_helper.rb | 18 ++++++++++++++++-- .../merged/sections/_option_form_select.haml | 2 +- .../merged/sections/_option_form_text.haml | 2 +- app/views/merged/sections/index.haml | 4 ++-- app/views/merged/view/_section_cards.haml | 6 +++--- app/views/merged/view/_section_full_image.haml | 16 +++------------- app/views/merged/view/_section_full_up.haml | 6 +++--- .../merged/view/_section_half_header.haml | 12 ------------ app/views/merged/view/elements/_button.haml | 4 +++- config/merged/section_styles.yml | 5 +++++ 10 files changed, 37 insertions(+), 38 deletions(-) delete mode 100644 app/views/merged/view/_section_half_header.haml diff --git a/app/helpers/merged/options_helper.rb b/app/helpers/merged/options_helper.rb index 6c43175..8429240 100644 --- a/app/helpers/merged/options_helper.rb +++ b/app/helpers/merged/options_helper.rb @@ -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') diff --git a/app/views/merged/sections/_option_form_select.haml b/app/views/merged/sections/_option_form_select.haml index 4a78741..6b1da57 100644 --- a/app/views/merged/sections/_option_form_select.haml +++ b/app/views/merged/sections/_option_form_select.haml @@ -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") diff --git a/app/views/merged/sections/_option_form_text.haml b/app/views/merged/sections/_option_form_text.haml index 97e1fd5..43b505f 100644 --- a/app/views/merged/sections/_option_form_text.haml +++ b/app/views/merged/sections/_option_form_text.haml @@ -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") diff --git a/app/views/merged/sections/index.haml b/app/views/merged/sections/index.haml index 39b1c53..a4ef103 100644 --- a/app/views/merged/sections/index.haml +++ b/app/views/merged/sections/index.haml @@ -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 diff --git a/app/views/merged/view/_section_cards.haml b/app/views/merged/view/_section_cards.haml index 12275b1..e5d56f2 100644 --- a/app/views/merged/view/_section_cards.haml +++ b/app/views/merged/view/_section_cards.haml @@ -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 diff --git a/app/views/merged/view/_section_full_image.haml b/app/views/merged/view/_section_full_image.haml index e576070..92b466e 100644 --- a/app/views/merged/view/_section_full_image.haml +++ b/app/views/merged/view/_section_full_image.haml @@ -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 diff --git a/app/views/merged/view/_section_full_up.haml b/app/views/merged/view/_section_full_up.haml index 2755908..f77770c 100644 --- a/app/views/merged/view/_section_full_up.haml +++ b/app/views/merged/view/_section_full_up.haml @@ -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") diff --git a/app/views/merged/view/_section_half_header.haml b/app/views/merged/view/_section_half_header.haml deleted file mode 100644 index eabc097..0000000 --- a/app/views/merged/view/_section_half_header.haml +++ /dev/null @@ -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) diff --git a/app/views/merged/view/elements/_button.haml b/app/views/merged/view/elements/_button.haml index 6e04fd0..b16ea76 100644 --- a/app/views/merged/view/elements/_button.haml +++ b/app/views/merged/view/elements/_button.haml @@ -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") diff --git a/config/merged/section_styles.yml b/config/merged/section_styles.yml index a9efc13..3ccb0f2 100644 --- a/config/merged/section_styles.yml +++ b/config/merged/section_styles.yml @@ -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