From f4d08c1651e978a1cbcc1fae63e39f6937f944c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Tue, 21 May 2024 15:44:28 +0200
Subject: [PATCH] add gallery element
---
.../patterns/atoms/buttons/round_button.html | 6 +-
.../patterns/atoms/buttons/round_button.yaml | 1 +
.../atoms/buttons/round_button_colors.html | 11 ++++
.../templates/patterns/atoms/table/table.html | 19 +++++++
.../patterns/atoms/text/headings.html | 56 ++++++++++++++-----
.../patterns/molecules/gallery/gallery.html | 18 ++++++
.../patterns/molecules/gallery/gallery.yaml | 20 +++++++
package.json | 1 +
src/js/main.js | 9 +++
9 files changed, 127 insertions(+), 14 deletions(-)
create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/round_button_colors.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/table/table.html
create mode 100644 majak_uistyleguide/templates/patterns/molecules/gallery/gallery.html
create mode 100644 majak_uistyleguide/templates/patterns/molecules/gallery/gallery.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
index 04421f6..b0575d4 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 9e1841f..f8126e8 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 0000000..f3f4518
--- /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 0000000..469c584
--- /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 1f03333..f476481 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 0000000..c1f4a85
--- /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 0000000..b29dacc
--- /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 4ed0507..0336d65 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 9b81cac..7bd0fd4 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";
--
GitLab