fix: adjustments to floating images and unordered list markers (#628)

* adjusting bullet points to work with floating images, making KeyPoints match * adjusting color overrides to match marker css * lint * resolving remaining conflict * fixing margin on list items in student project page * fixing table contents when in BlockText on a student project step
nasa-jpl · Sep 20, 2024 · f548250 · f548250
1 parent a548aae
commit f548250
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 64 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/PageEduExplainerArticle/PageEduExplainerArticle.vue b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
@@ -231,8 +231,8 @@ export default defineComponent({
   .BlockText {
     ul {
       li {
-        &::before {
-          @apply bg-secondary;
+        &::marker {
+          @apply text-secondary;
         }
       }
     }

diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
@@ -260,8 +260,8 @@ const { data } = reactive(props)
   .BlockText {
     ul {
       li {
-        &::before {
-          @apply bg-secondary;
+        &::marker {
+          @apply text-secondary;
         }
       }
     }

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 { BlockRichTableData } from './../../../components/BlockRichTable/BlockRichTable.stories'
 import {
   BlockStreamfieldTruncatedData,
@@ -144,7 +145,11 @@ export const BaseStory = {
             BlockImageData,
             ...BlockStreamfieldMinimalData.body,
             BlockRichTableData,
-            BlockInlineImageData.block
+            BlockInlineImageData.block,
+            {
+              blockType: 'RichTextBlock',
+              value: RichTextMediaData
+            }
           ]
         },
         {

diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue
@@ -451,9 +451,9 @@ const computedClass = computed((): string => {
   .BlockText {
     ul {
       li {
-        &::before {
+        &::marker {
           // intentionally using a specific red
-          @apply bg-jpl-red;
+          @apply text-jpl-red;
         }
       }
     }

diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue
@@ -186,13 +186,34 @@ 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:not(.BlockRichTable.BlockText) {
-      @screen lg {
-        @apply mr-[10rem];
+    .LayoutHelper > div > .BlockText {
+      p,
+      li {
+        @screen lg {
+          @apply mr-[10rem];
+        }
+        @screen xl {
+          @apply mr-[14rem];
+        }
       }
-      @screen xl {
-        @apply mr-[14rem];
+      table {
+        p,
+        li {
+          @apply mr-0;
+        }
       }
     }
   }