add gallery element

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 %}
   "
 >

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

majak_uistyleguide/templates/patterns/atoms/buttons/round_button_colors.html

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

majak_uistyleguide/templates/patterns/atoms/table/table.html

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

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

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

majak_uistyleguide/templates/patterns/molecules/gallery/gallery.html

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

majak_uistyleguide/templates/patterns/molecules/gallery/gallery.yaml

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

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

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