diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
index 04421f60aa90ae6c855c49f1eef64033a1251696..b0575d4331db2210f9bb73e71067c0eb92ac1737 100644
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
@@ -13,7 +13,11 @@
{% block size_classes %}
pl-8 pr-3 py-3
- xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
+ {% if show_arrow_on_hover %}
+ xl:pl-8 xl:pr-3
+ {% else %}
+ xl:px-8
+ {% endif %}
{% endblock %}
"
>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.yaml
index 9e1841fd25a84f056ea9ad862fc30ac7d6a82aa4..f8126e86954e43bf89663eeef41666710995da6e 100644
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.yaml
@@ -2,3 +2,4 @@ context:
button_text: 'Další články'
classes: ''
url: '#'
+ show_arrow_on_hover: True
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button_colors.html b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button_colors.html
new file mode 100644
index 0000000000000000000000000000000000000000..f3f45189b07460f28645c3196e4dda79833a338c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button_colors.html
@@ -0,0 +1,11 @@
+<div class="flex flex-col gap-2">
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-black text-white" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-white text-black" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-pirati-yellow text-black" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-grey-125 text-black" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-blue-300 text-white" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-cyan-200 text-white" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-green-400 text-white" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-violet-400 text-white" %}
+ {% include "patterns/atoms/buttons/round_button.html" with classes="bg-red-600 text-white" %}
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/table/table.html b/majak_uistyleguide/templates/patterns/atoms/table/table.html
new file mode 100644
index 0000000000000000000000000000000000000000..469c58471be0e99dc79eb5a633e26a37a23a8b73
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/table/table.html
@@ -0,0 +1,19 @@
+<div class="my-6 prose">
+ <table>
+ <tr>
+ <th>Company</th>
+ <th>Contact</th>
+ <th>Country</th>
+ </tr>
+ <tr>
+ <td>Alfreds Futterkiste</td>
+ <td>Maria Anders</td>
+ <td>Germany</td>
+ </tr>
+ <tr>
+ <td>Centro comercial Moctezuma</td>
+ <td>Francisco Chang</td>
+ <td>Mexico</td>
+ </tr>
+ </table>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/headings.html b/majak_uistyleguide/templates/patterns/atoms/text/headings.html
index 1f03333c81ebfccba1ecd0e5a103104135fc8842..f4764816ea984ef0cefd850a8cd8c3115117219a 100644
--- a/majak_uistyleguide/templates/patterns/atoms/text/headings.html
+++ b/majak_uistyleguide/templates/patterns/atoms/text/headings.html
@@ -1,16 +1,46 @@
<div class="space-y-12">
<div>
- <h1 class="head-9xl">{{ title }}</h1>
- <h1 class="head-8xl">{{ title }}</h1>
- <h1 class="head-7xl">{{ title }}</h1>
- <h1 class="head-6xl">{{ title }}</h1>
- <h1 class="head-5xl">{{ title }}</h1>
- <h1 class="head-4xl">{{ title }}</h1>
- <h1 class="head-3xl">{{ title }}</h1>
- <h1 class="head-2xl">{{ title }}</h1>
- <h1 class="head-xl">{{ title }}</h1>
- <h1 class="head-base">{{ title }}</h1>
- <h1 class="head-sm">{{ title }}</h1>
- <h1 class="head-xs">{{ title }}</h1>
+ <h1 class="head-9xl">Nadpis velikosti 9XL</h1>
+ <h1 class="head-8xl">Nadpis velikosti 8XL</h1>
+ <h1 class="head-7xl">Nadpis velikosti 7XL</h1>
+ <h1 class="head-6xl">Nadpis velikosti 6XL</h1>
+<!-- <h1 class="head-5xl">{{ title }}</h1> -->
+ <h1 class="head-4xl">Nadpis velikosti 4XL</h1>
+ <h1 class="head-3xl">Nadpis velikosti 3XL</h1>
+ <h1 class="head-2xl">Nadpis velikosti 2XL</h1>
+ <h1 class="head-xl">Nadpis velikosti XL</h1>
+ <h1 class="head-base">Nadpis velikosti MD</h1>
+ <h1 class="head-sm">Nadpis velikosti SM</h1>
+ <h1 class="head-xs">Nadpis velikosti XS</h1>
</div>
-</div>
\ No newline at end of file
+
+ <div class="text-center">
+ <h1 class="head-9xl">Nadpis velikosti 9XL</h1>
+ <h1 class="head-8xl">Nadpis velikosti 8XL</h1>
+ <h1 class="head-7xl">Nadpis velikosti 7XL</h1>
+ <h1 class="head-6xl">Nadpis velikosti 6XL</h1>
+<!-- <h1 class="head-5xl">{{ title }}</h1> -->
+ <h1 class="head-4xl">Nadpis velikosti 4XL</h1>
+ <h1 class="head-3xl">Nadpis velikosti 3XL</h1>
+ <h1 class="head-2xl">Nadpis velikosti 2XL</h1>
+ <h1 class="head-xl">Nadpis velikosti XL</h1>
+ <h1 class="head-base">Nadpis velikosti MD</h1>
+ <h1 class="head-sm">Nadpis velikosti SM</h1>
+ <h1 class="head-xs">Nadpis velikosti XS</h1>
+ </div>
+
+ <div class="text-right">
+ <h1 class="head-9xl">Nadpis velikosti 9XL</h1>
+ <h1 class="head-8xl">Nadpis velikosti 8XL</h1>
+ <h1 class="head-7xl">Nadpis velikosti 7XL</h1>
+ <h1 class="head-6xl">Nadpis velikosti 6XL</h1>
+<!-- <h1 class="head-5xl">{{ title }}</h1> -->
+ <h1 class="head-4xl">Nadpis velikosti 4XL</h1>
+ <h1 class="head-3xl">Nadpis velikosti 3XL</h1>
+ <h1 class="head-2xl">Nadpis velikosti 2XL</h1>
+ <h1 class="head-xl">Nadpis velikosti XL</h1>
+ <h1 class="head-base">Nadpis velikosti MD</h1>
+ <h1 class="head-sm">Nadpis velikosti SM</h1>
+ <h1 class="head-xs">Nadpis velikosti XS</h1>
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/gallery/gallery.html b/majak_uistyleguide/templates/patterns/molecules/gallery/gallery.html
new file mode 100644
index 0000000000000000000000000000000000000000..c1f4a858a76133e1ca6c9b3531fc4e703464b2dc
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/gallery/gallery.html
@@ -0,0 +1,18 @@
+<div
+ class="
+ flex flex-wrap items-center gap-2 my-8 justify-center
+
+ lg:justify-start
+ "
+>
+ {% for image in images %}
+ <a
+ class="w-40"
+ href="{{ image.source }}"
+ data-fancybox="gallery"
+ data-caption="{{ image.caption }}"
+ >
+ <img class="rounded" src="{{ image.source }}" />
+ </a>
+ {% endfor %}
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/gallery/gallery.yaml b/majak_uistyleguide/templates/patterns/molecules/gallery/gallery.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..b29daccc8e46924bd61e69ce7361a3f33fffe813
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/gallery/gallery.yaml
@@ -0,0 +1,20 @@
+context:
+ images:
+ -
+ source: https://picsum.photos/536/354
+ caption: 'Example image 1'
+ -
+ source: https://picsum.photos/536/355
+ caption: 'Example image 2'
+ -
+ source: https://picsum.photos/536/356
+ caption: 'Example image 3'
+ -
+ source: https://picsum.photos/536/354
+ caption: 'Example image 1'
+ -
+ source: https://picsum.photos/536/355
+ caption: 'Example image 2'
+ -
+ source: https://picsum.photos/536/356
+ caption: 'Example image 3'
diff --git a/package.json b/package.json
index 4ed0507d1a1781b7f15e7de0e21a34b33dc66e16..0336d65551a013dc3bd6649d110c939b05d4c6f7 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"prod": "vite build"
},
"dependencies": {
+ "@fancyapps/ui": "^5.0.36",
"@fullcalendar/core": "^6.1.5",
"@fullcalendar/daygrid": "^6.1.5",
"@fullcalendar/interaction": "^6.1.5",
diff --git a/src/js/main.js b/src/js/main.js
index 9b81cac480870b42069e8a9ad470fe66ffc7a6ae..7bd0fd485515a119e4abdbab61a1d1f26c5e569d 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -3,6 +3,10 @@ import "../css/style.pcss";
import Vue from "vue";
import { forEachNode } from "./utils";
+import { Fancybox } from "@fancyapps/ui";
+import "@fancyapps/ui/dist/fancybox/fancybox.css";
+import { cs } from '@fancyapps/ui/dist/fancybox/l10n/cs.esm.js';
+
import AnimatedArrow from "./components/arrows/AnimatedArrow";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
@@ -44,6 +48,11 @@ Vue.component("ui-candidate-secondary-list", CandidateSecondaryList);
Vue.component("ui-countdown", Countdown);
+Fancybox.bind("[data-fancybox]", {
+ l10n: cs
+});
+
+
import UiApp from "./components/UiApp.vue";