coveragebook_components 0.5.5 → 0.5.6

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.css

@@ -1,40 +1,46 @@
 @layer components {
   [data-coco][data-component="book-editable-slide"] {
     /* 
-     * x-padding at max (1480px): 240px / 16.2%
-     * x-padding at min (320px): 16.2% x 320px = 52px
+     * slide-padding-md at max (1480px): 240px (16.2%)
+     * slide-padding-md at min (320px): 16.2% x 320px = 52px
      */
-    --x-padding: max(38px, clamp(52px, 16.2cqw, 240px));
+    --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
 
     /* 
-     * y-padding at max (1480px): 80px / 5.4%
-     * y-padding at min (320px): 5.4% x 320px = 17px
+     * slide-padding-md at max (1480px): 120px (8.1%)
+     * slide-padding-md at min (320px): 8.1% x 320px = 26px
      */
-    --y-padding: max(38px, clamp(17px, 5.4cqw, 80px));
+    --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
 
     /* 
-     * Title font size at max (1480px): 80px / 5.4%
-     * Title font size at min (320px): 5.4% x 320px = 17px
-     * Text font size at reflow (700px): 35px
+     * slide-padding-sm at max (1480px): 80px (5.4%)
+     * slide-padding-sm at min (320px): 5.4% x 320px = 17px
+     */
+    --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
+
+    /* 
+     * Small title font size at max (1480px): 64px (4.3%)
+     * Small title font size at min (320px): 4.3% x 320px = 13.8px
      */
     --title-font-size: max(
-      35px,
-      clamp(17px, 5.4cqw, theme(fontSize.display-2))
+      32px,
+      clamp(13.8px, 4.3cqw, theme(fontSize.display-3))
     );
 
     /* 
-     * Text font size at max (1480px): 32px / 2.16%
-     * Text font size at min (320px): 2.16% x 320px = 7px
-     * Text font size at reflow (700px): 14px
+     * Text font size at max (1480px): 24px / 1.62%
+     * Text font size at min (320px): 1.62% x 320px = 5.2px
      */
     --text-font-size: max(
-      15px,
-      clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
+      16px,
+      clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
     );
 
     /* ------------- */
 
-    @apply bg-white relative rounded-md @container;
+    @apply relative rounded-md @container;
+    @apply bg-white bg-no-repeat bg-cover;
+
     min-width: 320px;
 
     .slide-aspect {
@@ -42,13 +48,14 @@
     }
 
     .slide-container {
-      @apply @slide-fluid:absolute @slide-fluid:inset-0;
-      @apply flex flex-col items-center justify-center text-center overflow-hidden bg-cover bg-center;
+      @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
+      @apply px-6 py-10 @slide-fluid:p-[var(--slide-padding-md)];
     }
 
     [data-slide-region],
+    .slide-header,
     .slide-text,
-    .slide-media {
+    .slide-image {
       @apply hidden;
     }
 
@@ -56,10 +63,53 @@
       @apply contents;
     }
 
+    .slide-title {
+      @apply font-bold text-current;
+      overflow-wrap: anywhere;
+      line-height: 1.1;
+      font-size: var(--title-font-size);
+    }
+
+    .slide-text {
+      @apply text-current;
+      line-height: 1.5;
+      font-size: var(--text-font-size);
+    }
+
+    .slide-media {
+      @apply w-full;
+
+      img {
+        @apply w-full h-full object-contain;
+      }
+    }
+
     /* layouts */
 
-    &[data-layout="basic"] {
-      @apply text-center bg-no-repeat bg-cover;
+    &[data-layout="one-col-title"] {
+      /* 
+       * Title font size at max (1480px): 80px (5.4%)
+       * Title font size at min (320px): 5.4% x 320px = 17px
+       */
+      --title-font-size: max(
+        35px,
+        clamp(17px, 5.4cqw, theme(fontSize.display-2))
+      );
+
+      /* 
+       * Text font size at max (1480px): 32px / 2.16%
+       * Text font size at min (320px): 2.16% x 320px = 7px
+       */
+      --text-font-size: max(
+        16px,
+        clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
+      );
+
+      @apply text-center;
+
+      .slide-container {
+        @apply @slide-fluid:px-[var(--slide-padding-lg)];
+      }
 
       [data-slide-region="content-1"] {
         @apply block;
@@ -69,17 +119,16 @@
         }
       }
 
-      .slide-container {
-        @apply overflow-hidden;
-        @apply px-8;
-        @apply py-[var(--y-padding)] @slide-fluid:px-[var(--x-padding)];
+      &.with-title [data-slide-region="content-1"] .slide-text {
+        margin-top: 0.875em;
+      }
+
+      .slide-layout {
+        @apply flex flex-col items-center justify-center text-center w-full h-full;
       }
 
       .slide-header {
-        @apply w-full;
-        margin-bottom: 0.3em;
-        line-height: 1.1;
-        font-size: var(--title-font-size);
+        @apply w-full block;
       }
 
       .slide-content {
@@ -91,16 +140,173 @@
         @apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
       }
 
+      .slide-text {
+        line-height: 1.4;
+      }
+    }
+
+    &[data-layout="one-col-text"] {
+      .slide-container {
+        @apply flex items-center;
+      }
+
+      .slide-layout {
+        @apply @slide-fluid:grid w-full;
+        height: min-content;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        grid-gap: var(--slide-padding-sm);
+      }
+
+      &.with-title {
+        .slide-container {
+          @apply block;
+        }
+
+        .slide-layout {
+          @apply h-full;
+          grid-template-rows: min-content auto;
+        }
+      }
+
+      .slide-header {
+        @apply w-full block;
+        @apply mb-6 @slide-fluid:mb-0;
+      }
+
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-text {
+          @apply block;
+        }
+      }
+    }
+
+    &[data-layout="one-col-media"] {
+      .slide-container {
+        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
+      }
+
+      .slide-layout,
+      .slide-content {
+        @apply h-full;
+      }
+
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-media {
+          @apply block w-full h-full;
+
+          img {
+            @apply h-full w-full object-contain;
+          }
+        }
+      }
+    }
+
+    &[data-layout="two-col-text"],
+    &[data-layout="two-col-media"] {
+      .slide-container {
+        @apply flex items-center;
+        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
+      }
+
+      .slide-layout {
+        @apply @slide-fluid:grid w-full;
+        height: min-content;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto;
+        grid-gap: var(--slide-padding-sm);
+      }
+
+      &.with-title {
+        .slide-container {
+          @apply block;
+        }
+
+        .slide-layout {
+          @apply h-full;
+          grid-template-rows: min-content auto;
+        }
+      }
+
+      .slide-header {
+        @apply w-full block;
+        @apply mb-10 @slide-fluid:mb-0;
+        grid-column-start: 1;
+        grid-column-end: -1;
+      }
+
+      [data-slide-region="content-1"],
+      [data-slide-region="content-2"] {
+        @apply block;
+
+        .slide-text,
+        .slide-media {
+          @apply block;
+        }
+      }
+
+      [data-slide-region="content-1"] {
+        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
+      }
+    }
+
+    &[data-layout="two-col-media"] {
+      .slide-layout {
+        @apply @slide-fluid:h-full;
+      }
+
+      .slide-content {
+        @apply relative @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
+      }
+
+      .slide-media {
+        @apply @slide-fluid:absolute @slide-fluid:inset-0;
+      }
+    }
+
+    &[data-layout="two-col-mixed"] {
+      .slide-layout {
+        @apply @slide-fluid:grid w-full h-full;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto;
+        grid-gap: var(--slide-padding-sm);
+      }
+
+      .slide-group {
+        @apply flex flex-col justify-center;
+        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
+      }
+
+      .slide-header {
+        @apply w-full block;
+      }
+
       .slide-title {
-        @apply font-bold text-current;
-        overflow-wrap: anywhere;
-        line-height: 1.1;
+        margin-bottom: 0.5em;
       }
 
-      .slide-text {
-        @apply text-current;
-        line-height: 1.4;
-        font-size: var(--text-font-size);
+      [data-slide-region="content-1"] {
+        @apply block;
+
+        .slide-text {
+          @apply block;
+        }
+      }
+
+      [data-slide-region="content-2"] {
+        @apply relative block @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
+
+        .slide-media {
+          @apply block @slide-fluid:absolute @slide-fluid:inset-0;
+
+          img {
+            @apply h-full w-full object-contain;
+          }
+        }
       }
     }
   }

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb

@@ -1,21 +1,39 @@
-<%= render component_tag(style: slide_styles) do %>
+<%= render component_tag(style: slide_styles, class: {"with-title": title?}) do %>
   <div class="slide-aspect">
     <div class="slide-container">
 
-      <div class="slide-group">
-        <header class="slide-header">
+      <div class="slide-layout">
+        <div class="slide-group">
           <% if title? %>
-            <h3 class="slide-title" data-role="title">
-              <%= title %>
-            </h3>
+            <header class="slide-header">
+              <h3 class="slide-title" data-role="title">
+                <%= title %>
+              </h3>  
+            </header>
           <% end %>
-        </header>
 
-        <div class="slide-content" data-slide-region="content-1">
-          <% if text_1? %>
-            <div class="slide-text" data-role="text-1">
-              <%= text_1 %>
-            </div>  
+          <div class="slide-content" data-slide-region="content-1">
+            <% if text_1? %>
+              <div class="slide-text" data-role="text-1">
+                <%= text_1 %>
+              </div>
+            <% elsif image_1? %>
+              <div class="slide-media" data-role="media-1">
+                <img src="<%= image_1 %>">
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <div class="slide-content" data-slide-region="content-2">
+          <% if text_2? %>
+            <div class="slide-text" data-role="text-2">
+              <%= text_2 %>
+            </div>
+          <% elsif image_2? %>
+            <div class="slide-media" data-role="media-2">
+              <img src="<%= image_2 %>">
+            </div>
           <% end %>
         </div>
       </div>

data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb

@@ -7,7 +7,7 @@ module Coco
           include Coco::TagHelper
           include Coco::FormatHelper
 
-          accepts_option :layout, from: %w[basic], default: "basic"
+          accepts_option :layout, from: %w[one-col-title one-col-text one-col-media two-col-text two-col-media two-col-mixed], default: "one-col-title"
 
           renders_one :title,
             ->(&block) do
@@ -21,6 +21,33 @@ module Coco
               block.call
             end
 
+          renders_one :text_2,
+            ->(&block) do
+              @has_content = true
+              block.call
+            end
+
+          renders_one :image_1,
+            ->(href:) do
+              @has_content = true
+              href
+            end
+
+          renders_one :image_2,
+            ->(href:) do
+              @has_content = true
+              href
+            end
+
+          before_initialize do |kwargs|
+            if kwargs[:layout]
+              kwargs[:layout] = kwargs[:layout].to_s.tr("_", "-")
+              kwargs[:layout] = "one-col-title" if kwargs[:layout] == "basic" # handle legacy layout name
+            end
+
+            kwargs
+          end
+
           attr_reader :bg_image, :text_color_hex, :bg_color_hex
 
           def initialize(bg_image: nil, bg_color_hex: nil, text_color_hex: nil, render_empty: false, **kwargs)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.5.5"
+  VERSION = "0.5.6"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.5.5
+  version: 0.5.6
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-18 00:00:00.000000000 Z
+date: 2023-07-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1257,7 +1257,9 @@ files:
 - app/assets/build/coco/icons/zoom-out.svg
 - app/assets/build/coco/img/coveragebook-landscape-white.svg
 - app/assets/build/coco/img/coveragebook-logomark-white.svg
-- app/assets/build/coco/img/slide-bg.jpg
+- app/assets/build/coco/img/test/slides/slide-bg.jpg
+- app/assets/build/coco/img/test/slides/slide-foreground-landscape.jpg
+- app/assets/build/coco/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/config/coco/manifest.js
 - app/assets/css/app.css
 - app/assets/css/app/config.css
@@ -1274,7 +1276,9 @@ files:
 - app/assets/css/libs/tippy.css
 - app/assets/img/coveragebook-landscape-white.svg
 - app/assets/img/coveragebook-logomark-white.svg
-- app/assets/img/slide-bg.jpg
+- app/assets/img/test/slides/slide-bg.jpg
+- app/assets/img/test/slides/slide-foreground-landscape.jpg
+- app/assets/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/js/app.js
 - app/assets/js/app/components.js
 - app/assets/js/app/mixins/dropdown.js