resposivness fixes, bg image alignment

app/helpers/merged/options_helper.rb

@@ -30,7 +30,7 @@ module Merged
 
     def order_option(section , clazz = "")
       if section.has_option?("order")
-        clazz += " order-last" if section.option('order') == "right"
+        clazz += " md:order-last" if section.option('order') == "right"
       end
       {class: clazz}
     end

app/helpers/merged/view_helper.rb

@@ -12,14 +12,18 @@ module Merged
 
     # background image as inline style
     def bg(section , clazz = "")
-      attributes = {class: clazz}
+      return {class: clazz} if section.image.blank?
-      return attributes if section.image.blank?
       img = asset_url( section.image.asset_name )
-      attributes["style"] = "background-image: url('#{img}');"
+      style = "background-image: url('#{img}');"
       if(section.option("fixed") == "on")
-        attributes[:class] = attributes[:class] + " bg-fixed"
+        clazz += " bg-fixed"
       end
-      attributes
+      if(align = section.option("image_align"))
+        align += "-bottom" unless align == "center"
+        # for tailwind: bg-left-bottom bg-right-bottom bg-center
+        clazz += " bg-#{align}"
+      end
+      {class: clazz , style: style}
     end
 
     # works for with sections and cards that respond to .image

app/views/merged/view/_form_section.haml

@@ -1,16 +1,16 @@
-.flex.flex-col.m-20{ options(section , :background , :color)}
+.flex.flex-col.m-10.md:m-20{ options(section , :background , :color)}
   .flex.items-center.justify-center.flex-1
     .max-w-prose.px-4.mt-16.mx-auto.text-center
       %h1.text-4xl.font-medium= section.header
       %p.prose.mt-4.text-lg.pt-10
         = markdown(section)
-  .flex.items-center.justify-start.m-20
+  .flex.items-center.justify-start.m-10.md:m-20
     .mx-auto.w-full.max-w-4xl{class: "max-w-[50%]"}
       = form_tag( merged.form_sendit_path , {class: "mt-10" }) do
         - challenge = rand(8)
         = hidden_field_tag :section_id , section.id
         = hidden_field_tag :bot_fudder , "#{challenge*2}"
-        .grid.gap-6.md:grid-cols-2
+        .md:grid.gap-6.grid-cols-2
           - template = "merged/view/cards/" + section.card_template
           - section.cards.each do |card|
             = render( template , card: card)

app/views/merged/view/_section_cards.haml

@@ -1,5 +1,5 @@
 %section.m-20{ options(section , :background , :color)}
-  .flex.text-center
+  .flex.justify-center
     .max-w-prose.px-4.py-16{ options(section , :text_align)}
       %h1.text-2xl.font-bold.tracking-tight.sm:text-4xl
         = section.header

app/views/merged/view/_section_full_image.haml

@@ -1,4 +1,4 @@
-%section.overflow-hidden.bg-cover.bg-center.bg-no-repeat{bg(section , "h-full")}
+%section.overflow-hidden.bg-cover.bg-no-repeat{bg(section , "h-full")}
   .px-4.py-24.sm:px-6.lg:px-8
     .flex{ item_align_option( section)}
       .p-8.md:p-12.lg:px-16.lg:py-24{options(section , :shade )}

app/views/merged/view/_section_half_image.haml

@@ -1,4 +1,4 @@
-%section.overflow-hidden.grid.grid-cols-2.m-20
+%section.overflow-hidden.grid.grid-cols-1.m-20.md:grid-cols-2
   %div{ order_option(section)}
     = image_for( section , "h-56 w-full object-cover sm:h-full")
   .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)}

app/views/merged/view/_section_large_image.haml

@@ -1,11 +1,11 @@
-.flex.justify-center.h-96.p-8{options(section , :margin , :background )}
+.flex.justify-center.p-8.flex-col.md:flex-row{options(section , :margin , :background )}
-  .flex.items-center.w-full.overflow-hidden{order_option(section, "w-2/3")}
+  .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{order_option(section, "lg:w-2/3")}
     = image_for(section ,"")
-  .flex.items-center.w-full.max-w-md.px-6.mx-auto{:class => "w-1/3"}
+  .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
     .flex-1{color_option(section)}
       .text-center
