coveragebook_components 0.6.1 → 0.6.3

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

@@ -1,16 +1,16 @@
 @layer components {
   [data-coco][data-component="book-editable-slide"] {
     /* 
-     * slide-padding-md at max (1480px): 240px (16.2%)
-     * slide-padding-md at min (320px): 16.2% x 320px = 52px
+     * slide-padding-lg at max (1480px): 240px (16.2%)
+     * slide-padding-lg at min (320px): 16.2% x 320px = 52px
      */
-    --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
+    --slide-padding-lg: clamp(52px, 16.2cqw, 240px);
 
     /* 
      * slide-padding-md at max (1480px): 120px (8.1%)
      * slide-padding-md at min (320px): 8.1% x 320px = 26px
      */
-    --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
+    --slide-padding-md: clamp(26px, 8.1cqw, 120px);
 
     /* 
      * slide-padding-sm at max (1480px): 80px (5.4%)
@@ -18,6 +18,9 @@
      */
     --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
 
+    /* Visually-adjusted small padding size for grid gap and header spacing */
+    --slide-padding-sm-internal: max(20px, clamp(16px, 4.9cqw, 72px));
+
     /* 
      * Small title font size at max (1480px): 64px (4.3%)
      * Small title font size at min (320px): 4.3% x 320px = 13.8px
@@ -31,10 +34,7 @@
      * 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(
-      16px,
-      clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
-    );
+    --text-font-size: max(12px, clamp(6.1px, 1.86cqw, 28px));
 
     /* ------------- */
 
@@ -49,10 +49,13 @@
 
     .slide-container {
       @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
-      @apply px-6 py-10 @slide-fluid:p-[var(--slide-padding-md)];
+      @apply px-6 py-10 @slide-fluid:px-[var(--slide-padding-md)] @slide-fluid:py-[var(--slide-padding-md)];
+    }
+
+    .slide-layout {
+      @apply @slide-fluid:grid h-full w-full;
     }
 
-    [data-slide-region],
     .slide-header,
     .slide-text,
     .slide-media {
@@ -63,25 +66,38 @@
       @apply contents;
     }
 
+    .slide-header {
+      @apply w-full;
+    }
+
     .slide-title {
-      @apply font-bold text-current;
+      @apply font-bold text-current w-full;
       overflow-wrap: anywhere;
       line-height: 1.1;
       font-size: var(--title-font-size);
     }
 
     .slide-text {
-      @apply text-current;
+      @apply text-current text-base w-full overflow-hidden;
       line-height: 1.5;
-      font-size: var(--text-font-size);
     }
 
     .slide-media {
-      @apply w-full text-current;
-      font-size: var(--text-font-size);
+      @apply w-full text-current relative text-base;
+    }
+
+    @container (min-width: 700px) {
+      .slide-text,
+      .slide-media {
+        font-size: var(--text-font-size);
+      }
+    }
+
+    .slide-media-wrapper {
+      @apply @slide-fluid:absolute @slide-fluid:inset-0 @slide-fluid:w-full @slide-fluid:h-full;
 
       img {
-        @apply w-full h-full object-contain;
+        @apply w-full h-full object-contain object-center;
       }
     }
 
@@ -93,7 +109,7 @@
        * Title font size at min (320px): 5.4% x 320px = 17px
        */
       --title-font-size: max(
-        35px,
+        38px,
         clamp(17px, 5.4cqw, theme(fontSize.display-2))
       );
 
@@ -102,86 +118,70 @@
        * Text font size at min (320px): 2.16% x 320px = 7px
        */
       --text-font-size: max(
-        16px,
+        15px,
         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;
-
-        .slide-text {
-          @apply block;
-        }
-      }
-
-      &.with-title [data-slide-region="content-1"] .slide-text {
-        margin-top: 0.875em;
+        @apply py-12 @slide-fluid:px-[var(--slide-padding-lg)] @slide-fluid:py-[var(--slide-padding-md)];
       }
 
       .slide-layout {
-        @apply flex flex-col items-center justify-center text-center w-full h-full;
+        @apply mx-auto max-w-[475px] @slide-fluid:max-w-full;
+        grid-template-areas: "content";
       }
 
-      .slide-header {
-        @apply w-full block;
+      [data-role="group-primary-text"] {
+        @apply flex flex-col items-center justify-center text-center h-full;
+        grid-area: content;
       }
 
-      .slide-content {
-        @apply flex-none w-full;
-      }
-
-      .slide-header,
-      .slide-content {
-        @apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
+      [data-role="header"],
+      [data-role="text-primary"] {
+        @apply block;
       }
 
       .slide-text {
         line-height: 1.4;
       }
+
+      &.with-title .slide-text {
+        margin-top: 0.875em;
+      }
     }
 
     &[data-layout="one-col-text"] {
       .slide-container {
-        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
-        @apply flex items-center;
+        @apply py-10 @slide-fluid:py-[var(--slide-padding-sm)];
       }
 
       .slide-layout {
-        @apply @slide-fluid:grid w-full;
-        height: min-content;
-        grid-template-columns: 1fr;
+        @apply @slide-fluid:py-[4.8cqw];
+        grid-template-areas: "content";
         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;
-        }
+      &.with-title .slide-layout {
+        @apply py-0;
+        grid-template-areas:
+          "header"
+          "content";
+        grid-template-rows: min-content auto;
+        grid-gap: var(--slide-padding-sm-internal);
       }
 
-      .slide-header {
-        @apply w-full block;
-        @apply mb-6 @slide-fluid:mb-0;
+      [data-role="header"],
+      [data-role="text-primary"] {
+        @apply block;
       }
 
-      [data-slide-region="content-1"] {
-        @apply block;
+      [data-role="header"] {
+        grid-area: header;
+        @apply mb-5 @slide-fluid:mb-0;
+      }
 
-        .slide-text {
-          @apply block;
-        }
+      [data-role="text-primary"] {
+        grid-area: content;
       }
     }
 
@@ -190,126 +190,142 @@
         @apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
       }
 
-      .slide-layout,
-      .slide-content {
-        @apply h-full;
+      .slide-layout {
+        grid-template-areas: "content";
+        grid-template-rows: 100%;
       }
 
-      [data-slide-region="content-1"] {
-        @apply block;
-
-        .slide-media {
-          @apply block w-full h-full;
+      [data-role="media-primary"] {
+        @apply block h-full;
+        grid-area: content;
+      }
 
-          img {
-            @apply h-full w-full object-contain;
-          }
-        }
+      .slide-media-wrapper {
+        @apply h-full;
       }
     }
 
-    &[data-layout="two-col-text"],
-    &[data-layout="two-col-media"] {
+    &[data-layout="two-col-mixed"] {
       .slide-container {
-        @apply flex items-center;
-        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
+        @apply py-10 @slide-fluid:p-[var(--slide-padding-md)];
       }
 
       .slide-layout {
-        @apply @slide-fluid:grid w-full;
-        height: min-content;
+        grid-template-areas: "text media";
+        grid-template-rows: 100%;
         grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto;
-        grid-gap: var(--slide-padding-sm);
+        grid-gap: var(--slide-padding-sm-internal);
       }
 
-      &.with-title {
-        .slide-container {
-          @apply block;
-        }
-
-        .slide-layout {
-          @apply h-full;
-          grid-template-rows: min-content auto;
-        }
+      [data-role="header"],
+      [data-role="text-primary"],
+      [data-role="media-primary"],
+      [data-role="group-primary-text"] {
+        @apply block;
       }
 
-      .slide-header {
-        @apply w-full block;
-        @apply mb-10 @slide-fluid:mb-0;
-        grid-column-start: 1;
-        grid-column-end: -1;
+      [data-role="group-primary-text"] {
+        grid-area: text;
+        @apply @slide-fluid:flex @slide-fluid:flex-col @slide-fluid:justify-center @slide-fluid:h-full;
       }
 
-      [data-slide-region="content-1"],
-      [data-slide-region="content-2"] {
-        @apply block;
+      [data-role="media-primary"] {
+        @apply mt-6 @slide-fluid:mt-0;
+        grid-area: media;
       }
 
-      [data-slide-region="content-1"] {
-        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
+      &.with-title .slide-text {
+        margin-top: 0.875em;
       }
     }
 
     &[data-layout="two-col-text"] {
-      .slide-text {
-        @apply block;
+      .slide-container {
+        @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
       }
-    }
 
-    &[data-layout="two-col-media"] {
       .slide-layout {
-        @apply @slide-fluid:h-full;
+        @apply @slide-fluid:py-[4.8cqw];
+        grid-template-areas: "primary secondary";
+        grid-template-rows: auto;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--slide-padding-sm-internal);
       }
 
-      .slide-content {
-        @apply relative @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
+      &.with-title .slide-layout {
+        @apply py-0;
+        grid-template-areas:
+          "header header"
+          "primary secondary";
+        grid-template-rows: min-content auto;
       }
 
-      .slide-media {
-        @apply block @slide-fluid:absolute @slide-fluid:inset-0;
+      [data-role="header"],
+      [data-role="text-primary"],
+      [data-role="text-secondary"] {
+        @apply block;
       }
-    }
 
-    &[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);
+      [data-role="header"] {
+        grid-area: header;
       }
 
-      .slide-group {
-        @apply flex flex-col justify-center;
-        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
+      [data-role="text-primary"] {
+        grid-area: primary;
       }
 
-      .slide-header {
-        @apply w-full block;
+      [data-role="text-secondary"] {
+        grid-area: secondary;
       }
 
-      .slide-title {
-        margin-bottom: 0.5em;
+      .slide-header,
+      [data-role="text-primary"] {
+        @apply mb-6 @slide-fluid:mb-0;
+      }
+    }
+
+    &[data-layout="two-col-media"] {
+      .slide-container {
+        @apply py-10 @slide-fluid:p-[var(--slide-padding-sm)];
       }
 
-      [data-slide-region="content-1"] {
+      .slide-layout {
+        @apply @slide-fluid:py-[4.8cqw];
+        grid-template-areas: "primary secondary";
+        grid-template-rows: auto;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--slide-padding-sm-internal);
+      }
+
+      &.with-title .slide-layout {
+        @apply py-0;
+        grid-template-areas:
+          "header header"
+          "primary secondary";
+        grid-template-rows: min-content auto;
+      }
+
+      [data-role="header"],
+      [data-role="media-primary"],
+      [data-role="media-secondary"] {
         @apply block;
+      }
 
-        .slide-text {
-          @apply block;
-        }
+      [data-role="header"] {
+        grid-area: header;
       }
 
-      [data-slide-region="content-2"] {
-        @apply relative block @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
+      [data-role="media-primary"] {
+        grid-area: primary;
+      }
 
-        .slide-media {
-          @apply block @slide-fluid:absolute @slide-fluid:inset-0;
+      [data-role="media-secondary"] {
+        grid-area: secondary;
+      }
 
-          img {
-            @apply h-full w-full object-contain;
-          }
-        }
+      .slide-header,
+      [data-role="media-primary"] {
+        @apply mb-6 @slide-fluid:mb-0;
       }
     }
   }

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

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

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.6.1"
+  VERSION = "0.6.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.6.3
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-18 00:00:00.000000000 Z
+date: 2023-08-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -427,6 +427,13 @@ files:
 - app/assets/build/coco/icons/crown.svg
 - app/assets/build/coco/icons/cup-soda.svg
 - app/assets/build/coco/icons/currency.svg
+- app/assets/build/coco/icons/custom/eye-off-red.svg
+- app/assets/build/coco/icons/custom/google-sso.svg
+- app/assets/build/coco/icons/custom/layout-overlay.svg
+- app/assets/build/coco/icons/custom/layout-split.svg
+- app/assets/build/coco/icons/custom/layout-stacked.svg
+- app/assets/build/coco/icons/custom/microsoft-sso.svg
+- app/assets/build/coco/icons/custom/montage.svg
 - app/assets/build/coco/icons/database-backup.svg
 - app/assets/build/coco/icons/database.svg
 - app/assets/build/coco/icons/delete.svg
@@ -1281,6 +1288,13 @@ files:
 - app/assets/css/book.css
 - app/assets/css/book/config.css
 - app/assets/css/libs/tippy.css
+- app/assets/custom_icons/other/eye-off-red.svg
+- app/assets/custom_icons/other/google-sso.svg
+- app/assets/custom_icons/other/layout-overlay.svg
+- app/assets/custom_icons/other/layout-split.svg
+- app/assets/custom_icons/other/layout-stacked.svg
+- app/assets/custom_icons/other/microsoft-sso.svg
+- app/assets/custom_icons/other/montage.svg
 - app/assets/img/coveragebook-landscape-white.svg
 - app/assets/img/coveragebook-logomark-white.svg
 - app/assets/img/slides/one-col-media-layout.svg