polymech/site-template
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gallery | cleanup

Browse Source
This commit is contained in:
lovebird 2025-03-12 19:14:17 +01:00
parent 45b40b7213
commit 1499c11c81
6 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/global/Footer.astro
View File

@ -52,7 +52,7 @@ const footerRight = await footer_right(locale)
class="flex flex-col justify-between">
<nav role="navigation">
<ul class="text-xs space-y-1 font-mono uppercase text-neutral-500">
<ul class="text-xs space-y-1 uppercase text-neutral-500">
{
footerRight.map((link) => (
<li>
@ -79,7 +79,7 @@ const footerRight = await footer_right(locale)
<div class="flex flex-col justify-between md:text-right xl:pb-2 mr-2">
<nav role="navigation">
<ul class="text-xs space-y-1 font-mono uppercase text-neutral-500">
<ul class="text-xs space-y-1 uppercase text-neutral-500">
{
footerLeft.map((link) => (
<li>

73
src/components/polymech/GalleryK.astro
View File

@ -3,12 +3,11 @@ import { Img } from "imagetools/components";
import Translate from "@/components/polymech/i18n.astro"
import { translate } from "@/base/i18n"
import { item_keywords, site_keywords } from '@/base/seo.js'
import { item_keywords } from '@/base/seo.js'
import pMap from 'p-map'
import { toJsonLd } from '@/base/media.js'
import { createMarkdownComponent, markdownToHtml } from "@/base/index.js"
import { I18N_SOURCE_LANGUAGE, IMAGE_SETTINGS, LANGUAGES_PROD as LANGUAGES } from "config/config.js"
import { I18N_SOURCE_LANGUAGE, IMAGE_SETTINGS } from "config/config.js"
import { IComponentConfig } from "@polymech/commons"
interface Image {
@ -171,42 +170,44 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
))}
</div>
)}
<!-- Thumbnails -->
<div class="p-1 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
<div class="flex p-2 mt-2 ml-2 mr-2 gap-2 items-center justify-center">
{images.map((image, index) => (
<button
key={index}
x-on:click={`currentIndex = ${index};`}
:class={`currentIndex === ${index} ? 'ring-2 ring-orange-500' : ''`}
class="thumbnail thumbnail-btn flex-shrink rounded-lg"
>
<Img
src={image.src}
objectFit="cover"
format="avif"
placeholder="blurred"
sizes={mergedGallerySettings.SIZES_THUMB}
alt={alt_translated[index]}
breakpoints={[100]}
attributes={{
img: {
class: "w-32 h-32 rounded-lg hover:ring-2 hover:ring-blue-500 thumbnail-img aspect-square"
}
}}
loading="lazy"
/>
</button>
))}
<!-- Thumbnails - only shown when multiple images exist -->
{images.length > 1 && (
<div class="p-1 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
<div class="flex p-2 mt-2 ml-2 mr-2 gap-2 items-center justify-center">
{images.map((image, index) => (
<button
key={index}
x-on:click={`currentIndex = ${index};`}
:class={`currentIndex === ${index} ? 'ring-2 ring-orange-500' : ''`}
class="thumbnail thumbnail-btn flex-shrink rounded-lg"
>
<Img
src={image.src}
objectFit="cover"
format="avif"
placeholder="blurred"
sizes={mergedGallerySettings.SIZES_THUMB}
alt={alt_translated[index]}
breakpoints={[100]}
attributes={{
img: {
class: "w-32 h-32 rounded-lg hover:ring-2 hover:ring-blue-500 thumbnail-img aspect-square"
}
}}
loading="lazy"
/>
</button>
))}
</div>
</div>
</div>
)}
</div>
<!-- Lightbox Modal (with swipe functionality) -->
<div
x-show="open"
x-transition
:class="{ 'lightbox': !lightboxLoaded }"
class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center lightbox"
class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center lightbox z-10"
>
<div
class="relative max-w-full max-h-full"
@ -231,10 +232,12 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
img: { class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg lightbox-main" }
}}
/>
{ (mergedLightboxSettings.SHOW_TITLE || mergedLightboxSettings.SHOW_DESCRIPTION) && (
{ (mergedLightboxSettings.SHOW_TITLE || mergedLightboxSettings.SHOW_DESCRIPTION) &&
(image.title || image.description) && (
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 m-[8px] max-h-[32vh] p-2 text-white bg-black/50 rounded-lg" style="width: 90%;">
{ mergedLightboxSettings.SHOW_TITLE && ( <h3 class="text-xl"><Translate>{image.title}</Translate></h3>)}
{ mergedLightboxSettings.SHOW_DESCRIPTION && (<p><Translate>{image.description}</Translate></p>)} </div>
{ mergedLightboxSettings.SHOW_DESCRIPTION && (<p><Translate>{image.description}</Translate></p>)}
</div>
)}
</div>
))}
@ -262,7 +265,7 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
x-on:click="currentIndex++; lightboxLoaded = false; preloadAndOpen();"
:disabled="!lightboxLoaded"
class="absolute right-0 top-1/2 transform -translate-y-1/2 p-4 m-[8px] text-white text-3xl bg-gray-800/75 bg-opacity-75 rounded-lg lightbox-nav"
:class="{'opacity-50 cursor-not-allowed': !lightboxLoaded, 'hover:bg-gray-700/75': lightboxLoaded}"
:class="{'opacity-50 cursor-not-allowed': !lightboxLoaded, 'hover:bg-gray-700/50': lightboxLoaded}"
aria-label="Next"
>
&#10095;