-        %h2.text-4xl.font-bold.text-center.mb-8= section.header
+        %h2.text-4xl.font-bold.text-center.mb-4.lg:mb-8= section.header
         -if section.has_option?("subheader")
-          %h4.text-xl.mt-10.md:text-2xl
+          %h4.text-xl.mt-4.lg:mt-8.md:text-2xl
             = section.option("subheader")
         %p.prose.mt-3= markdown(section)

app/views/merged/view/cards/_card_gap_square.haml

@@ -1,8 +1,9 @@
-.grid.grid-cols-1.gap-16.m-16
+.grid.grid-cols-1.gap-12.m-12.md:gap-8.md:m-8.lg:gap-12.lg:m-12
   %div{ order_option(card)}
     = image_for( card , "h-70 w-full object-cover grid")
-  %div.grid.h-70{options(card , :text_align , :color , :background )}
+  .grid.h-70{options(card , :text_align , :color , :background )}
     %h3.p-4.mt-10.text-3xl.font-bold= card.header
     -if card.has_option?("subheader")
       %h4.p-4.text-xl= card.option("subheader")
-    %p.prose.m-10= markdown(card)
+    .prose.m-6{options(card , :background , :color ) }
+      = markdown(card)

app/views/merged/view/cards/_form_field.haml

@@ -1,8 +1,8 @@
 -if card.option("form_type") == "message"
-  .relative.z-0.col-span-2
+  .relative.z-0.col-span-2.mt-3
     %textarea.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header , :placeholder => " ", :rows => "5"}=params[card.header]
     %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card.header
 -else
-  .relative.z-0
+  .relative.z-0.mt-3
     %input.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header, :placeholder => " " , "value" => params[card.header], :type => "text"}
     %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= field_name(card)

config/merged/option_definitions.yml

@@ -30,7 +30,7 @@
 - :name: text_align
   :description: Align text of children. Normal Word meaning
   :values: left center right
-  :default: left
+  :default: center
   :id: 6
 - :name: order
   :description: For two column layout determine order of sub-cards Values of left
@@ -91,7 +91,7 @@
   :description: Alignment of actual children. Usually some kind of boxes.
           Does not affect text, see text_align
   :values: left center right
-  :default: left
+  :default: center
   :id: 17
 - :name: meta
   :description: Meta tag for page
@@ -110,3 +110,10 @@
   :values: precise rough
   :default: precise
   :id: 20
+- :name: image_align
+  :description: Alignment of images. This affect what stays visible
+      on different size screens. Default is center, but if the focus
+      of the image is left or right, that may be hoosen.
+  :values: left center right
+  :default: center
+  :id: 21

config/merged/section_styles.yml

@@ -12,7 +12,6 @@
     - 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
@@ -70,6 +69,7 @@
     - color
     - text_align
     - item_align
+    - image_align
     - shade_color
 - template: section_large_image
   header: Two third image header with adjustable text

config/routes.rb

@@ -23,5 +23,7 @@ Merged::Engine.routes.draw do
   end
   resources :images do
     get :copy
+    post :crop
+    post :scale
   end
 end

test/dummy/merged/sections.yml

@@ -77,16 +77,18 @@
     shade_color: black_25
     color: solid_blue
     align: left
-  :updated_at: &2 2022-12-10 20:28:17.967357225 +02:00
+  :updated_at: 2023-01-01 14:31:09.419445755 +02:00
   :page_id: 6
   :index: 2
   :image_id: 16
+  :updated_by: torsten@villataika.fi
 - :template: section_spacer
   :id: 32
-  :updated_at: *2
+  :updated_at: &2 2022-12-10 20:28:17.967357225 +02:00
   :page_id: 6
   :index: 1
   :image_id:
+  :options: {}
 - :template: section_half_image
   :header: Retreats
   :text: Hub Feenix is a beautiful place, ideally situated in the country, but close

test/models/option_definition_test.rb

@@ -11,7 +11,7 @@ module Merged
       assert_equal OptionDefinition.first.class ,  OptionDefinition
     end
     def test_there_options
-      assert_equal OptionDefinition.all.length ,  20
+      assert OptionDefinition.all.length >  20
     end
     def test_has_option_objects
       assert_equal first.class ,  OptionDefinition