From 5c2f3291747953d19356d50101c8dd5374de0952 Mon Sep 17 00:00:00 2001
From: dm <dm@dariuszm.eu>
Date: Wed, 17 Dec 2025 08:28:25 +0100
Subject: [PATCH] =?UTF-8?q?Dostosowanie=20pakiet=C3=B3w=20tematycznych?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/internet-telewizja/addons.yaml    |   2 +-
 src/content/internet-telewizja/tv-addons.yaml |   2 +
 src/islands/jambox/JamboxAddonsModal.jsx      |  28 +++--
 src/islands/jambox/JamboxChannelsSearch.jsx   |  31 ++---
 .../pakiety-tematyczne.astro                  | 106 ++++++++++++------
 src/styles/addons.css                         |   5 +-
 src/styles/jambox-tematyczne.css              |  25 +++--
 7 files changed, 129 insertions(+), 70 deletions(-)

diff --git a/src/content/internet-telewizja/addons.yaml b/src/content/internet-telewizja/addons.yaml
index 468d27a..8008df5 100644
--- a/src/content/internet-telewizja/addons.yaml
+++ b/src/content/internet-telewizja/addons.yaml
@@ -1,4 +1,4 @@
-tytul: "Dodatkowe usługi"
+tytul: "Dodatkowe usługi 2"
 opis: "Wybierz usługi dodatkowe do internetu z telewizją."
 cena_opis: "zł/mies."
 
diff --git a/src/content/internet-telewizja/tv-addons.yaml b/src/content/internet-telewizja/tv-addons.yaml
index 00e5fb2..daf9b81 100644
--- a/src/content/internet-telewizja/tv-addons.yaml
+++ b/src/content/internet-telewizja/tv-addons.yaml
@@ -155,6 +155,7 @@ dodatki:
   - id: disney_standard
     nazwa: Disney+ Standard
     typ: checkbox
+    tid: 10001
     opis: |
       Historie na całe życie czekają. Odkryj hity filmowe, nowe seriale i produkcje oryginalne ze świata Disneya, Pixara, Gwiezdnych wojen, Marvela, a także produkcje Hulu, National Geographic i FX. 
       Oglądaj, kiedy chcesz.
@@ -180,6 +181,7 @@ dodatki:
   - id: disney_premium
     nazwa: Disney+ Premium
     typ: checkbox
+    tid: 10002
     opis: |
       Historie na całe życie czekają. Odkryj hity filmowe, nowe seriale i produkcje oryginalne ze świata Disneya, Pixara, Gwiezdnych wojen, Marvela, a także produkcje Hulu, National Geographic i FX. 
       Oglądaj, kiedy chcesz.
