Skip to content
This repository has been archived by the owner on May 17, 2024. It is now read-only.

revert/semantic html image commits #3232

Closed
wants to merge 2 commits into from
Closed

revert/semantic html image commits #3232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c353e5b
Revert "fix(img): update preview nuxt-img props (#3227)"
techtolentino May 18, 2023
b52dfde
Revert "feat: use semantic HTML images (#3210)"
techtolentino May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions components/CourseOverviewPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@
/>
</template>
<template #image>
<nuxt-img
class="page-header-with-img__image"
format="webp"
sizes="sm:300px md:650px lg:500px xl:750px"
:src="headerImg"
/>
<img class="page-header-with-img__image" :src="headerImg" />
</template>
</UiPageHeaderWithImage>
<LearnPrerequisiteMaterialSection
Expand Down
25 changes: 4 additions & 21 deletions components/Landing/HeroMoment/LandingHeroMomentComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,6 @@
:segment="getStartedLink.segment"
:url="getStartedLink.url"
/>
<nuxt-img
class="hero-moment__container__image"
format="webp"
sizes="lg:500px xl:850px"
src="/images/landing-page/hero-illustration.png"
/>
</div>
</MetalGrid>
</article>
Expand All @@ -54,7 +48,6 @@ const getStartedLink: GeneralLink = {
segment: { cta: "get-started", location: "hero-moment" },
};

// TODO: Fix hydration text content mismatch
const qiskitPronunciation = Math.random() < 0.5 ? "[kiss-kit]" : "[quiss-kit]";
</script>

Expand Down Expand Up @@ -85,27 +78,17 @@ const qiskitPronunciation = Math.random() < 0.5 ? "[kiss-kit]" : "[quiss-kit]";
}

&__container {
background-image: url("/images/landing-page/hero-illustration.png");
background-position: right center;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
overflow: hidden;
padding-top: carbon.$spacing-10;
pointer-events: none;
position: relative;

@include carbon.breakpoint-down(md) {
background-image: none;
}

&__image {
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: -1;

@include carbon.breakpoint-down(md) {
display: none;
}
}
}

&__version-info {
Expand Down
23 changes: 5 additions & 18 deletions components/Landing/LearnSection/LandingLearnSectionCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,7 @@
</div>
</div>
</div>
<div class="cds--col-md learn-card__media">
<nuxt-img
class="learn-card__media__image"
format="webp"
sizes="sm:500px md:700 xl:1000"
src="/images/landing-page/learn-image.jpg"
/>
</div>
<div class="cds--col-md learn-card__media" />
</article>
</template>

Expand Down Expand Up @@ -102,17 +95,11 @@ const learnLink: GeneralLink = {
}

&__media {
background-image: url("/images/landing-page/learn-image.jpg");
background-position: center 25%;
background-size: cover;
flex: 1;
min-height: 12rem;
overflow: hidden;
padding: 0;
position: relative;

&__image {
height: 135%;
object-fit: cover;
position: absolute;
width: 100%;
}
}

&__cta {
Expand Down
9 changes: 3 additions & 6 deletions components/Landing/QiskitCapabilitiesSection/LandingQiskitCapabilityCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,18 @@
<article>
<div class="qiskit-capability-card__container">
<div class="qiskit-capability-card__thumbnail">
<nuxt-img
<img
class="qiskit-capability-card__thumbnail__media"
format="webp"
:src="thumbnailResource"
width="160px"
/>
</div>
<div class="qiskit-capability-card__copy">
<h3 class="qiskit-capability-card__title">
{{ title }}
</h3>
<nuxt-img
<img
class="qiskit-capability-card__thumbnail__mobile"
format="webp"
:src="thumbnailResource"
width="160px"
/>
<div class="qiskit-capability-card__description">
<p v-text="description" />
Expand Down Expand Up @@ -81,6 +77,7 @@ $card-img-width: 10rem;

&__media {
display: block;
width: 100%;
width: $card-img-width;
}

Expand Down
5 changes: 1 addition & 4 deletions components/Learn/LearnCoursePagesSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,8 @@
</div>
<div v-if="activeCourse" class="course-pages-section__main__preview">
<UiBasicLink :url="activeCourse.url">
<nuxt-img
<img
class="course-pages-section__main__preview__image"
format="webp"
preload
sizes="md:650px lg:500px xl:750px"
:src="activeCoursePreviewImage"
/>
</UiBasicLink>
Expand Down
4 changes: 1 addition & 3 deletions components/Learn/LearnSketchedLogo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,8 @@
class="sketched-logo__st1"
/>
</svg>
<nuxt-img
<img
class="sketched-logo__sketch"
format="webp"
sizes="sm:300px md:600px xxl:700px"
src="/images/learn/logo-sketch-lines.png"
/>
</div>
Expand Down
6 changes: 2 additions & 4 deletions components/Metal/MetalBuildingSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,10 @@
<!-- eslint-enable -->
</div>
<div class="building-section__media">
<nuxt-img
alt="Sketched illustration of a group standing in front of a whiteboard."
<img
class="building-section__media-img"
format="webp"
sizes="lg:600px"
src="/images/metal/whiteboard-dark.png"
alt="Sketched illustration of a group standing in front of a whiteboard."
/>
</div>
</div>
Expand Down
47 changes: 34 additions & 13 deletions components/Metal/MetalCapabilitiesSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,36 @@
class="capabilities-section__card scrollable"
:title="item.title"
:description="item.description"
:video="item.video"
:visual-resource="item.visualResource"
/>
</div>
<div class="capabilities-section__scrolling-ui">
<div
v-for="(item, index) in capabilities"
:key="item.video"
class="capabilities-section__video-container"
:key="item.visualResource"
class="capabilities-section__visual-resource-container"
:class="{
'capabilities-section__video-container_active': isActiveImage(
item,
index
),
'capabilities-section__visual-resource-container_active':
isActiveImage(item, index),
}"
>
<video
class="capabilities-section__video"
v-if="isVideo(item.visualResource)"
class="capabilities-section__visual-resource capabilities-section__visual-resource_type_video"
loop
autoplay
muted
playsinline
>
<source :src="item.video" type="video/mp4" />
<source :src="item.video" type="video/ogg" />
<source :src="item.visualResource" type="video/mp4" />
<source :src="item.visualResource" type="video/ogg" />
Your browser does not support video.
</video>
<div
v-else
class="capabilities-section__visual-resource capabilities-section__visual-resource_type_image"
:style="{ 'background-image': `url(${item.visualResource})` }"
/>
</div>
</div>
</div>
Expand All @@ -57,6 +61,11 @@ const isActiveImage = (item: MetalCapability, index: number): boolean => {
(activeSection.value === "" && index === 0)
);
};

