alignment options

majak_uistyleguide/templates/patterns/atoms/text/prose.html

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

majak_uistyleguide/templates/patterns/organisms/header/simple_header.html

+{% block before_header_tag %}{% endblock %}
+
 <header
   class="
     flex flex-col z-100 relative

majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_scroll_progress.html

+{% 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

majak_uistyleguide/templates/patterns/templates/uniweb/form.html

 {% 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>
 

majak_uistyleguide/templates/patterns/templates/uniweb/form.yaml

+context:
+  title: 'Stránka s formulářem'
\ No newline at end of file

majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.html

+{% 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' %}

majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.yaml

+context:
+  title: 'Univerzální stránka'
\ No newline at end of file

src/css/atoms/scroll-indicator.pcss

+/* 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

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

src/js/components/ScrollIndicator.vue

+<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

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);