diff --git a/majak_uistyleguide/templates/patterns/atoms/text/prose.html b/majak_uistyleguide/templates/patterns/atoms/text/prose.html
index 9d4eaa1bc0c895f439a79e3c481052a94446ae4b..5aaf765c320342ab3fd4c3519e9b0c005d4ef7ee 100644
--- a/majak_uistyleguide/templates/patterns/atoms/text/prose.html
+++ b/majak_uistyleguide/templates/patterns/atoms/text/prose.html
@@ -1,3 +1,7 @@
<div class="prose max-w-[100ch] [&_p]:text-black">
{% include 'patterns/atoms/text/paragraph.html' with text=text %}
</div>
+
+<div class="prose max-w-[100%] [&_p]:text-black">
+ {% include 'patterns/atoms/text/paragraph.html' with text=text %}
+</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html b/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
index 38a712fb02dc8768c26a2c92ceb9a591628f8f06..5c391d90a28ad1424866b95a9151c9348262be8f 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
@@ -1,3 +1,5 @@
+{% block before_header_tag %}{% endblock %}
+
<header
class="
flex flex-col z-100 relative
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_scroll_progress.html b/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_scroll_progress.html
new file mode 100644
index 0000000000000000000000000000000000000000..e06bb744848131ee8581a86fa3d8ab6544f64884
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_scroll_progress.html
@@ -0,0 +1,7 @@
+{% extends 'patterns/organisms/header/simple_header.html' %}
+
+{% block before_header_tag %}
+ <div class="__js-root">
+ <ui-scroll-indicator></ui-scroll-indicator>
+ </div>
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/form.html b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
index 8076f5cec61a719251942ab442e66cc12beb952e..a6d9dc2a4cf0396aa68baae59aacfe3ef88dfd9c 100644
--- a/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
@@ -1,5 +1,5 @@
{% include 'patterns/organisms/layout/navbar.html' %}
-{% include 'patterns/organisms/header/simple_header.html' with title="Stránka s formulářem" %}
+{% include 'patterns/organisms/header/simple_header.html' with title=title %}
<main role="main" class="mb-10 xl:mb-32">
<div class="container--wide flex flex-col gap-8 mb-2 lg:mb-12">
@@ -14,67 +14,6 @@
{% include "patterns/atoms/form_fields/form_textarea.html" %}
{% include "patterns/atoms/form_fields/form_checkbox.html" %}
{% include "patterns/atoms/form_fields/form_captcha.html" %}
-
- {% comment %}
- {% if field.widget_type == "select" %}
- <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
- <div class="form-field__wrapper form-field__wrapper--shadowed">
- <div class="select">
- {{ field|add_class:"select__control " }}
- </div>
- </div>
- {% elif field.widget_type == "radioselect" %}
- <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
- <div class="form-field__wrapper py-1 flex flex-col">
- {% for radio in field %}
- <div class="my-1">
- <div class="radio ">
- {{ radio }}
- </div>
- </div>
- {% endfor %}
- </div>
- {% elif field.widget_type == "checkboxselectmultiple" %}
- <label class="form-field__label mt-2" for="{{ field.id_for_label }}">{{ field.label }}</label>
- <div class="form-field__wrapper py-1 flex flex-col">
- {% for checkbox in field %}
- <div class="my-1">
- <div class="checkbox ">
- {{ checkbox.tag }}
- <label for="{{ checkbox.id_for_label }}">{{ checkbox.choice_label }}</label>
- </div>
- </div>
- {% endfor %}
- </div>
- {% elif field.widget_type == "checkbox" %}
- <div class="form-field__wrapper mt-2">
- <div class="checkbox ">
- {{ field }}
- <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
- </div>
- </div>
- {% elif field.widget_type == "captchatext" %}
- <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
- <div class="form-field__wrapper form-field__wrapper--shadowed sm:w-1/2">
- {{ field|add_class:"form__text-input " }}
- </div>
- {% else %}
- <label class="form-field__label" for="{{ field.id_for_label }}">{{ field.label }}</label>
- <div class="form-field__wrapper form-field__wrapper--shadowed">
- {{ field|add_class:"form__text-input " }}
- </div>
- {% endif %}
-
- {% if field.help_text %}
- <div class="form-field__help-text">{{ field.help_text }}</div>
- {% endif %}
-
- {% if field.errors %}
- <div class="form-field__error">{{ field.errors }}</div>
- {% endif %}
- {% endcomment %}
-
- </div>
</div>
</main>
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/form.yaml b/majak_uistyleguide/templates/patterns/templates/uniweb/form.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..89b2525418beebc938145c1cb8a6bf04edc0952f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/form.yaml
@@ -0,0 +1,2 @@
+context:
+ title: 'Stránka s formulářem'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.html b/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.html
new file mode 100644
index 0000000000000000000000000000000000000000..8716e0b1c75063bfcbc98616f039bd08c7baf186
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.html
@@ -0,0 +1,20 @@
+{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/header/simple_header_with_scroll_progress.html' with title=title %}
+
+<main role="main" class="mb-10 xl:mb-32">
+ <div class="container--wide flex flex-col gap-8 mb-2 lg:mb-12">
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/text/prose.html" %}
+ {% include "patterns/atoms/table/table.html" %}
+ </div>
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.yaml b/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..e3a8ab201255f12b59c42f4f643f73578904bae6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.yaml
@@ -0,0 +1,2 @@
+context:
+ title: 'Univerzální stránka'
\ No newline at end of file
diff --git a/src/css/atoms/scroll-indicator.pcss b/src/css/atoms/scroll-indicator.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..d16c8260cfa479ef89084bda1f06b63073f798b8
--- /dev/null
+++ b/src/css/atoms/scroll-indicator.pcss
@@ -0,0 +1,9 @@
+/* The progress container (grey background) */
+.progress-container {
+ @apply w-full h-[8px] bg-black fixed top-0 left-0 z-50;
+}
+
+/* The progress bar (scroll indicator) */
+.progress-bar {
+ @apply w-0 h-[8px] bg-pirati-yellow;
+}
\ No newline at end of file
diff --git a/src/css/style.pcss b/src/css/style.pcss
index ea23d32e8d5b6815dd6d1324a29a2001d6ea44c5..79ee31ee11f7b248e9f9b7f6445688cabbd4b50c 100644
--- a/src/css/style.pcss
+++ b/src/css/style.pcss
@@ -25,6 +25,7 @@
@import "atoms/icons.pcss";
@import "atoms/full-calendar.pcss";
@import "atoms/dropdown.pcss";
+@import "atoms/scroll-indicator.pcss";
@import "molecules/articles.pcss";
@import "molecules/block-quote.pcss";
diff --git a/src/js/components/ScrollIndicator.vue b/src/js/components/ScrollIndicator.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d98f117e2742008602b162b1a6c9b3deecc0fe7
--- /dev/null
+++ b/src/js/components/ScrollIndicator.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="progress-container">
+ <div class="progress-bar" ref="scrollProgressElement"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ data () {
+ const scrollListenerFunction = () => {
+ var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+ var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ var scrolled = (winScroll / height) * 100;
+ this.$refs.scrollProgressElement.style.width = scrolled + "%";
+ }
+
+ return {
+ scrollListener: () => {
+ scrollListenerFunction()
+ }
+ }
+ },
+ mounted () {
+ window.addEventListener("scroll", this.$data.scrollListener)
+
+ this.$data.scrollListener()
+ },
+ destroyed () {
+ window.removeEventListener("scroll", this.$data.scrollListener)
+ }
+}
+</script>
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index 25404be3c3c074f627f31f8f97193c06ab53bbb3..759430c6e676bf1d3a9a6e109f38828bc7164615 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -19,6 +19,7 @@ import Popout from "./components/popout/Popout";
import PopoutContent from "./components/popout/PopoutContent";
import PopoutItem from "./components/popout/PopoutItem";
import FooterCollapsible from "./components/footer/FooterCollapsible";
+import ScrollIndicator from "./components/ScrollIndicator";
import FaqSectionHeader from "./components/FaqSectionHeader";
import HorizontalScrollable from "./components/HorizontalScrollable";
import CardProgram from "./components/card_program/CardProgram"
@@ -40,6 +41,7 @@ Vue.component("ui-secondary-view-provider", SecondaryViewProvider);
Vue.component("ui-popout", Popout);
Vue.component("ui-popout-content", PopoutContent);
Vue.component("ui-popout-item", PopoutItem);
+Vue.component("ui-scroll-indicator", ScrollIndicator);
Vue.component("ui-footer-collapsible", FooterCollapsible);
Vue.component("ui-faq-section-header", FaqSectionHeader);
Vue.component("ui-horizontal-scrollable", HorizontalScrollable);