Dostosowanie pakietów tematycznych

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."
 

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.

src/islands/jambox/JamboxAddonsModal.jsx

@@ -336,16 +336,22 @@ export default function JamboxAddonsModal({
 
           <div class="f-addon-main">
 <div class="f-addon-name">{a.nazwa}</div>
-            {/* {a.opis && <div class="f-addon-desc">{a.opis}</div>} */}
+
+{isTv && a.tid ? (
   <a
-              href={`/internet-telewizja/pakiety-tematyczne#${a.tid}`}
+    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ółowch informacji o pakiecie tematycznnym
+    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()}>

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
+                      <button
-                        key={p.tid}
+                        type="button"
                         class="f-chsearch-pkg"
-                        href={`/internet-telewizja/pakiety-tematyczne#${encodeURIComponent(
+                        onClick={() => window.open(
-                          p.tid
+                          `/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(p.tid)}`,
-                        )}`}
+                          "_blank",
-                        target="_blank"
+                          "noopener,noreferrer"
-                        rel="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(
+                            onClick={() => window.open(
-                              p.tid
+                              `/internet-telewizja/pakiety-tematyczne#tid-${encodeURIComponent(p.tid)}`,
-                            )}`}
+                              "_blank",
-                            target="_blank"
+                              "noopener,noreferrer"
-                            rel="noopener noreferrer"
+                            )}
                             title="Otwórz w nowej karcie"
                           >
                             {p.name}
-                          </a>
+                          </button>
                         </span>
                       ))}
                     </div>

src/pages/internet-telewizja/pakiety-tematyczne.astro

@@ -47,17 +47,18 @@ const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
     </div>
   </section>
 
-  {addons.map((addon: TvAddon, index: number) => {
+  {
+    addons.map((addon: TvAddon, index: number) => {
       const isAboveFold = index === 0;
 
       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 anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;
 
       return (
-      <section class="f-section">
+        <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"
@@ -65,13 +66,11 @@ const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
             data-addon-section
             data-has-media={assumeHasMedia ? "1" : "0"}
           >
-          {/* TEKST — lewa, od góry */}
+            <div class="f-addon-text">
-          <div class="f-addon-text" id={anchorId}>
               {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
               {addon?.opis && <Markdown text={addon.opis} />}
             </div>
 
-          {/* MEDIA — prawa */}
             <div class="f-addon-media">
               {pkgName ? (
                 <AddonChannelsGrid
@@ -86,5 +85,42 @@ const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
           </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>
+
 </DefaultLayout>

src/styles/addons.css

@@ -461,3 +461,6 @@
     @apply pl-10 pr-3 pb-3 -mt-1 text-sm;
     /* pl-10 = przesunięcie w prawo (radio + gap) */
   }
+
+
+  

src/styles/jambox-tematyczne.css

@@ -1,12 +1,23 @@
-/* ===========================
+/* addon grid do góry */
-   TV ADDONS — LAYOUT FIXES
+.f-addon-section { align-items: start; }
-   =========================== */
 
-/* f-section-grid ma u Ciebie items-center (centrowanie w pionie),
+/* (opcjonalnie) jeśli navbar na desktop ma inną wysokość */
-   więc dla addonów wymuszamy start (od góry). */
+@media (min-width: 768px){
-.f-addon-section {
+  section.f-section[id^="tid-"]{
-  align-items: start; /* override dla grid items */
+    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