8
src/components/polymech/resources.astro
View File

@ -89,10 +89,10 @@ const sharedContent = [data.shared]
{
Object.entries(filteredGroups).map(([name, links]) => (
<div class="p-2">
<h3 class="text-xl font-bold mb-2">
<h3 class="text-x font-bold mb-2">
<Translation>{name}</Translation>
</h3>
<ul class="list-disc pl-6 space-y-1">
<ul class="list-disc pl-6">
{links.map((link) => (
<Link href={link.getHref()} className={LINK_CLASSES}>
<Translation>{link.label}</Translation>
@ -105,7 +105,7 @@ const sharedContent = [data.shared]
</div>
{
extraContent.length > 0 && (
<div class="p-2">
<div class="p-4">
<h3 class="text-xl font-bold mb-2">
<Translation>Extras</Translation>
</h3>
@ -119,7 +119,7 @@ const sharedContent = [data.shared]
}
{
sharedContent.length > 0 && (
<div class="p-2">
<div class="p-4">
<div class="grid grid-cols-1 gap-4 extra-resources">
{sharedContent.map(async (Content) => (
<Content class="extra-resource" />

2
src/components/store/StoreEntries.astro
View File

@ -5,7 +5,7 @@ import Translate from "@/components/polymech/i18n.astro";
const { title, url, price, model, selected = false } = Astro.props;
const thumbnail = model?.assets?.renderings[0]?.url || default_image();
const classes = `group relative bg-white overflow-hidden group rounded-xl font-mono ${selected ? "ring-2 ring-orange-500" : ""}`
const classes = `group relative bg-white overflow-hidden group rounded-xl ${selected ? "ring-2 ring-orange-500" : ""}`
---
<div class={classes}>

11
src/layouts/StoreLayout.astro
View File

@ -94,6 +94,7 @@ const others = await group_by_path(items, Astro.currentLocale);
</div>
<div class="gap-2 flex flex-col h-full justify-end">
{
SHOW_3D_PREVIEW &&
item.Preview3d &&
@ -236,7 +237,7 @@ const others = await group_by_path(items, Astro.currentLocale);
{
item.assets.showcase && item.assets.showcase.length > 0 && (
<section>
<div class="mb-2 md:mb-16 mt-0 md:mt-16 p-2 md:p-4 border-b border-gray-200 dark:border-gray-700">
<div class="mb-2 md:mb-16 mt-0 md:mt-16 p-2 md:p-4 border-b border-gray-200 dark:border-gray-700 bg-white rounded-xl">
<GalleryK
images={item.assets.showcase}
lightboxSettings={{
@ -298,7 +299,7 @@ const others = await group_by_path(items, Astro.currentLocale);
}
{
SHOW_GALLERY && (
<TabContent title="Gallery" class="p-0 md:p-4 rounded-lg bg-white">
<TabContent title="Gallery" class="p-4 md:p-4 rounded-lg bg-white">
<GalleryK images={item.assets.gallery} item={item} />{" "}
</TabContent>
)
@ -372,7 +373,7 @@ const others = await group_by_path(items, Astro.currentLocale);
</script>
</section>
<hr />
<h1 aria-hidden="true" class="p-4 text-xs space-x-8"> <Translate>Related</Translate>
<h1 class="p-4 text-xs"> <Translate>Related</Translate>
</h1>
{
SHOW_RELATED && (
@ -381,11 +382,11 @@ const others = await group_by_path(items, Astro.currentLocale);
<section>
<h4
aria-hidden="true"
class="p-4 text-xl text-neutral-500 space-x-8"
class="text-xs p-4 text-neutral-500"
>
{relKey}
</h4>
<div class="grid sm:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 gap-2">
<div class="grid sm:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 gap-8">
{others[relKey].map((post) => (
<StoreEntries
key={post.id}

2
src/pages/[locale].astro
View File

@ -40,7 +40,7 @@ const frontmatter = {
---
<BaseLayout frontmatter={frontmatter}>
<Wrapper variant="standard" class="py-4 font-mono">
<Wrapper variant="standard" class="py-4">
<CtaOne />
<section>
<div class="py-2 space-y-2">