fix: full bleed adjustments (#637)

* making edu desktop nav full width * removing bg-gray-light extensions on full bleed images/heroes * BlockCardGrid only exands to 4 columns if there are more than 3 cards
nasa-jpl · Sep 25, 2024 · d671d74 · d671d74
1 parent 41e080f
commit d671d74
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 71 deletions.
diff --git a/packages/vue/src/components/BlockCardGrid/BlockCardGrid.stories.js b/packages/vue/src/components/BlockCardGrid/BlockCardGrid.stories.js
@@ -92,3 +92,6 @@ export const BaseStory = {
   name: 'BlockCardGrid',
   args: { cards: BlockCardGridData }
 }
+export const ThreeCards = {
+  args: { cards: BlockCardGridData.slice(0, 3) }
+}
diff --git a/packages/vue/src/components/BlockCardGrid/BlockCardGrid.vue b/packages/vue/src/components/BlockCardGrid/BlockCardGrid.vue
@@ -3,9 +3,7 @@
     v-if="cards"
     class="BlockCardGrid"
   >
-    <div
-      :class="`hidden md:grid md:grid-cols-2 lg:grid-cols-3 ${compact ? ' gap-5' : '3xl:grid-cols-4 gap-8'}`"
-    >
+    <div :class="computedClasses">
       <BlockCardGridItem
         v-for="(card, index) of cards"
         :key="`item-${index}`"
@@ -65,6 +63,23 @@ export default defineComponent({
       type: Array as PropType<CardGridItem[]>,
       default: undefined
     }
+  },
+  computed: {
+    fourColumns() {
+      return this.cards && this.cards.length > 3
+    },
+    computedClasses() {
+      let classes = 'hidden md:grid md:grid-cols-2 lg:grid-cols-3'
+      if (this.compact) {
+        classes += ' gap-5'
+      } else {
+        classes += ' gap-8'
+      }
+      if (this.fourColumns) {
+        classes += ' xl:grid-cols-4'
+      }
+      return classes
+    }
   }
 })
 </script>
diff --git a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
@@ -109,34 +109,32 @@ export default defineComponent({
     v-if="theData"
     class="BlockImageFullBleed"
   >
-    <div class="bg-gray-light">
-      <div class="max-w-screen-3xl mx-auto">
-        <MixinFancybox
-          v-if="theData.src"
-          :src="theData.original || theData.src?.url"
-          :caption="theData.caption"
-          :credit="theData.credit"
-          :detail-url="customDetailUrl || theData.detailUrl"
+    <div class="max-w-screen-3xl mx-auto">
+      <MixinFancybox
+        v-if="theData.src"
+        :src="theData.original || theData.src?.url"
+        :caption="theData.caption"
+        :credit="theData.credit"
+        :detail-url="customDetailUrl || theData.detailUrl"
+      >
+        <BaseImagePlaceholder
+          :aspect-ratio="constrain ? '16:9' : 'none'"
+          :responsive-aspect-ratio="constrain ? 'lg:aspect-ratio-two-one' : ''"
+          dark-mode
         >
-          <BaseImagePlaceholder
-            :aspect-ratio="constrain ? '16:9' : 'none'"
-            :responsive-aspect-ratio="constrain ? 'lg:aspect-ratio-two-one' : ''"
-            dark-mode
-          >
-            <BaseImage
-              v-if="theData.src && theData.srcCropped"
-              :src="constrain ? theData.srcCropped.url : theData.src.url"
-              :srcset="theData.srcSet && !constrain ? theData.srcSet : theSrcSet"
-              :width="constrain ? theData.srcCropped.width : theData.src.width"
-              :height="constrain ? theData.srcCropped.height : theData.src.height"
-              :alt="theData.alt"
-              :image-class="!constrain ? 'w-full h-auto' : undefined"
-              :object-fit-class="constrain ? 'cover' : undefined"
-              loading="lazy"
-            />
-          </BaseImagePlaceholder>
-        </MixinFancybox>
-      </div>
+          <BaseImage
+            v-if="theData.src && theData.srcCropped"
+            :src="constrain ? theData.srcCropped.url : theData.src.url"
+            :srcset="theData.srcSet && !constrain ? theData.srcSet : theSrcSet"
+            :width="constrain ? theData.srcCropped.width : theData.src.width"
+            :height="constrain ? theData.srcCropped.height : theData.src.height"
+            :alt="theData.alt"
+            :image-class="!constrain ? 'w-full h-auto' : undefined"
+            :object-fit-class="constrain ? 'cover' : undefined"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+      </MixinFancybox>
     </div>
     <div
       v-if="data && hasCaptionArea"

diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.vue b/packages/vue/src/components/HeroMedia/HeroMedia.vue
@@ -3,52 +3,50 @@
     v-if="image || video"
     class="HeroMedia"
   >
-    <div class="bg-gray-light">
-      <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
-        <div class="hero">
-          <template v-if="theImageData">
-            <img
-              v-if="theImageData.src"
-              class="object-cover object-center w-full h-full"
-              :srcset="theSrcSet"
-              :src="theImageData.src.url"
-              :width="theImageData.src.width"
-              :height="theImageData.src.height"
-              :alt="theImageData.alt"
-              itemprop="image"
-              data-chromatic="ignore"
-            />
-          </template>
-          <template v-else-if="video">
-            <MixinVideoBg :video="video" />
-          </template>
-        </div>
-        <div
-          v-if="hasCaptionArea"
-          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
-        >
-          <button
-            class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
-            aria-label="Toggle caption"
-            @click="toggleCaption"
-          >
-            <IconInfo
-              v-show="!captionVisible"
-              class="text-xl"
-            />
-            <IconClose v-show="captionVisible" />
-          </button>
-        </div>
+    <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
+      <div class="hero">
+        <template v-if="theImageData">
+          <img
+            v-if="theImageData.src"
+            class="object-cover object-center w-full h-full"
+            :srcset="theSrcSet"
+            :src="theImageData.src.url"
+            :width="theImageData.src.width"
+            :height="theImageData.src.height"
+            :alt="theImageData.alt"
+            itemprop="image"
+            data-chromatic="ignore"
+          />
+        </template>
+        <template v-else-if="video">
+          <MixinVideoBg :video="video" />
+        </template>
       </div>
-
       <div
         v-if="hasCaptionArea"
-        :class="captionVisibilityClass"
-        class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
+        class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
       >
-        <BaseImageCaption :data="theImageData || customCaption" />
+        <button
+          class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
+          aria-label="Toggle caption"
+          @click="toggleCaption"
+        >
+          <IconInfo
+            v-show="!captionVisible"
+            class="text-xl"
+          />
+          <IconClose v-show="captionVisible" />
+        </button>
       </div>
     </div>
+
+    <div
+      v-if="hasCaptionArea"
+      :class="captionVisibilityClass"
+      class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
+    >
+      <BaseImageCaption :data="theImageData || customCaption" />
+    </div>
   </div>
 </template>
 <script lang="ts">

diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
@@ -12,7 +12,7 @@
     }"
   >
     <!-- navbar -->
-    <div class="header-bg z-10 max-w-screen-3xl absolute inset-0 mx-auto"></div>
+    <div class="header-bg z-10 absolute inset-0 mx-auto"></div>
     <div class="px-4">
       <div class="h-18 container flex items-center justify-between mx-auto">
         <!-- branding -->