neutral preview images

app/assets/stylesheets/merged/merged.css

@@ -2262,6 +2262,21 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
+.bg-zinc-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -2653,6 +2668,14 @@ select {
   text-decoration-line: underline;
 }
 
+.opacity-10 {
+  opacity: 0.1;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -3074,6 +3097,10 @@ select {
 }
 
 @media (min-width: 1280px) {
+  .xl\:m-20 {
+    margin: 5rem;
+  }
+
   .xl\:mx-auto {
     margin-left: auto;
     margin-right: auto;

app/helpers/merged/options_helper.rb

@@ -149,7 +149,7 @@ module Merged
     def margin_for( section )
       { "0" =>  " m-0" ,
         "none" =>  "" ,
-        "20" => " m-20" ,
+        "20" => " 8 md:12 lg:16 xl:m-20" ,
       }[section.option("margin")] || ""
     end
     # need full color names for tailwind to pick it up

app/models/merged/section.rb

@@ -23,6 +23,10 @@ module Merged
       SectionStyle.find_by_template( template )
     end
 
+    def card_template_style
+      CardStyle.find_by_template( card_template )
+    end
+
     def set_template(new_template)
       self.template = new_template
       new_style = template_style

app/views/merged/sections/select_card_template.haml

@@ -6,7 +6,8 @@
 
 .grid.grid-cols-4.gap-6.m-8
   - @cards.each do |style|
-    .border.border-gray-300.rounded-lg.p-2
+    .flex.flex-col.border.border-gray-300.rounded-lg.p-2.bg-neutral-50
       = link_to( merged.section_set_card_template_path( card_template: style.template )) do
         .font-bold.text-lg.text-center.pb-4= style.header
         =image_tag(style.card_preview , class: "w-full object-contain")
+        .text-left.pt-4.bg-gray-50= style.text

app/views/merged/sections/select_template.haml

@@ -6,7 +6,8 @@
 
 .grid.grid-cols-4.gap-6.my-10.mx-20
   - @sections.each do |style|
-    .border.border-gray-300.rounded-lg.p-2
+    .flex.flex-col.border.border-gray-300.rounded-lg.p-2.bg-neutral-50
       = link_to( merged.section_set_template_path( template: style.template )) do
         .font-bold.text-lg.text-center.pb-4= style.header
         =image_tag(style.section_preview , class: "w-full object-contain")
+        .text-left.pt-4.bg-gray-50= style.text

app/views/merged/sections/show.haml

@@ -57,7 +57,7 @@
   - if( @section.has_cards? )
     .basis-full.h-0
     .basis-96
-      .mx-3.text-lg.font-bold Card Style #{@section.card_template}
+      .mx-3.text-lg.font-bold Card Style #{@section.card_template_style.header}
       =card_preview(@section , class: "my-3")
       %p.py-3
         = link_to merged.section_select_card_template_path(@section.id) do

app/views/merged/view/_section_large_image.haml

@@ -1,4 +1,4 @@
-.flex.justify-center.p-8.flex-col.md:flex-row{options(section , :margin , :background )}
+.flex.justify-center.flex-col.md:flex-row{options(section , :margin , :background )}
   .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 ,"object-cover")
   .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}

app/views/merged/view/_section_small_image.haml

@@ -1,4 +1,4 @@
-.flex.justify-center.p-8.flex-col.lg:flex-row{options(section , :margin , :background )}
+.flex.justify-center.flex-col.lg:flex-row{options(section , :margin , :background )}
   .flex.justify-center.h-60.w-full.overflow-hidden{order_option(section, "lg:w-1/3")}
     = image_for(section ,"object-cover")
   .columns-1.md:columns-2.max-w-full.items-center.w-full.max-w.px-6.mx-auto.mt-6.lg:mt-0{text_color_option(section, "lg:w-2/3")}

config/merged/card_styles.yml

@@ -3,6 +3,8 @@
   header: Full background
   text: Text in box on top of the imag. Adjustable background
             and text color to mix/match with images.
+            Images can be wide or square, for 2 column 800 wide,
+            3 column 600 , 4 column 400
   fields:
     - header
     - text
@@ -13,7 +15,9 @@
 - template: card_gap_square
   header: Narrow card with up down section
   text: Smaller image, large margins, possible subheader
-    Order turns it upside down, image bottom
+      Order turns it upside down, image bottom
+      Images can be wide or square, for 2 column 800 wide,
+      3 column 600 , 4 column 400
   fields:
     - header
     - text
@@ -28,6 +32,8 @@
   text: Image, header, text, normal stuff. No margin between image and text.
         Possible subheader. Text alignment option. Also option to turn upside
         down with order.
+        Images can be wide or square, for 2 column 800 wide,
+        3 column 600 , 4 column 400
   fields:
     - header
     - text
@@ -42,6 +48,10 @@
 - template: card_wide_square
   header: Sideway card with square image
   text: Much like standard square card, just turned sideways.
+    Works best for 2 or three columns. Wide pictures, unless there is a lot of text.
+    Images can be wide or square, for 2 column 600 wide,
+    3 columns 400
+
   fields:
     - header
     - text
@@ -57,7 +67,8 @@
   header: Card looking feature
   text: For things where no image is available or apropriate.
         Making lists a little more interesting to look at.
-        May use svg as image.
+        May use svg as image, or normal with transparent bg.
+        Small images or icons.
   fields:
     - header
     - text
@@ -84,6 +95,9 @@
 - template: card_normal_round
   header: Standard card with rounded look
   text: Otherwise quite similar to standard. But there is gap under the image.
+        Images can be wide or square, for 2 column 800 wide,
+        3 column 600 , 4 column 400
+
   fields:
     - header
     - text
@@ -96,7 +110,7 @@
 - template: form_field
   header: A single field in a form
   text: The header is the Name of the field, the description
-        serves as a placeholder.
+        serves as a placeholder. (No image)
   fields:
     - header
     - text

config/merged/section_styles.yml

@@ -16,8 +16,8 @@
 - template: section_feature
   header: Feature section with 2 column,
   text: A split header with two column layout on the right.
-        Cards can be choosen freely but columns should be carefully
-        choosen to fit.
+        Cards can be choosen freely but columns should be choosen to fit.
+        Look very much depends on card style and column number.
   cards: true
   fields:
     - header
@@ -60,6 +60,8 @@
         can be embedded into the text by writing IMAGE (in caps)
         where the image should be inserted. Not more than 200 words
         or 1000 characters are best.
+        Image size depends on columms, 3 column should be 600 wide and 300
+        to 600 high.
   fields:
     - header
     - text
@@ -76,6 +78,8 @@
   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.
+    Image aspect ratio can be choosen and determines layout.
+    Wide image, narrow look. Square image big look. No portraits.
   fields:
     - header
     - text
@@ -93,6 +97,8 @@
     Adjustable text text alignment (left, center, right).
     Text may be slightly shaded for readability,
     text color can be changed too.
+    Image should be 1600 wide and can be between 400 and 900 for
+    different looks
   fields:
     - header
     - text
@@ -109,8 +115,8 @@
   header: Two third image header with adjustable text
   text: Large picture background with Header and text offset.
     Adjustable text alignment (left, center, right).
-    Text section may have background color.
-    Text color can be changed too
+    Image size determines the look or layout. Images should be 1200 wide
+    and 300 - 600 high.
   fields:
     - header
     - text
@@ -163,6 +169,7 @@
   text: Image on one side, header and text on the other.
     Order depends on order option. Date is subheader.
     Extra text possible under both text and picture, as markdown.
+    Image should be 600 wide and 400-900 high, depending on text.
   fields:
     - header
     - text