const isVideo = (url: string): boolean => {
const extension = url.substring(url.length - 4);
return extension === ".mp4";
};
</script>

<style lang="scss" scoped>
Expand Down Expand Up @@ -118,7 +127,7 @@ const isActiveImage = (item: MetalCapability, index: number): boolean => {
}
}

&__video-container {
&__visual-resource-container {
position: absolute;
top: 0;
opacity: 0;
Expand All @@ -131,8 +140,20 @@ const isActiveImage = (item: MetalCapability, index: number): boolean => {
}
}

&__video {
width: 100%;
&__visual-resource {
&_type {
&_image {
width: 100%;
height: 100%;
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
}

&_video {
width: 100%;
}
}
}
}
</style>
31 changes: 25 additions & 6 deletions components/Metal/MetalCapabilityCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,41 @@
<!-- estlint-enable -->
</div>
</div>
<video class="capability-card__video" loop autoplay muted playsinline>
<source :src="video" type="video/mp4" />
<source :src="video" type="video/ogg" />
<video
v-if="isVideo"
class="capability-card__visual-resource"
loop
autoplay
muted
playsinline
>
<source :src="visualResource" type="video/mp4" />
<source :src="visualResource" type="video/ogg" />
Your browser does not support video.
</video>
<div
v-else
class="capability-card__visual-resource"
:style="{ 'background-image': `url(${visualResource})` }"
/>
</article>
</template>

<script setup lang="ts">
interface Props {
visualResource: string;
title: string;
description: string;
video: string;
}

defineProps<Props>();
const props = defineProps<Props>();

const isVideo = computed<boolean>(() => {
const extension = props.visualResource.substring(
props.visualResource.length - 4
);
return extension === ".mp4";
});
</script>

<style lang="scss" scoped>
Expand Down Expand Up @@ -80,7 +99,7 @@ defineProps<Props>();
}
}

&__video {
&__visual-resource {
flex: 0 0 32rem;
width: 100%;
height: 100%;
Expand Down
13 changes: 6 additions & 7 deletions components/Metal/MetalDarkHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,21 +130,20 @@
</svg>

<div class="dark-header__media">
<nuxt-img
<img
class="dark-header__media-cryo"
format="webp"
sizes="sm:500px md:700px lg:900px"
src="/images/metal/hero/cryo.png"
alt=""
/>
<nuxt-img
<img
class="dark-header__media-transmon-outline"
format="webp"
src="/images/metal/hero/transmon.svg"
alt=""
/>
<nuxt-img
<img
class="dark-header__media-transmon"
format="webp"
src="/images/metal/hero/transmon.png"
alt=""
/>
</div>
</div>
Expand Down
25 changes: 9 additions & 16 deletions components/Metal/MetalFeatureCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,10 @@
{{ title }}
</h3>
<div class="feature-card__content">
<div class="feature-card__image-container">
<nuxt-img
class="feature-card__image"
format="webp"
sizes="sm:300px md:600px lg:300px"
:src="image"
/>
</div>
<div
class="feature-card__image"
:style="{ 'background-image': `url(${image})` }"
/>
<!-- TODO: HTML content should not be in strings but in components
but lacking of a better solution given time constraints. -->
<!-- eslint-disable vue/no-v-html -->
Expand Down Expand Up @@ -62,19 +58,16 @@ defineProps<Props>();
}

&__image {
height: 100%;
object-fit: contain;
position: absolute;
width: 100%;
}

&__image-container {
flex: 0 0 14rem;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;

@include carbon.breakpoint-down(md) {
background-size: contain;
height: 11rem;
width: auto;
}
}

Expand Down
Loading