tricks for full image section (renamed from full_left)

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

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}');" }

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)

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

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")

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

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

app/views/merged/view/_section_full_left.haml

@@ -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

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

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