adjusting bullet points to work with floating images, making KeyPoint…

…s match
nasa-jpl · Sep 19, 2024 · 9397743 · 9397743
1 parent 13da08b
commit 9397743
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 54 deletions.
diff --git a/packages/common/src/scss/components/_BlockKeyPoints.scss b/packages/common/src/scss/components/_BlockKeyPoints.scss
@@ -1,21 +1,14 @@
 .BlockKeyPoints {
   @media not print {
+    ul {
+      @apply ml-6;
+    }
     ul li {
-      &::before {
-        @apply bg-primary;
-        @apply inline-block;
-        @apply relative;
-        @apply mr-4;
-        @apply shrink-0;
-        @apply mt-3;
-        @apply print:hidden;
-
-        content: '';
-        width: 30px;
-        height: 2px;
-        vertical-align: middle;
+      &::marker {
+        content: '—';
+        @apply leading-none text-primary font-medium text-[22px] lg:text-[24px];
       }
-
+      @apply pl-2 lg:pl-4;
       .BlockText {
         p {
           @apply mb-2;

diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -55,7 +55,7 @@
 
   ol,
   ul {
-    @apply mb-5;
+    @apply mb-5 relative left-14 pr-14;
 
     @screen lg {
       @apply mb-8;
@@ -75,7 +75,7 @@
   }
 
   ol {
-    @apply pl-12 list-decimal;
+    @apply list-decimal pl-2 lg:pl-4;
     ol {
       list-style-type: lower-alpha;
       ol {
@@ -86,20 +86,12 @@
       }
     }
   }
-
   ul {
     li {
-      @apply pl-12 relative;
-
-      &::before {
-        content: '';
-        width: 30px;
-        height: 2px;
-        @apply bg-primary block absolute top-0 left-0 mt-3;
-
-        @screen sm {
-          @apply mt-4;
-        }
+      @apply pl-2 lg:pl-4;
+      &::marker {
+        content: '—';
+        @apply leading-none text-primary font-medium text-[22px] lg:text-[28px];
       }
     }
   }
@@ -113,7 +105,7 @@
     }
     &.left,
     &.right {
-      @apply mb-5 lg:mb-5 mx-5 lg:mx-8;
+      @apply mt-[.25rem] mb-5 lg:mb-5 mx-5 lg:mx-8;
       @apply inline max-w-full sm:max-w-[50%];
       img {
         @apply max-w-full  h-auto;
@@ -123,26 +115,20 @@
       @apply sm:float-left ml-0;
       // mimics offset in BlockInlineImage
       @apply ml-0 lg:-ml-[5.3rem] xl:-ml-[6.8rem];
-      // uncomment if floating images become unwieldy
-      // + p,
-      // + div {
-      //   clear: right;
-      // }
     }
     &.right {
       @apply sm:float-right mr-0;
       // mimics offset in BlockInlineImage
       @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem];
-      // uncomment if floating images become unwieldy
-      // + p,
-      // + div {
-      //   clear: left;
-      // }
     }
     &:last-child {
       @apply mb-0;
     }
   }
+  // subsequent floating images
+  .richtext-image ~ .richtext-image {
+    clear: both;
+  }
   .richtext-caption {
     // mimic BaseImageCaption
     @apply pt-3 text-gray-mid-dark text-sm lg:text-base;
@@ -178,11 +164,8 @@
   &.-medium {
     ul {
       li {
-        &::before {
-          @apply mt-3;
-          @screen lg {
-            @apply mt-3.5;
-          }
+        &::marker {
+          @apply lg:text-[24px];
         }
       }
     }
@@ -257,11 +240,8 @@
     }
     ul {
       li {
-        &::before {
-          @apply mt-2.5;
-          @screen lg {
-            @apply mt-3;
-          }
+        &::marker {
+          @apply lg:text-[22px];
         }
       }
     }

diff --git a/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue b/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue
@@ -11,7 +11,7 @@
       <li
         v-for="(item, index) in data.listItem"
         :key="index"
-        class="flex print:!list-item print:ml-4"
+        class="print:!list-item print:ml-4"
         :class="index + 1 === data.listItem.length ? 'mb-0' : 'mb-4'"
       >
         <BlockText

diff --git a/packages/vue/src/components/BlockText/BlockText.stories.js b/packages/vue/src/components/BlockText/BlockText.stories.js
diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js
@@ -9,6 +9,7 @@ import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories
 import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { RichTextMediaData } from './../../../components/BlockText/BlockText.stories.js'
 import {
   BlockStreamfieldTruncatedData,
   BlockStreamfieldMinimalData
@@ -139,7 +140,15 @@ export const BaseStory = {
         {
           heading: 'Lorem ipsum dolor no media',
           media: [],
-          content: [BlockImageData, ...BlockStreamfieldMinimalData.body, BlockInlineImageData.block]
+          content: [
+            BlockImageData,
+            ...BlockStreamfieldMinimalData.body,
+            BlockInlineImageData.block,
+            {
+              blockType: 'RichTextBlock',
+              value: RichTextMediaData
+            }
+          ]
         },
         {
           heading: 'Sit amet',

diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue
@@ -186,8 +186,20 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     // intentionally overriding correction that occurs within ThemeVariantGray
     @apply text-jpl-red;
   }
+  .richtext-image {
+    &.right,
+    &.left {
+      @apply lg:max-w-md;
+    }
+    &.right {
+      @apply mr-0;
+    }
+    &.left {
+      @apply ml-0;
+    }
+  }
   .PageEduStudentProjectStep__fullWidth {
-    .LayoutHelper > div > .BlockText {
+    .LayoutHelper > div > .BlockText p {
       @screen lg {
         @apply mr-[10rem];
       }