From 1499c11c8165ee774c0af033352513d56b70953c Mon Sep 17 00:00:00 2001
From: babayaga <cgoflyn@gmail.com>
Date: Wed, 12 Mar 2025 19:14:17 +0100
Subject: [PATCH] gallery | cleanup

---
 src/components/global/Footer.astro      |  4 +-
 src/components/polymech/GalleryK.astro  | 73 +++++++++++++------------
 src/components/polymech/resources.astro |  8 +--
 src/components/store/StoreEntries.astro |  2 +-
 src/layouts/StoreLayout.astro           | 11 ++--
 src/pages/[locale].astro                |  2 +-
 6 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/components/global/Footer.astro b/src/components/global/Footer.astro
index 2c632b0..2b994f3 100644
--- a/src/components/global/Footer.astro
+++ b/src/components/global/Footer.astro
@@ -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>
diff --git a/src/components/polymech/GalleryK.astro b/src/components/polymech/GalleryK.astro
index 3bce6ad..9408ac2 100644
--- a/src/components/polymech/GalleryK.astro
+++ b/src/components/polymech/GalleryK.astro
@@ -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;
diff --git a/src/components/polymech/resources.astro b/src/components/polymech/resources.astro
index b5ac978..6d1fdb7 100644
--- a/src/components/polymech/resources.astro
+++ b/src/components/polymech/resources.astro
@@ -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" />
diff --git a/src/components/store/StoreEntries.astro b/src/components/store/StoreEntries.astro
index 47f0e8c..f540fc6 100644
--- a/src/components/store/StoreEntries.astro
+++ b/src/components/store/StoreEntries.astro
@@ -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}>
diff --git a/src/layouts/StoreLayout.astro b/src/layouts/StoreLayout.astro
index 8844497..f104b8c 100644
--- a/src/layouts/StoreLayout.astro
+++ b/src/layouts/StoreLayout.astro
@@ -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}
diff --git a/src/pages/[locale].astro b/src/pages/[locale].astro
index e98afb5..3611c05 100644
--- a/src/pages/[locale].astro
+++ b/src/pages/[locale].astro
@@ -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">