Skip to content

Commit

Permalink
Merge pull request #91 from GoogleChromeLabs/carousel/text
Browse files Browse the repository at this point in the history 
add text to each carousel image
  • Loading branch information
@flashdesignory
flashdesignory authored Oct 30, 2024
2 parents 2393dcc + 85155c1 commit 149bff9
Show file tree
Hide file tree
Showing 44 changed files with 151 additions and 67 deletions.
2 changes: 2 additions & 0 deletions apps/news-site/news-site-next-app-router/src/partials/article/article-carousel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useState } from "react";
import classNames from "classnames";
import Image from "next/image";
import ArticleTag from "@/components/molecules/article/article-tag";
import ArticleText from "@/components/molecules/article/article-text";
import LeftButton from "@/components/assets/left-button";
import RightButton from "@/components/assets/right-button";

Expand Down Expand Up @@ -57,6 +58,7 @@ export default function ArticleCarousel({ data, imageClass, meta }) {
key={image.id}
>
<Image key={image.id} className={classNames(styles["article-image"])} src={`${imageDir}${image.src}`} width={image.width} height={image.height} alt={image.alt} />
<ArticleText text={image.alt} textClass={carouselStyles.text} />
</div>
)}
</div>
Expand Down
11 changes: 11 additions & 0 deletions apps/news-site/news-site-next-app-router/src/partials/article/article-carousel.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@
z-index: 1;
}

.text {
position: absolute;
bottom: 0;
color: var(--color-utils-gray-dark);
padding: var(--content-spacing-xsmall);
width: 100%;
display: flex;
justify-content: center;
background-color: var(--color-opacity-white-50);
}

.prev-slide.right-to-left {
animation: prev-right-to-left 0.3s forwards;
}
Expand Down
2 changes: 2 additions & 0 deletions apps/news-site/news-site-next-pages-router/src/partials/article/article-carousel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useState } from "react";
import classNames from "classnames";
import Image from "next/image";
import ArticleTag from "@/components/molecules/article/article-tag";
import ArticleText from "@/components/molecules/article/article-text";
import LeftButton from "@/components/assets/left-button";
import RightButton from "@/components/assets/right-button";

Expand Down Expand Up @@ -57,6 +58,7 @@ export default function ArticleCarousel({ data, imageClass, meta }) {
key={image.id}
>
<Image key={image.id} className={classNames(styles["article-image"])} src={`${imageDir}${image.src}`} width={image.width} height={image.height} alt={image.alt} />
<ArticleText text={image.alt} textClass={carouselStyles.text} />
</div>
)}
</div>
Expand Down
11 changes: 11 additions & 0 deletions apps/news-site/news-site-next-pages-router/src/partials/article/article-carousel.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@
z-index: 1;
}

.text {
position: absolute;
bottom: 0;
color: var(--color-utils-gray-dark);
padding: var(--content-spacing-xsmall);
width: 100%;
display: flex;
justify-content: center;
background-color: var(--color-opacity-white-50);
}

.prev-slide.right-to-left {
animation: prev-right-to-left 0.3s forwards;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/news-site/news-site-next/dist/404.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/ec187bc9a45ccd09.css" as="style"/><link rel="stylesheet" href="./_next/static/css/ec187bc9a45ccd09.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./workload-testing-utils.min.js" type="module" async="" defer="" data-nscript="beforeInteractive"></script><script src="./workload-test.js" type="module" async="" defer="" data-nscript="beforeInteractive"></script><script src="./_next/static/chunks/webpack-dabe763974b7e688.js" defer=""></script><script src="./_next/static/chunks/framework-2ccfc1b811a4e007.js" defer=""></script><script src="./_next/static/chunks/main-d70fd7e950e8d98d.js" defer=""></script><script src="./_next/static/chunks/pages/_app-49cdd33e11c5c280.js" defer=""></script><script src="./_next/static/chunks/pages/_error-b750ae521d56f53f.js" defer=""></script><script src="./_next/static/wrEsXCWOzM4QfYOpj55CR/_buildManifest.js" defer=""></script><script src="./_next/static/wrEsXCWOzM4QfYOpj55CR/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><div id="sitemap-container"></div><div id="login-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"wrEsXCWOzM4QfYOpj55CR","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/0e685076b0a88d1b.css" as="style"/><link rel="stylesheet" href="./_next/static/css/0e685076b0a88d1b.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./workload-testing-utils.min.js" type="module" async="" defer="" data-nscript="beforeInteractive"></script><script src="./workload-test.js" type="module" async="" defer="" data-nscript="beforeInteractive"></script><script src="./_next/static/chunks/webpack-dabe763974b7e688.js" defer=""></script><script src="./_next/static/chunks/framework-2ccfc1b811a4e007.js" defer=""></script><script src="./_next/static/chunks/main-d70fd7e950e8d98d.js" defer=""></script><script src="./_next/static/chunks/pages/_app-49cdd33e11c5c280.js" defer=""></script><script src="./_next/static/chunks/pages/_error-b750ae521d56f53f.js" defer=""></script><script src="./_next/static/k4DXEwQ-8fOVXj9iU2K7F/_buildManifest.js" defer=""></script><script src="./_next/static/k4DXEwQ-8fOVXj9iU2K7F/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><div id="sitemap-container"></div><div id="login-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"k4DXEwQ-8fOVXj9iU2K7F","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
4 changes: 2 additions & 2 deletions ...ic/chunks/pages/index-9ce97f331f88ffe3.js → ...ic/chunks/pages/index-7b2a288c650c940a.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions apps/news-site/news-site-next/dist/_next/static/chunks/pages/index-7b2a288c650c940a.js.map
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion apps/news-site/news-site-next/dist/_next/static/chunks/pages/index-9ce97f331f88ffe3.js.map
View file

This file was deleted.

Loading

0 comments on commit 149bff9

Please sign in to comment.