diff --git a/src/islands/jambox/JamboxAddonsModal.jsx b/src/islands/jambox/JamboxAddonsModal.jsx
index bb3a1cf..2b225bf 100644
--- a/src/islands/jambox/JamboxAddonsModal.jsx
+++ b/src/islands/jambox/JamboxAddonsModal.jsx
@@ -335,17 +335,23 @@ export default function JamboxAddonsModal({
           </div>
 
           <div class="f-addon-main">
-            <div class="f-addon-name">{a.nazwa}</div>
-            {/* {a.opis && <div class="f-addon-desc">{a.opis}</div>} */}
-            <a
-              href={`/internet-telewizja/pakiety-tematyczne#${a.tid}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
-              title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
-            >
-              Przejdź do szczegółowch informacji o pakiecie tematycznnym
-            </a>
+<div class="f-addon-name">{a.nazwa}</div>
+
+{isTv && a.tid ? (
+  <a
+    class="f-addon-more"
+    href={`/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(a.tid)}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label={`Więcej informacji o pakiecie ${a.nazwa ?? ""} (otwiera się w nowej karcie)`}
+    title={`Więcej o pakiecie ${a.nazwa ?? ""}`}
+    onClick={(e) => e.stopPropagation()}
+  >
+    Przejdź do szczegółowych informacji pakietu {a.nazwa ?? ""}
+  </a>
+) : (
+  a.opis ? <div class="f-addon-desc">{a.opis}</div> : null
+)}
 
             {termPricing && (
               <div class="mt-2 flex flex-wrap gap-3 text-sm" onClick={(e) => e.stopPropagation()}>
diff --git a/src/islands/jambox/JamboxChannelsSearch.jsx b/src/islands/jambox/JamboxChannelsSearch.jsx
index c976d7a..7038764 100644
--- a/src/islands/jambox/JamboxChannelsSearch.jsx
+++ b/src/islands/jambox/JamboxChannelsSearch.jsx
@@ -292,18 +292,18 @@ export default function JamboxChannelsSearch() {
 
                   <div class="flex flex-wrap gap-2 mt-2">
                     {packageSuggestions.thematic.map((p) => (
-                      <a
-                        key={p.tid}
+                      <button
+                        type="button"
                         class="f-chsearch-pkg"
-                        href={`/internet-telewizja/pakiety-tematyczne#${encodeURIComponent(
-                          p.tid
-                        )}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
+                        onClick={() => window.open(
+                          `/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(p.tid)}`,
+                          "_blank",
+                          "noopener,noreferrer"
+                        )}
                         title="Otwórz w nowej karcie"
                       >
                         {p.name}
-                      </a>
+                      </button>
                     ))}
                   </div>
                 </div>
@@ -420,17 +420,18 @@ export default function JamboxChannelsSearch() {
                       Dostępny w pakietach tematycznych:&nbsp;
                       {c.thematic_packages.map((p) => (
                         <span key={`${p.tid}-${p.name}`}>
-                          <a
+                          <button
+                            type="button"
                             class="f-chsearch-pkg"
-                            href={`/internet-telewizja/pakiety-tematyczne#${encodeURIComponent(
-                              p.tid
-                            )}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
+                            onClick={() => window.open(
+                              `/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(p.tid)}`,
+                              "_blank",
+                              "noopener,noreferrer"
+                            )}
                             title="Otwórz w nowej karcie"
                           >
                             {p.name}
-                          </a>
+                          </button>
                         </span>
                       ))}
                     </div>
diff --git a/src/pages/internet-telewizja/pakiety-tematyczne.astro b/src/pages/internet-telewizja/pakiety-tematyczne.astro
index be1d642..5f6a7b6 100644
--- a/src/pages/internet-telewizja/pakiety-tematyczne.astro
+++ b/src/pages/internet-telewizja/pakiety-tematyczne.astro
@@ -47,44 +47,80 @@ const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
     </div>
   </section>
 
-  {addons.map((addon: TvAddon, index: number) => {
-    const isAboveFold = index === 0;
+  {
+    addons.map((addon: TvAddon, index: number) => {
+      const isAboveFold = index === 0;
 
-    const hasYamlImage = !!String(addon?.image ?? "").trim();
-    const pkgName = String(addon?.nazwa ?? "").trim();
+      const hasYamlImage = !!String(addon?.image ?? "").trim();
+      const pkgName = String(addon?.nazwa ?? "").trim();
 
-    const assumeHasMedia = pkgName ? true : hasYamlImage;
-    const anchorId = addon?.tid != null ? String(addon.tid) : undefined;
+      const assumeHasMedia = pkgName ? true : hasYamlImage;
+      const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;
 
-    return (
-      <section class="f-section">
-        <div
-          class={`f-section-grid f-addon-grid f-addon-section ${
-            assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
-          }`}
-          data-addon-section
-          data-has-media={assumeHasMedia ? "1" : "0"}
-        >
-          {/* TEKST — lewa, od góry */}
-          <div class="f-addon-text" id={anchorId}>
-            {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
-            {addon?.opis && <Markdown text={addon.opis} />}
+      return (
+        <section class="f-section" id={anchorId}>
+          <div
+            class={`f-section-grid f-addon-grid f-addon-section ${
+              assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
+            }`}
+            data-addon-section
+            data-has-media={assumeHasMedia ? "1" : "0"}
+          >
+            <div class="f-addon-text">
+              {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
+              {addon?.opis && <Markdown text={addon.opis} />}
+            </div>
+
+            <div class="f-addon-media">
+              {pkgName ? (
+                <AddonChannelsGrid
+                  client:idle
+                  packageName={pkgName}
+                  fallbackImage={String(addon?.image ?? "")}
+                  aboveFold={isAboveFold}
+                  title={pkgName}
+                />
+              ) : null}
+            </div>
           </div>
+        </section>
+      );
+    })
+  }
+
+<script is:inline>
+  function __scrollToHashWithOffset(behavior = "auto") {
+    if (!location.hash) return;
+
+    const id = decodeURIComponent(location.hash.slice(1));
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    // znajdź navbar (dopasuj selektor do siebie)
+    const nav =
+      document.querySelector(".f-navbar") ||
+      document.querySelector("header") ||
+      document.querySelector("[data-navbar]");
+
+    const navH = nav ? nav.getBoundingClientRect().height : 84;
+    const extra = 8;
+
+    const top = el.getBoundingClientRect().top + window.pageYOffset - navH - extra;
+
+    window.scrollTo({ top: Math.max(0, top), behavior });
+  }
+
+  function __runFix() {
+    // po wejściu na stronę z hashem przeglądarka może już coś przewinąć,
+    // więc poprawiamy po renderze i po dociągnięciu treści
+    __scrollToHashWithOffset("auto");
+    requestAnimationFrame(() => __scrollToHashWithOffset("auto"));
+    setTimeout(() => __scrollToHashWithOffset("auto"), 120);
+    setTimeout(() => __scrollToHashWithOffset("auto"), 600);
+  }
+
+  window.addEventListener("load", __runFix);
+  window.addEventListener("hashchange", () => __scrollToHashWithOffset("smooth"));
+</script>
 
-          {/* MEDIA — prawa */}
-          <div class="f-addon-media">
-            {pkgName ? (
-              <AddonChannelsGrid
-                client:idle
-                packageName={pkgName}
-                fallbackImage={String(addon?.image ?? "")}
-                aboveFold={isAboveFold}
-                title={pkgName}
-              />
-            ) : null}
-          </div>
-        </div>
-      </section>
-    );
-  })}
 </DefaultLayout>
diff --git a/src/styles/addons.css b/src/styles/addons.css
index 67fbd2c..19df908 100644
--- a/src/styles/addons.css
+++ b/src/styles/addons.css
@@ -460,4 +460,7 @@
   .f-radio-details {
     @apply pl-10 pr-3 pb-3 -mt-1 text-sm;
     /* pl-10 = przesunięcie w prawo (radio + gap) */
-  }
\ No newline at end of file
+  }
+
+
+  
\ No newline at end of file
diff --git a/src/styles/jambox-tematyczne.css b/src/styles/jambox-tematyczne.css
index 9e7c662..cc99834 100644
--- a/src/styles/jambox-tematyczne.css
+++ b/src/styles/jambox-tematyczne.css
@@ -1,13 +1,24 @@
-/* ===========================
-   TV ADDONS — LAYOUT FIXES
-   =========================== */
+/* addon grid do góry */
+.f-addon-section { align-items: start; }
 
-/* f-section-grid ma u Ciebie items-center (centrowanie w pionie),
-   więc dla addonów wymuszamy start (od góry). */
-.f-addon-section {
-  align-items: start; /* override dla grid items */
+/* (opcjonalnie) jeśli navbar na desktop ma inną wysokość */
+@media (min-width: 768px){
+  section.f-section[id^="tid-"]{
+    scroll-margin-top: calc(var(--f-navbar-height, 72px) + 8px);
+  }
 }
 
+
+/* 1 kolumna + ukryj media gdy brak */
+[data-addon-section][data-has-media="0"] {
+  grid-template-columns: 1fr !important;
+}
+
+[data-addon-section][data-has-media="0"] .f-addon-media {
+  display: none;
+}
+
+
 /* Gdy island stwierdzi brak ikon i brak fallback image:
    - 1 kolumna
    - ukryj pusty blok mediów