diff --git a/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache b/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
index a67f4d8f343ec1fc32d9b2f820fe10e02e48d0b4..e0c23fe58c140517b6038eaf3e597b595360bd27 100644
--- a/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
+++ b/source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache
@@ -1,11 +1,13 @@
-<section class="program-detail-problem-solution mb-20">
+<section id="co-nas-stve" class="program-detail-problem-solution mb-20">
<div class="problem-cross"><i class="ico--thincross text-xs sm:text-xl text-white"></i></div>
<div class="problem-inner content-block">
<h2 class="head-alt-sm md:head-alt-md mb-9">Problém</h2>
<p class="text-base mb-8">{{> atoms-paragraph-with-sources }}</p>
- {{> atoms-accordeon-row-preview }}
+ <div id="proc-je-to-problem">
+ {{> atoms-accordeon-row-preview }}
+ </div>
</div>
- <div class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
+ <div id="nase-vize" class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>
<div class="ideal-inner bg-lemon content-block">
<h2 class="head-alt-sm md:head-alt-md mb-9">Ideál</h2>
<p class="text-base">Chceme vzdělanou a informovanou společnost, která se ubrání dezinformacím. Občané budou umět dezinformaci rozeznat a dezinformátoři budou reálně právně odpovědní.</p>
diff --git a/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache b/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
index 9787129a5c45304b77fd9b58e99dfca882acee04..cba5b64bd895b2e4f136af05dee6365660771032 100644
--- a/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
+++ b/source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
@@ -5,7 +5,7 @@
</div>
<div class="inner float-panel-inner elevation-2">
<ul>
- <li class="active"><a href="#co-nas-stve">Co nás štve?</a></li>
+ <li><a class="active" href="#co-nas-stve">Co nás štve?</a></li>
<li><a href="#proc-je-to-problem">Proč je to problém?</a></li>
<li><a href="#nase-vize">Naše vize</a></li>
<li><a href="#jak-toho-chceme-docilit">Jak toho chceme docílit?</a></li>
@@ -18,4 +18,64 @@
</ul>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
+<script>
+ window.addEventListener("load", onLoadFunction);
+ var anchorsArray=[];
+
+ function placeUponId(id, space){
+ return document.getElementById(id).getBoundingClientRect().top + window.scrollY - space;
+ }
+
+ function onLoadFunction(e){
+ var anchorElemsArray;
+ onResizeFunction();
+ for (const entry of anchorsArray) {
+ entry.menuitem.addEventListener("click", clickHandler);
+ }
+
+ function clickHandler(e) {
+ e.preventDefault();
+ var id=this.getAttribute("href").replace("#","");
+ //console.log(placeUponId(id, 20));
+ scroll({
+ top: placeUponId(id, 20),
+ behavior: "smooth"
+ });
+ }
+
+
+ window.addEventListener("resize", onResizeFunction);
+ }
+ function onResizeFunction (e){
+ var itemsProcessed=0;
+ var anchorElemsArray=document.getElementsByClassName("float-panel-inner")[0].querySelectorAll("li a");
+ anchorsArray=[];
+ anchorElemsArray.forEach(function(entry){
+ var id=entry.getAttribute("href").replace("#","");
+ anchorsArray.push({
+ id: id,
+ top: placeUponId(id, 200),
+ menuitem: entry
+ });
+ itemsProcessed++;
+ if(itemsProcessed === anchorElemsArray.length) {
+ anchorsArray.reverse();
+ }
+ });
+ //console.log(anchorsArray);
+ }
+ window.onscroll = function() {
+ var top = window.pageYOffset || document.documentElement.scrollTop;
+ var activereached=false;
+ anchorsArray.forEach(function(entry){
+ entry.menuitem.classList.remove("active");
+ entry.menuitem.classList.remove("passed");
+ if(top >= placeUponId(entry.id, 200)){
+ if(activereached) entry.menuitem.classList.add("passed"); else entry.menuitem.classList.add("active");
+ activereached=true;
+ }
+ });
+ };
+
+</script>
\ No newline at end of file
diff --git a/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache b/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
index 33b58162d5ff2b6ddc17b5950504bdeadf208575..3ad76e31d067ddd7e8c58a7744feed4a05ad6764 100644
--- a/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
+++ b/source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
@@ -22,7 +22,7 @@
</div>
<div class="container-collapsible-content" style="height: 50vh;">
- <h3 class="head-alt-base mb-8 leading-tight">Navrhovaná opatření:</h3>
+ <h3 id="jak-toho-chceme-docilit" class="head-alt-base mb-8 leading-tight">Navrhovaná opatření:</h3>
{{> atoms-unordered-list-checks-pirati-stan(label: "Profesní vzdělávání učitelů a ředitelů:")}}
@@ -30,7 +30,7 @@
{{> atoms-unordered-list-checks-pirati-stan}}
- <div class="grid grid-cols-1 gap-8 mt-20">
+ <div id="kolik-potrebujeme-casu" class="grid grid-cols-1 gap-8 mt-20">
{{> organisms-countdown-small-pirati-stan }}
@@ -48,7 +48,7 @@
{{> atoms-figure(caption: "Popisek fotky") }}
- <h3 class="head-alt-base mb-8 mt-20">BENEFITY</h3>
+ <h3 id="co-to-prinese" class="head-alt-base mb-8 mt-20">BENEFITY</h3>
<div class="program-detail-benefity grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
{{> molecules-benefits-pirati-stan(demoDesc: "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.")}}
{{> molecules-benefits-pirati-stan}}
@@ -74,24 +74,24 @@
<h3 class="head-alt-lg mb-20 text-3xl md:text-5xl leading-tight mt-24">V dlouhodobém horizontu přinese kriticky smýšlející společnost snížení nákladů, které jsou následkem dezinformací (soudy, veřejné zdraví).</h3>
- <h3 class="head-alt-base mb-10">Co už jsme udělali:</h3>
+ <h3 id="co-jsme-uz-odpracovali" class="head-alt-base mb-10">Co už jsme udělali:</h3>
{{> atoms-unordered-list-checks-pirati-stan}}
{{> atoms-unordered-list-checks-pirati-stan}}
- <h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
+ <h3 id="casto-kladene-otazky" class="head-alt-base mb-8 mt-20">FAQ</h3>
{{> molecules-accordeon }}
- <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
+ <h3 id="souvisejici-body" class="head-alt-base mb-8 mt-20">Související body:</h3>
<div class="">
{{> molecules-carousel-card-list }}
</div>
<h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</h3>
<p><a href="#" class="text-acidgreen underline">Zjistit více</a></p>
- <h3 class="head-alt-base mb-8 mt-8">Zdroje:</h3>
+ <h3 id="zdroje-a-doplnujici-informace" class="head-alt-base mb-8 mt-8">Zdroje:</h3>
{{> atoms-source(sourceNumber: 1) }}
{{> atoms-source(sourceNumber: 2, showDescription: true) }}
diff --git a/source/css/molecules/floating-nav-pirati-stan.pcss b/source/css/molecules/floating-nav-pirati-stan.pcss
index 8c337545ad139b4a8d3a020d19d626538fad8bad..e703054a3f43bb1dc5f6c25bc394750488e557d3 100644
--- a/source/css/molecules/floating-nav-pirati-stan.pcss
+++ b/source/css/molecules/floating-nav-pirati-stan.pcss
@@ -7,7 +7,10 @@
.floating-nav-panel {
position: sticky;
- top: 100px;
+ top: 40px;
+ @media only screen and (min-width: 1400){
+ top: 100px;
+ }
.opener {
@apply cursor-pointer;
@@ -18,7 +21,8 @@
.inner {
@apply bg-white absolute;
width: 344px;
- padding: 30px;
+ padding-top: 30px;
+ padding-bottom: 30px;
top: 64px;
left: 5px;
@@ -26,15 +30,27 @@
@apply list-none;
li {
- @apply cursor-pointer py-4;
+ @apply cursor-pointer;
color: #4C4C4C;
font-size: 16px;
+
+ a{
+ @apply block py-4 relative border-transparent;
+ padding-left: 30px;
+ padding-right: 30px;
+ border-left-width: 5px;
+ left: -5px;
+ }
}
- li:hover, li.active{
- @apply pl-5 text-black font-bold bg-no-repeat;
+ li a:hover, li a.active{
+ @apply text-black font-bold bg-no-repeat;
+ padding-left: 50px;
background-image: url(../images/floating-nav-icon.svg);
- background-position: center left;
+ background-position: left 30px center;
+ }
+ li a.active, li a.passed{
+ @apply border-acidgreen;
}
}