fix: edu resource multimedia and gallery templates (#594)

* modifying publication date on multimedia and gallery templates * QA fixes on edu Gallery Detail page * moving BlockText styles to BlockText scss file * fixing vue build errors * fixing storybook workflow error
nasa-jpl · Sep 5, 2024 · 5b69aa9 · 5b69aa9
1 parent 3e57f3e
commit 5b69aa9
Show file tree

Hide file tree

Showing 12 changed files with 242 additions and 75 deletions.
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -40,7 +40,7 @@ jobs:
         run: make vue-storybook-build
 
       - name: Upload build to artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook
           path: apps/vue-storybook/storybook_compiled

diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -103,6 +103,48 @@
       }
     }
   }
+  .richtext-image {
+    &.full-width {
+      @apply mb-10 lg:mb-14;
+      @apply w-full h-auto;
+    }
+    &.left,
+    &.right {
+      @apply mb-5 lg:mb-5 mx-5 lg:mx-8;
+      @apply inline max-w-full sm:max-w-[50%] h-auto;
+    }
+    &.left {
+      @apply sm:float-left ml-0;
+      @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;
+      @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;
+    }
+  }
+  > div {
+    @apply mb-10 lg:mb-14;
+    iframe {
+      @apply w-full h-auto aspect-video;
+    }
+    &:last-child {
+      @apply mb-0;
+    }
+  }
+
   &.-small {
     p {
       @apply mb-2;

diff --git a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue
@@ -31,7 +31,10 @@ export default defineComponent({
     v-if="data"
     class="BaseImageCaption text-body-sm"
   >
-    <div class="inline mr-2">
+    <div
+      v-if="data.caption || data.credit"
+      class="inline mr-2"
+    >
       <div
         class="the-caption-text inline"
         v-html="data.caption"
@@ -44,20 +47,20 @@ export default defineComponent({
       </span>
     </div>
     <BaseLink
-      v-if="data.detailUrl"
+      v-if="customLink"
       class="inline-block"
       variant="default"
-      :to="data.detailUrl"
+      :to="customLink"
     >
-      Full Image Details
+      {{ customLinkText }}
     </BaseLink>
     <BaseLink
-      v-else-if="customLink"
+      v-else-if="data.detailUrl"
       class="inline-block"
       variant="default"
-      :to="customLink"
+      :to="data.detailUrl"
     >
-      {{ customLinkText }}
+      Full Image Details
     </BaseLink>
   </div>
 </template>

diff --git a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
@@ -1,6 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -19,7 +22,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +32,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a fixed aspect ratio (21:9 on smaller screens, 2:1 on larger screens)
     constrain: {
@@ -43,6 +51,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -59,19 +68,36 @@ export default defineComponent({
     theSrcSet(): string | undefined {
       return this.theData ? mixinGetSrcSet(this.theData) : undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.data) {
+        if (this.themeStore.isEdu) {
+          return this.theData?.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData?.caption ||
+          this.theData?.credit ||
+          this.theData?.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -87,7 +113,7 @@ export default defineComponent({
           :src="theData.original || theData.src?.url"
           :caption="theData.caption"
           :credit="theData.credit"
-          :detail-url="theData.detailUrl"
+          :detail-url="customDetailUrl || theData.detailUrl"
         >
           <BaseImagePlaceholder
             :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -113,7 +139,11 @@ export default defineComponent({
       v-if="data && hasCaptionArea"
       class="max-w-screen-3xl p-4 pb-0 mx-auto"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockImage/BlockImageStandard.vue b/packages/vue/src/components/BlockImage/BlockImageStandard.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import type { ImageObject } from './../../interfaces'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -19,7 +20,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +30,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a 16:9 aspect ratio
     constrain: {
@@ -38,6 +44,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -51,19 +58,36 @@ export default defineComponent({
       }
       return undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.theData) {
+        if (this.themeStore.isEdu) {
+          return this.theData.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData.caption ||
+          this.theData.credit ||
+          this.theData.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -77,7 +101,7 @@ export default defineComponent({
       :src="theData.original || theData.src?.url"
       :caption="theData.caption"
       :credit="theData.credit"
-      :detail-url="theData.detailUrl"
+      :detail-url="customDetailUrl || theData.detailUrl"
     >
       <BaseImagePlaceholder
         :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -100,7 +124,11 @@ export default defineComponent({
       v-if="theData && hasCaptionArea"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockImageComparison/BlockImageComparison.vue b/packages/vue/src/components/BlockImageComparison/BlockImageComparison.vue
@@ -1,38 +1,41 @@
 <template>
   <div v-if="data">
-    <client-only placeholder="Loading Image Comparison...">
-      <VueCompareImage
-        v-if="theBeforeImageSrc && theAfterImageSrc"
-        class="h-full animate-fadeIn"
-        :left-image="theBeforeImageSrc.url"
-        left-image-alt="Left image"
-        :right-image="theAfterImageSrc.url"
-        right-image-alt="Right image"
-      />
-    </client-only>
+    <VueCompareImage
+      v-if="theBeforeImageSrc && theAfterImageSrc"
+      class="h-full animate-fadeIn"
+      :left-image="theBeforeImageSrc.url"
+      left-image-alt="Left image"
+      :right-image="theAfterImageSrc.url"
+      right-image-alt="Right image"
+    />
     <div
-      v-if="data.caption && data.caption.length > 2"
-      class="text-gray-mid-dark mt-3"
-      v-html="data.caption"
-    ></div>
+      v-if="data.caption || customDetailUrl"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
+    >
+      <BaseImageCaption
+        :data="{ caption: data.caption }"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-// import VueCompareImage from 'vue3-compare-image'
-
-// const VueCompareImage = process.browser ? require('vue3-compare-image') : null
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
 export default defineComponent({
   name: 'BlockImageComparison',
-  // components: {
-  //   VueCompareImage,
-  // },
+  components: { BaseImageCaption },
   props: {
     data: {
       type: Object,
       required: true
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   computed: {