diff --git a/majak_uistyleguide/settings/base.py b/majak_uistyleguide/settings/base.py
index b9b7cb9f044a676cfeb4b5a0bb5dcd67c997010e..3751af8c2a8ea6f294899e124fc459a1316ff763 100644
--- a/majak_uistyleguide/settings/base.py
+++ b/majak_uistyleguide/settings/base.py
@@ -1,9 +1,6 @@
from pathlib import Path
import environ
-import sentry_sdk
-
-from sentry_sdk.integrations.django import DjangoIntegration
ROOT_DIR = Path(__file__).parents[2]
@@ -86,16 +83,23 @@ TEMPLATES = [
# SENTRY
# ------------------------------------------------------------------------------
-SENTRY_DSN = env.str("SENTRY_DSN", default="")
-
-if SENTRY_DSN != "":
- sentry_sdk.init(
- dsn=SENTRY_DSN,
- integrations=[
- DjangoIntegration(),
- ],
- send_default_pii=True,
- )
+try:
+ import sentry_sdk
+
+ from sentry_sdk.integrations.django import DjangoIntegration
+
+ SENTRY_DSN = env.str("SENTRY_DSN", default="")
+
+ if SENTRY_DSN != "":
+ sentry_sdk.init(
+ dsn=SENTRY_DSN,
+ integrations=[
+ DjangoIntegration(),
+ ],
+ send_default_pii=True,
+ )
+except ImportError:
+ pass
# STATIC
diff --git a/majak_uistyleguide/static/images/badge.png b/majak_uistyleguide/static/images/badge.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fe1daf0637b0a65e78b4152b267368358470124
Binary files /dev/null and b/majak_uistyleguide/static/images/badge.png differ
diff --git a/majak_uistyleguide/static/images/badge_other.png b/majak_uistyleguide/static/images/badge_other.png
new file mode 100644
index 0000000000000000000000000000000000000000..f585e9707aec0dcd86663a4a5d615fe876b55916
Binary files /dev/null and b/majak_uistyleguide/static/images/badge_other.png differ
diff --git a/majak_uistyleguide/static/images/captcha.png b/majak_uistyleguide/static/images/captcha.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b27637459d390e9b46d9a7a2b523ba221a7d24e
Binary files /dev/null and b/majak_uistyleguide/static/images/captcha.png differ
diff --git a/majak_uistyleguide/static/images/district/logo-full-black.svg b/majak_uistyleguide/static/images/district/logo-full-black.svg
index bf2d9cabb9dac6236b987d36d6e45f71c653d51d..d98038cdaea0c66cdbcb6001563d391258db3a3d 100644
--- a/majak_uistyleguide/static/images/district/logo-full-black.svg
+++ b/majak_uistyleguide/static/images/district/logo-full-black.svg
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
- width="237.9003"
- height="40.554771"
- viewBox="0 0 237.90029 40.554772"
+ width="154.54076"
+ height="40.335541"
+ viewBox="0 0 154.54075 40.335541"
version="1.1"
id="svg24"
xmlns="http://www.w3.org/2000/svg"
@@ -11,7 +11,7 @@
id="defs28" />
<g
id="logo-flag-text-white"
- transform="translate(-288.547,-170.28477)"
+ transform="translate(-288.547,-170.504)"
style="fill:#000000">
<g
id="Group_11"
@@ -165,24 +165,5 @@
width="1.1317097"
height="40.189453"
x="153.40904"
- y="0.36531809" />
- <g
- aria-label="Eurovolby"
- id="text395"
- style="font-size:21.3333px;font-family:'Roboto Condensed';-inkscape-font-specification:'Roboto Condensed, '"
- transform="translate(-9.9142337e-8,0.2192336)">
- <g
- id="text1"
- style="fill:#1a1a1a"
- aria-label="Pardubický kraj">
- <path
- style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
- d="m 158.96712,3.2367609 h 3.45599 q 1.74933,0 2.624,0.9386652 0.87466,0.9386652 0.87466,2.7519956 V 8.399419 q 0,1.813331 -0.87466,2.751996 -0.87467,0.938665 -2.624,0.938665 h -1.10933 v 6.079991 h -2.34666 z m 3.45599,6.7199891 q 0.576,0 0.85333,-0.319999 0.29867,-0.32 0.29867,-1.087998 V 6.7780886 q 0,-0.7679987 -0.29867,-1.0879982 -0.27733,-0.3199995 -0.85333,-0.3199995 h -1.10933 V 9.95675 Z m 5.84532,-6.7199891 h 3.17867 l 2.43199,14.9333101 h -2.34666 l -0.42667,-2.965329 v 0.04267 h -2.66666 l -0.42667,2.922662 h -2.17599 z m 2.56,9.9839841 -1.04533,-7.3813215 h -0.0427 l -1.024,7.3813215 z m 4.18131,-9.9839841 h 3.47732 q 1.81333,0 2.64533,0.853332 0.832,0.8319987 0.832,2.5813292 V 7.588754 q 0,2.32533 -1.536,2.943995 v 0.04267 q 0.85334,0.256 1.19467,1.045332 0.36267,0.789332 0.36267,2.111996 v 2.623996 q 0,0.639999 0.0427,1.045332 0.0427,0.383999 0.21333,0.767999 h -2.38932 q -0.128,-0.362666 -0.17067,-0.682666 -0.0427,-0.319999 -0.0427,-1.151998 v -2.730662 q 0,-1.023999 -0.34133,-1.429332 -0.32,-0.405332 -1.13067,-0.405332 h -0.81066 v 6.39999 h -2.34666 z m 3.19999,6.3999901 q 0.704,0 1.04533,-0.362666 0.36267,-0.362666 0.36267,-1.215998 V 6.9060884 q 0,-0.8106653 -0.29867,-1.1733314 -0.27733,-0.3626661 -0.896,-0.3626661 H 177.3564 V 9.636751 Z m 5.39732,-6.3999901 h 3.584 q 1.74933,0 2.62399,0.9386652 0.87467,0.9386652 0.87467,2.7519956 V 14.47941 q 0,1.81333 -0.87467,2.751995 -0.87466,0.938666 -2.62399,0.938666 h -3.584 z m 3.54133,12.7999801 q 0.576,0 0.87467,-0.341333 0.32,-0.341333 0.32,-1.109332 V 6.8207552 q 0,-0.7679987 -0.32,-1.1093315 -0.29867,-0.3413328 -0.87467,-0.3413328 h -1.19466 V 16.036741 Z m 8.53332,2.346663 q -1.70666,0 -2.60266,-0.959999 -0.896,-0.981332 -0.896,-2.794662 V 3.2367609 h 2.34667 V 14.799409 q 0,0.767999 0.29866,1.109332 0.32,0.341333 0.896,0.341333 0.576,0 0.87467,-0.341333 0.32,-0.341333 0.32,-1.109332 V 3.2367609 h 2.26133 V 14.628743 q 0,1.81333 -0.896,2.794662 -0.896,0.959999 -2.60267,0.959999 z m 5.16267,-15.1466431 h 3.54133 q 1.81333,0 2.64533,0.853332 0.83199,0.8319987 0.83199,2.5813292 v 0.5973324 q 0,1.1519985 -0.38399,1.8773305 -0.36267,0.725332 -1.13067,1.045332 v 0.04267 q 1.74933,0.597333 1.74933,3.114662 v 1.279998 q 0,1.727997 -0.91733,2.645329 -0.896,0.895999 -2.64533,0.895999 h -3.69066 z m 3.26399,6.0799901 q 0.704,0 1.04534,-0.362666 0.36266,-0.362666 0.36266,-1.2159979 V 6.9060884 q 0,-0.8106653 -0.29866,-1.1733314 -0.27734,-0.3626661 -0.896,-0.3626661 h -1.13067 V 9.316751 Z m 0.42667,6.71999 q 0.61867,0 0.91733,-0.32 0.29867,-0.341333 0.29867,-1.151998 v -1.301331 q 0,-1.023999 -0.36267,-1.407998 -0.34133,-0.405333 -1.152,-0.405333 h -1.04533 v 4.58666 z m 4.92798,-12.7999801 h 2.34666 V 18.170071 h -2.34666 z m 7.40264,15.1466431 q -1.68533,0 -2.58133,-0.959999 -0.87466,-0.959998 -0.87466,-2.709329 V 6.6927554 q 0,-1.7493305 0.87466,-2.709329 0.896,-0.9599985 2.58133,-0.9599985 1.68533,0 2.56,0.9599985 0.896,0.9599985 0.896,2.709329 V 8.27142 h -2.21867 V 6.5434223 q 0,-1.3866644 -1.17333,-1.3866644 -1.17333,0 -1.17333,1.3866644 v 8.3413207 q 0,1.365331 1.17333,1.365331 1.17333,0 1.17333,-1.365331 v -2.282664 h 2.21867 v 2.111997 q 0,1.749331 -0.896,2.709329 -0.87467,0.959999 -2.56,0.959999 z m 4.86398,-15.1466431 h 2.34666 V 9.530084 l 2.98667,-6.2933231 h 2.34666 l -2.79466,5.4826581 2.83732,9.450652 h -2.45332 l -1.984,-6.65599 -0.93867,1.898664 v 4.757326 h -2.34666 z m 10.98664,8.5759861 -2.83733,-8.5759861 h 2.496 l 1.6,5.4826581 h 0.0427 l 1.6,-5.4826581 h 2.28266 l -2.83733,8.5759861 v 6.357324 h -2.34666 z m 1.38667,-12.0319806 h 2.55999 l -2.28266,2.4533294 h -1.77066 z"
- id="path2" />
- <path
- style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
- d="m 158.96744,22.267254 h 2.34666 v 6.293324 l 2.98666,-6.293324 h 2.34667 l -2.79467,5.482658 2.83733,9.450652 h -2.45333 l -1.98399,-6.655989 -0.93867,1.898663 v 4.757326 h -2.34666 z m 8.83198,0 h 3.47732 q 1.81333,0 2.64533,0.853332 0.832,0.831999 0.832,2.58133 v 0.917332 q 0,2.325329 -1.536,2.943995 v 0.04267 q 0.85334,0.255999 1.19467,1.045331 0.36266,0.789332 0.36266,2.111997 v 2.623996 q 0,0.639999 0.0427,1.045331 0.0427,0.384 0.21333,0.767999 h -2.38933 q -0.128,-0.362666 -0.17066,-0.682665 -0.0427,-0.32 -0.0427,-1.151999 v -2.730662 q 0,-1.023998 -0.34133,-1.429331 -0.32,-0.405333 -1.13067,-0.405333 h -0.81066 v 6.39999 h -2.34666 z m 3.19999,6.39999 q 0.704,0 1.04533,-0.362666 0.36267,-0.362666 0.36267,-1.215998 v -1.151998 q 0,-0.810665 -0.29867,-1.173331 -0.27733,-0.362667 -0.896,-0.362667 h -1.06666 v 4.26666 z m 7.21065,-6.39999 h 3.17866 l 2.432,14.93331 h -2.34666 l -0.42667,-2.965328 v 0.04267 h -2.66666 l -0.42667,2.922662 h -2.17599 z m 2.56,9.983985 -1.04533,-7.381322 h -0.0427 l -1.024,7.381322 z m 4.73597,5.034658 q -0.64,0 -1.088,-0.08533 v -2.13333 q 0.34134,0.08533 0.768,0.08533 0.704,0 1.04533,-0.341332 0.34134,-0.362666 0.34134,-1.087999 V 22.267254 h 2.34666 v 11.391982 q 0,1.834664 -0.85333,2.730663 -0.832,0.895998 -2.56,0.895998 z"
- id="path3" />
- </g>
- </g>
+ y="0.14608809" />
</svg>
diff --git a/majak_uistyleguide/static/images/district/logo-full-white.svg b/majak_uistyleguide/static/images/district/logo-full-white.svg
index d5ed7a332f1cf6fc31d51690f404d5584983e618..21d5d849524a95c39bf2bd26901b60b4cfc78546 100644
--- a/majak_uistyleguide/static/images/district/logo-full-white.svg
+++ b/majak_uistyleguide/static/images/district/logo-full-white.svg
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
- width="237.9003"
- height="40.554771"
- viewBox="0 0 237.90029 40.554772"
+ width="154.54076"
+ height="40.335541"
+ viewBox="0 0 154.54075 40.335541"
version="1.1"
id="svg24"
xmlns="http://www.w3.org/2000/svg"
@@ -11,7 +11,7 @@
id="defs28" />
<g
id="logo-flag-text-white"
- transform="translate(-288.547,-170.28477)"
+ transform="translate(-288.547,-170.504)"
style="fill:#ffffff">
<g
id="Group_11"
@@ -165,24 +165,5 @@
width="1.1317097"
height="40.189453"
x="153.40904"
- y="0.36531809" />
- <g
- aria-label="Eurovolby"
- id="text395"
- style="font-size:21.3333px;font-family:'Roboto Condensed';-inkscape-font-specification:'Roboto Condensed, ';fill:#ffffff"
- transform="translate(-9.9142337e-8,0.2192336)">
- <g
- id="text1"
- style="fill:#ffffff"
- aria-label="Pardubický kraj">
- <path
- style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff"
- d="m 158.96712,3.2367609 h 3.45599 q 1.74933,0 2.624,0.9386652 0.87466,0.9386652 0.87466,2.7519956 V 8.399419 q 0,1.813331 -0.87466,2.751996 -0.87467,0.938665 -2.624,0.938665 h -1.10933 v 6.079991 h -2.34666 z m 3.45599,6.7199891 q 0.576,0 0.85333,-0.319999 0.29867,-0.32 0.29867,-1.087998 V 6.7780886 q 0,-0.7679987 -0.29867,-1.0879982 -0.27733,-0.3199995 -0.85333,-0.3199995 h -1.10933 V 9.95675 Z m 5.84532,-6.7199891 h 3.17867 l 2.43199,14.9333101 h -2.34666 l -0.42667,-2.965329 v 0.04267 h -2.66666 l -0.42667,2.922662 h -2.17599 z m 2.56,9.9839841 -1.04533,-7.3813215 h -0.0427 l -1.024,7.3813215 z m 4.18131,-9.9839841 h 3.47732 q 1.81333,0 2.64533,0.853332 0.832,0.8319987 0.832,2.5813292 V 7.588754 q 0,2.32533 -1.536,2.943995 v 0.04267 q 0.85334,0.256 1.19467,1.045332 0.36267,0.789332 0.36267,2.111996 v 2.623996 q 0,0.639999 0.0427,1.045332 0.0427,0.383999 0.21333,0.767999 h -2.38932 q -0.128,-0.362666 -0.17067,-0.682666 -0.0427,-0.319999 -0.0427,-1.151998 v -2.730662 q 0,-1.023999 -0.34133,-1.429332 -0.32,-0.405332 -1.13067,-0.405332 h -0.81066 v 6.39999 h -2.34666 z m 3.19999,6.3999901 q 0.704,0 1.04533,-0.362666 0.36267,-0.362666 0.36267,-1.215998 V 6.9060884 q 0,-0.8106653 -0.29867,-1.1733314 -0.27733,-0.3626661 -0.896,-0.3626661 H 177.3564 V 9.636751 Z m 5.39732,-6.3999901 h 3.584 q 1.74933,0 2.62399,0.9386652 0.87467,0.9386652 0.87467,2.7519956 V 14.47941 q 0,1.81333 -0.87467,2.751995 -0.87466,0.938666 -2.62399,0.938666 h -3.584 z m 3.54133,12.7999801 q 0.576,0 0.87467,-0.341333 0.32,-0.341333 0.32,-1.109332 V 6.8207552 q 0,-0.7679987 -0.32,-1.1093315 -0.29867,-0.3413328 -0.87467,-0.3413328 h -1.19466 V 16.036741 Z m 8.53332,2.346663 q -1.70666,0 -2.60266,-0.959999 -0.896,-0.981332 -0.896,-2.794662 V 3.2367609 h 2.34667 V 14.799409 q 0,0.767999 0.29866,1.109332 0.32,0.341333 0.896,0.341333 0.576,0 0.87467,-0.341333 0.32,-0.341333 0.32,-1.109332 V 3.2367609 h 2.26133 V 14.628743 q 0,1.81333 -0.896,2.794662 -0.896,0.959999 -2.60267,0.959999 z m 5.16267,-15.1466431 h 3.54133 q 1.81333,0 2.64533,0.853332 0.83199,0.8319987 0.83199,2.5813292 v 0.5973324 q 0,1.1519985 -0.38399,1.8773305 -0.36267,0.725332 -1.13067,1.045332 v 0.04267 q 1.74933,0.597333 1.74933,3.114662 v 1.279998 q 0,1.727997 -0.91733,2.645329 -0.896,0.895999 -2.64533,0.895999 h -3.69066 z m 3.26399,6.0799901 q 0.704,0 1.04534,-0.362666 0.36266,-0.362666 0.36266,-1.2159979 V 6.9060884 q 0,-0.8106653 -0.29866,-1.1733314 -0.27734,-0.3626661 -0.896,-0.3626661 h -1.13067 V 9.316751 Z m 0.42667,6.71999 q 0.61867,0 0.91733,-0.32 0.29867,-0.341333 0.29867,-1.151998 v -1.301331 q 0,-1.023999 -0.36267,-1.407998 -0.34133,-0.405333 -1.152,-0.405333 h -1.04533 v 4.58666 z m 4.92798,-12.7999801 h 2.34666 V 18.170071 h -2.34666 z m 7.40264,15.1466431 q -1.68533,0 -2.58133,-0.959999 -0.87466,-0.959998 -0.87466,-2.709329 V 6.6927554 q 0,-1.7493305 0.87466,-2.709329 0.896,-0.9599985 2.58133,-0.9599985 1.68533,0 2.56,0.9599985 0.896,0.9599985 0.896,2.709329 V 8.27142 h -2.21867 V 6.5434223 q 0,-1.3866644 -1.17333,-1.3866644 -1.17333,0 -1.17333,1.3866644 v 8.3413207 q 0,1.365331 1.17333,1.365331 1.17333,0 1.17333,-1.365331 v -2.282664 h 2.21867 v 2.111997 q 0,1.749331 -0.896,2.709329 -0.87467,0.959999 -2.56,0.959999 z m 4.86398,-15.1466431 h 2.34666 V 9.530084 l 2.98667,-6.2933231 h 2.34666 l -2.79466,5.4826581 2.83732,9.450652 h -2.45332 l -1.984,-6.65599 -0.93867,1.898664 v 4.757326 h -2.34666 z m 10.98664,8.5759861 -2.83733,-8.5759861 h 2.496 l 1.6,5.4826581 h 0.0427 l 1.6,-5.4826581 h 2.28266 l -2.83733,8.5759861 v 6.357324 h -2.34666 z m 1.38667,-12.0319806 h 2.55999 l -2.28266,2.4533294 h -1.77066 z"
- id="path2" />
- <path
- style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#ffffff"
- d="m 158.96744,22.267254 h 2.34666 v 6.293324 l 2.98666,-6.293324 h 2.34667 l -2.79467,5.482658 2.83733,9.450652 h -2.45333 l -1.98399,-6.655989 -0.93867,1.898663 v 4.757326 h -2.34666 z m 8.83198,0 h 3.47732 q 1.81333,0 2.64533,0.853332 0.832,0.831999 0.832,2.58133 v 0.917332 q 0,2.325329 -1.536,2.943995 v 0.04267 q 0.85334,0.255999 1.19467,1.045331 0.36266,0.789332 0.36266,2.111997 v 2.623996 q 0,0.639999 0.0427,1.045331 0.0427,0.384 0.21333,0.767999 h -2.38933 q -0.128,-0.362666 -0.17066,-0.682665 -0.0427,-0.32 -0.0427,-1.151999 v -2.730662 q 0,-1.023998 -0.34133,-1.429331 -0.32,-0.405333 -1.13067,-0.405333 h -0.81066 v 6.39999 h -2.34666 z m 3.19999,6.39999 q 0.704,0 1.04533,-0.362666 0.36267,-0.362666 0.36267,-1.215998 v -1.151998 q 0,-0.810665 -0.29867,-1.173331 -0.27733,-0.362667 -0.896,-0.362667 h -1.06666 v 4.26666 z m 7.21065,-6.39999 h 3.17866 l 2.432,14.93331 h -2.34666 l -0.42667,-2.965328 v 0.04267 h -2.66666 l -0.42667,2.922662 h -2.17599 z m 2.56,9.983985 -1.04533,-7.381322 h -0.0427 l -1.024,7.381322 z m 4.73597,5.034658 q -0.64,0 -1.088,-0.08533 v -2.13333 q 0.34134,0.08533 0.768,0.08533 0.704,0 1.04533,-0.341332 0.34134,-0.362666 0.34134,-1.087999 V 22.267254 h 2.34666 v 11.391982 q 0,1.834664 -0.85333,2.730663 -0.832,0.895998 -2.56,0.895998 z"
- id="path3" />
- </g>
- </g>
+ y="0.14608809" />
</svg>
diff --git a/majak_uistyleguide/templates/patterns/atoms/articles/header_author.html b/majak_uistyleguide/templates/patterns/atoms/articles/header_author.html
new file mode 100644
index 0000000000000000000000000000000000000000..5721d094b8e476eeb6cb622fa8a75cc4e828c815
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/articles/header_author.html
@@ -0,0 +1,12 @@
+<div class="text-grey-185 mb-4 italic">
+ Autor: <span rel="author">
+ {% if author_url %}
+ <a
+ href="{{ author_url }}"
+ class="underline text-grey-100"
+ >{{ author_name }}</a>
+ {% else %}
+ {{ author_name }}
+ {% endif %}
+ </span>
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/articles/header_author.yaml b/majak_uistyleguide/templates/patterns/atoms/articles/header_author.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..55fd0a35583408866baad120a4b90723c174ce1b
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/articles/header_author.yaml
@@ -0,0 +1,3 @@
+context:
+ author_name: 'Redakce'
+ author_url: 'https://example.com'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
index 04421f60aa90ae6c855c49f1eef64033a1251696..68f20f31247e9289f12025353f0c7b065f4f497d 100644
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
@@ -1,5 +1,6 @@
<a
href="{{ url }}"
+ id="{{ id }}"
class="
flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal
hover:no-underline max-w-max
@@ -13,10 +14,14 @@
{% 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 %}
"
>
- <span class="group-hover:-translate-x-2 duration-200">{{ button_text }}</span>
+ <span class="group-hover:-translate-x-2 duration-200" id="{{ id }}-inner-text">{{ button_text }}</span>
<span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">{% include 'patterns/atoms/icons/arrow.html' %}</span>
</a>
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/buttons/round_button_group.html b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button_group.html
new file mode 100644
index 0000000000000000000000000000000000000000..3ccad5bad1641d6a12421e3a42ee4d61a3f0697c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button_group.html
@@ -0,0 +1,6 @@
+<div class="flex gap-3 py-4">
+ {% include "patterns/atoms/buttons/round_button.html" %}
+ {% include "patterns/atoms/buttons/round_button.html" %}
+ {% include "patterns/atoms/buttons/round_button.html" %}
+ {% include "patterns/atoms/buttons/round_button.html" %}
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/containers/container__medium.html b/majak_uistyleguide/templates/patterns/atoms/containers/container__medium.html
index 5b31707616971183be117411a47bfd34f4911551..08b46815724a8d9776df39cf2be7d598ff199249 100644
--- a/majak_uistyleguide/templates/patterns/atoms/containers/container__medium.html
+++ b/majak_uistyleguide/templates/patterns/atoms/containers/container__medium.html
@@ -5,4 +5,4 @@
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
bmpus purus at lorem. Etiam neque. Cras pede lib</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/containers/container__narrow.html b/majak_uistyleguide/templates/patterns/atoms/containers/container__narrow.html
index 21ccdbb8c1b48baa66f3d848503a67e44f567743..69e9311a94e0d2ca653d2b5b39f80a351e3d1a75 100644
--- a/majak_uistyleguide/templates/patterns/atoms/containers/container__narrow.html
+++ b/majak_uistyleguide/templates/patterns/atoms/containers/container__narrow.html
@@ -6,4 +6,4 @@
mpus purus at lorem. Etiam neque. Cras pede lib
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/containers/container__wide.html b/majak_uistyleguide/templates/patterns/atoms/containers/container__wide.html
index a172c99d3a9f6505f3cd8084192f0baa6a1cdad1..65335723b4578ab7a4a492cb725d1ca79c47e797 100644
--- a/majak_uistyleguide/templates/patterns/atoms/containers/container__wide.html
+++ b/majak_uistyleguide/templates/patterns/atoms/containers/container__wide.html
@@ -6,4 +6,4 @@
mpus purus at lorem. Etiam neque. Cras pede lib
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/dropdown/dropdown_item.html b/majak_uistyleguide/templates/patterns/atoms/dropdown/dropdown_item.html
new file mode 100644
index 0000000000000000000000000000000000000000..177c7ec684aa6949d38ef04bb983055a15a51a04
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/dropdown/dropdown_item.html
@@ -0,0 +1,5 @@
+<li>
+ <a href="{{ url }}">
+ {{ name }}
+ </a>
+</li>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/figure/figure.html b/majak_uistyleguide/templates/patterns/atoms/figure/figure.html
new file mode 100644
index 0000000000000000000000000000000000000000..9f25c0bf1123e6c032e323800a38aeec66d31423
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/figure/figure.html
@@ -0,0 +1,12 @@
+<figure class="flex flex-col gap-2 max-w-max py-4">
+ <img
+ src="{{ source }}"
+ alt="{{ alt }}"
+ >
+
+ {% if caption %}
+ <figcaption
+ class="text-grey-250 italic text-sm"
+ >{{ caption }}</figcaption>
+ {% endif %}
+</figure>
diff --git a/majak_uistyleguide/templates/patterns/atoms/figure/figure.yaml b/majak_uistyleguide/templates/patterns/atoms/figure/figure.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..78575f8cef780276de13bb2e4a3ce6ab9bcd2a80
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/figure/figure.yaml
@@ -0,0 +1,4 @@
+context:
+ source: https://picsum.photos/536/354
+ alt: 'Picture of Elephant'
+ caption: 'Picture of Elephant'
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_captcha.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_captcha.html
new file mode 100644
index 0000000000000000000000000000000000000000..7f8b53a2acd8c7df8f7f6cc2d384ae2f96e3c13f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_captcha.html
@@ -0,0 +1,8 @@
+<div class="flex gap-3 w-full">
+ <img
+ src="/static/images/captcha.png"
+ alt="Captcha obrázek"
+ >
+
+ {% include "patterns/atoms/form_fields/form_input.html" with placeholder=placeholder label='' hint='' extra_classes='lg:!w-full' %}
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_captcha.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_captcha.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..e817578f06c44af790cf14b482cfc4921036cb2d
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_captcha.yaml
@@ -0,0 +1,2 @@
+context:
+ placeholder: 'Kód z obrázku'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
index 3f75b1e932611e2e57489ccff88f88ebdbf7e351..9f83952edecdcc676365de6632aba0fa1adead9a 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.html
@@ -1,4 +1,4 @@
-<div class="checkbox form-field__control flex items-center {{ classes }}">
- <input type="checkbox" id="checkbox_1">
- <label for="checkbox_1">{{ label }}</label>
+<div class="form__checkbox flex items-center {{ classes }}">
+ <input type="form__checkbox" id="{{ id }}">
+ <label for="{{ id }}">{{ label }}</label>
</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
index 99b12507c573553fd9d7d4a2482215fb2510bc7b..05dae7d3c43f7c26d0c030763ba8eb2818a6fdd9 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_checkbox.yaml
@@ -1,3 +1,4 @@
context:
classes: ''
label: 'Souhlasím se zpracováním osobních údajů'
+ id: 'checkbox_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
new file mode 100644
index 0000000000000000000000000000000000000000..e3be8615874d7aa09d136cc07303662054748cc6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}date{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..5a447b557e96bddd19a6fac5ffebd6c495b092ac
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_date.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Datum narození'
+ placeholder: ''
+ hint: ''
+ is_required: true
+ id: 'date_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
new file mode 100644
index 0000000000000000000000000000000000000000..4b7c6aa31009c37fdd2cf5d814c761f9685c297f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}datetime-local{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..3fcd97a6346eff78d2a4edaf135b7a282560d987
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_datetime.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Datum a čas poslední injekce'
+ placeholder: ''
+ hint: ''
+ is_required: true
+ id: 'datetime_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
new file mode 100644
index 0000000000000000000000000000000000000000..899211358389444633ef8a99e61e98316ffa588d
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}email{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..3d6194af36b264110bfa8cf2a6abd1cbcb079bc8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_email.yaml
@@ -0,0 +1,5 @@
+context:
+ label: 'Registrační email'
+ placeholder: 'info@pirati.cz'
+ hint: ''
+ id: 'email_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
index 1e3c9e7e63f7e1f41c134ffac5cc2e328c1b28c2..b5720757e174b019e1e325bbf649a4a04479aa33 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-2 max-w-min">
+<div class="flex flex-col gap-2 items-start">
{% if label %}
<div>
<label for="{{ id }}" class="leading-5">
@@ -11,12 +11,11 @@
</div>
{% endif %}
- <div class="flex gap-2">
+ <div class="flex w-full gap-2">
<input
- type="text"
+ type="{% block type %}text{% endblock %}"
class="
- form-field__control
- py-3 px-3
+ py-3 px-3 w-full lg:w-96
{% block color_classes %}
bg-grey-100 border border-grey-200
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
index f476c0d43a64ae6cb09eaab8ad9067eed2b49014..8f0d299a92c925c198acc4be7d96ac11ffdcdc25 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input.yaml
@@ -1,7 +1,7 @@
context:
- placeholder: 'Registrační email'
+ placeholder: ''
hint: ''
name: 'example'
is_required: false
extra_classes: ''
- label: ''
+ label: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
index 3d4e368fe4b93ee63f325d27f6f18764dcf64344..6074e64ab8a1ae0421758edb2a80c5715af60c71 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_input_backgroundless.html
@@ -1,5 +1,5 @@
{% extends 'patterns/atoms/form_fields/form_input.html' %}
{% block color_classes %}
- text-input bg-white border-none
+ form__text-input bg-white border-none
{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
new file mode 100644
index 0000000000000000000000000000000000000000..c72df4c9a7c80499eb97936e233d5bfa313db9b6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_multiselect.html
@@ -0,0 +1,7 @@
+{% extends "patterns/atoms/form_fields/form_select.html" %}
+
+{% block select_attrs %}multiple{% endblock %}
+
+{% block wrapper_classes %}
+ form__select form__multiselect w-full lg:w-96
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
new file mode 100644
index 0000000000000000000000000000000000000000..8f7cc77940023e74fcaa4ffa6a44bb5e06388694
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.html
@@ -0,0 +1,3 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
+
+{% block type %}tel{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9a94ba5c57f819b1ae1328291b9e85302d569eed
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_phone.yaml
@@ -0,0 +1,6 @@
+context:
+ label: 'Telefon'
+ placeholder: '+420 666 666 666'
+ hint: ''
+ is_required: false
+ id: 'phone_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
new file mode 100644
index 0000000000000000000000000000000000000000..78e40e6a6e4a37003c1dbb20a689990c36974cc0
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.html
@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-2 items-start">
+ {% if label %}
+ <div>
+ <label for="{{ id }}" class="leading-5">
+ {{ label }}
+ </label>
+
+ {% if is_required %}
+ <span class="text-red-600">*</span>
+ {% endif %}
+ </div>
+ {% endif %}
+
+ <div class="flex flex-col gap-1">
+ {% for option in options %}
+ <div class="flex gap-3">
+ <input type="radio" id="{{ option.id }}" name="{{ id }}" value="{{ option.text }}">
+ <label for="{{ option.id }}">{{ option.text }}</label>
+ </div>
+ {% endfor %}
+ </div>
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..cde7e4c3efee6ea1b93c9a06bac63e97a06caf09
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_radio.yaml
@@ -0,0 +1,15 @@
+context:
+ label: 'Radio boxík'
+ options:
+ -
+ id: 'option-1'
+ text: 'Option 1'
+ -
+ id: 'option-2'
+ text: 'Option 2'
+ -
+ id: 'option-3'
+ text: 'Option 3'
+ classes: ''
+ id: 'radio_1'
+ is_required: true
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
index 7b9244669375c3ffd6ec62ef8016ea03175b0dc7..3660c4439857f33937c344145d9bb6fb8cf278c5 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+<div class="flex flex-col gap-2 items-start">
{% if label %}
<label for="{{ id }}">
{{ label }}
@@ -9,12 +9,25 @@
</label>
{% endif %}
- <div class="select max-w-72">
+ <div
+ class="
+ {% block wrapper_classes %}
+ form__select w-full lg:w-96
+ {% endblock %}
+ "
+ >
<select
- class="select__control form-field__control {{ classes }}"
+ class="
+ select__control
+
+ {% block classes %}
+ {{ classes }}
+ {% endblock %}
+ "
value=""
id="{{ id }}"
name="{{ id }}"
+ {% block select_attrs %}{% endblock %}
>
{% for option in options %}
<option>{{ option }}</option>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
index d86229ddaadd3b45b672cdddc0ecd68d1797b79c..96afa06a786ab4e651523669dcc8ab69302bedc6 100644
--- a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_select.yaml
@@ -1,5 +1,5 @@
context:
- label: ''
+ label: 'Vybírací boxík'
options:
- 'Option 1'
- 'Option 2'
@@ -8,5 +8,5 @@ context:
- 'Option 5'
- 'Option 6'
classes: ''
- id: 'example2'
+ id: 'select_1'
is_required: true
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_text.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_text.html
new file mode 100644
index 0000000000000000000000000000000000000000..b6e5bf204854dfb33494215a75f35190083e7a62
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_text.html
@@ -0,0 +1 @@
+{% extends "patterns/atoms/form_fields/form_input.html" %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_text.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_text.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..8b16856b5e4e6ddd10c17511fd12cfd109868944
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_text.yaml
@@ -0,0 +1,5 @@
+context:
+ label: 'Jméno'
+ placeholder: 'Pirát Pepa'
+ hint: 'Hlavně žádné osobní údaje.'
+ id: 'name_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
new file mode 100644
index 0000000000000000000000000000000000000000..c2b13a29b4bc3e599cc630e570fbdbe3b46027ed
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html
@@ -0,0 +1,17 @@
+<div class="flex flex-col items-start gap-2 {{ classes }}">
+ <label for="{{ id }}">
+ {{ label }}
+
+ {% if is_required %}
+ <span class="text-red-600">*</span>
+ {% endif %}
+ </label>
+ <textarea
+ class="
+ form__text-input resize-none
+
+ w-full lg:w-96
+ "
+ id="{{ id }}"
+ ></textarea>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..a41f209a5c75194a89a542433f787ce9c1e76ef5
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml
@@ -0,0 +1,4 @@
+context:
+ classes: ''
+ label: 'Smluvní podmínky'
+ id: 'textarea_1'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/grids/grids.html b/majak_uistyleguide/templates/patterns/atoms/grids/grids.html
index 9a3107ad49837c0c1fc04d49ff85dab736b001a6..bc0e5cc32f436fa241bfcc46688a68b02286577c 100644
--- a/majak_uistyleguide/templates/patterns/atoms/grids/grids.html
+++ b/majak_uistyleguide/templates/patterns/atoms/grids/grids.html
@@ -109,4 +109,15 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
+
+<div class="grid md:grid-cols-2 gap-8 py-4">
+ <div class="space-y-4">A</div>
+ <div class="space-y-4">B</div>
+</div>
+
+<div class="grid md:grid-cols-3 gap-8 py-4">
+ <div class="space-y-4">A</div>
+ <div class="space-y-4">B</div>
+ <div class="space-y-4">C</div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/images/images.html b/majak_uistyleguide/templates/patterns/atoms/images/images.html
new file mode 100644
index 0000000000000000000000000000000000000000..6c344807dc726a18f26ffdf49321bf5f351e60d6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/images/images.html
@@ -0,0 +1,19 @@
+<div class="w-full mx-auto my-6 object-contain h-max lg:h-max lg:w-auto">
+ <img src="/static/ivan1.png">
+</div>
+
+<div class="float-left mr-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain">
+ <img src="/static/ivan1.png">
+</div>
+
+<div class="float-left mr-4 mb-6 mt-0 object-contain">
+ <img src="/static/ivan1.png">
+</div>
+
+<div class="float-right ml-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain">
+ <img src="/static/ivan1.png">
+</div>
+
+<div class="float-right ml-4 mb-6 mt-0 object-contain">
+ <img src="/static/ivan1.png">
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.html b/majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.html
new file mode 100644
index 0000000000000000000000000000000000000000..9b3e008e4d779a201146186b1e11b23b4311f9ca
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.html
@@ -0,0 +1,10 @@
+<li class="flex gap-2 items-center">
+ <img
+ width="30"
+ height="30"
+ src="{{ image_src }}"
+ >
+ <div>
+ {{ text }}
+ </div>
+</li>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.yaml b/majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..67e95959bb5bb6785d82706b8facbaff939ad668
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.yaml
@@ -0,0 +1,3 @@
+context:
+ image_src: '/static/images/person-table.png'
+ text: 'Lorem ipsum dolor sit amet'
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html b/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
new file mode 100644
index 0000000000000000000000000000000000000000..5d0d3f03e53c192c6350087b765d9aee1b9a9259
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
@@ -0,0 +1,60 @@
+<div class="__js-root">
+ <ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
+ <template slot="head">
+ <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
+ <th>
+ <p>
+ Company
+ </p>
+ </th>
+ <th>
+ <p>
+ Contact
+ </p>
+ </th>
+ <th>
+ <p>
+ Country
+ </p>
+ </th>
+ </tr>
+ </template>
+
+ <template slot="body">
+ <tr>
+ <td>
+ <p>
+ Alfreds Futterkiste
+ </p>
+ </td>
+ <td>
+ <p>
+ Maria Anders
+ </p>
+ </td>
+ <td>
+ <p>
+ Germany
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <p>
+ Centro comercial Moctezuma
+ </p>
+ </td>
+ <td>
+ <p>
+ Francisco Chang
+ </p>
+ </td>
+ <td>
+ <p>
+ Mexico
+ </p>
+ </td>
+ </tr>
+ </template>
+ </ui-popout-table>
+</div>
\ No newline at end of file
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..714d6f7fd53ad78a52399abf5d8d7213dfa838b8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/table/table.html
@@ -0,0 +1,33 @@
+<div class="my-6 prose max-w-[100ch]">
+ <table>
+ <thead>
+ <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
+ <th>Company</th>
+ <th>Contact</th>
+ <th>Country</th>
+ </tr>
+ </thead>
+
+ <tbody
+ class="
+ w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+ [&_tr:nth-child(even)]:bg-grey-50
+ "
+ >
+ <tr>
+ <td>Alfreds Futterkiste</td>
+ <td>Maria Anders</td>
+ <td>Germany</td>
+ </tr>
+ <tr>
+ <td>Centro comercial Moctezuma</td>
+ <td>Francisco Chang</td>
+ <td>
+ A<br>
+ B<br>
+ C<br>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/tags/tag.html b/majak_uistyleguide/templates/patterns/atoms/tags/tag.html
index 1ff24fbc14f9b206cc171f5bdcf28dcd9736b56a..342409fe4d32077452e56257cf0bdf06be6e527c 100644
--- a/majak_uistyleguide/templates/patterns/atoms/tags/tag.html
+++ b/majak_uistyleguide/templates/patterns/atoms/tags/tag.html
@@ -4,7 +4,7 @@
{% if color_classes %}
{{ color_classes }}
{% else %}
- text-black bg-yellow-500 hover:bg-yellow-600
+ text-black bg-white hover:bg-pirati-yellow
{% endif %}
px-4 py-2 duration-200 hover:no-underline
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/colors.html b/majak_uistyleguide/templates/patterns/atoms/text/colors.html
new file mode 100644
index 0000000000000000000000000000000000000000..1d06f3f3cb2bc0d97a0206a2df6e6b82fb36c980
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/text/colors.html
@@ -0,0 +1,95 @@
+<div
+ class="
+ bg-black text-white
+ [&_p]:!text-white
+ [&_h1]:!text-white
+ [&_h2]:!text-white
+ [&_h3]:!text-white
+ [&_h4]:!text-white
+ [&_h5]:!text-white
+ [&_h6]:!text-white
+ "
+>
+ {% include "patterns/atoms/text/paragraph.html" %}
+</div>
+
+<div
+ class="
+ bg-pirati-yellow text-black
+ [&_p]:!text-black
+ [&_h1]:!text-black
+ [&_h2]:!text-black
+ [&_h3]:!text-black
+ [&_h4]:!text-black
+ [&_h5]:!text-black
+ [&_h6]:!text-black
+ "
+>
+ {% include "patterns/atoms/text/paragraph.html" %}
+</div>
+
+<div
+ class="
+ bg-white text-black
+ [&_p]:!text-black
+ [&_h1]:!text-black
+ [&_h2]:!text-black
+ [&_h3]:!text-black
+ [&_h4]:!text-black
+ [&_h5]:!text-black
+ [&_h6]:!text-black
+ "
+>
+ {% include "patterns/atoms/text/paragraph.html" %}
+</div>
+
+<div
+ class="
+ bg-black text-white
+ [&_p]:!text-white
+ [&_h1]:!text-white
+ [&_h2]:!text-white
+ [&_h3]:!text-white
+ [&_h4]:!text-white
+ [&_h5]:!text-white
+ [&_h6]:!text-white
+ "
+>
+ <div class="prose">
+ {% include "patterns/atoms/text/headings.html" %}
+ </div>
+</div>
+
+<div
+ class="
+ bg-pirati-yellow text-black
+ [&_p]:!text-black
+ [&_h1]:!text-black
+ [&_h2]:!text-black
+ [&_h3]:!text-black
+ [&_h4]:!text-black
+ [&_h5]:!text-black
+ [&_h6]:!text-black
+ "
+>
+ <div class="prose">
+ {% include "patterns/atoms/text/headings.html" %}
+ </div>
+</div>
+
+<div
+ class="
+ bg-white text-black
+ [&_p]:!text-black
+ [&_h1]:!text-black
+ [&_h2]:!text-black
+ [&_h3]:!text-black
+ [&_h4]:!text-black
+ [&_h5]:!text-black
+ [&_h6]:!text-black
+ "
+>
+ <div class="prose">
+ {% include "patterns/atoms/text/headings.html" %}
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml b/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..aa8105bac9411dd7b0cc85ca8e35cf639b628dd3
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/text/colors.yaml
@@ -0,0 +1,3 @@
+context:
+ color_classes:
+ - ""
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/heading_with_image.html b/majak_uistyleguide/templates/patterns/atoms/text/heading_with_image.html
new file mode 100644
index 0000000000000000000000000000000000000000..bd0114fba0e5e889a9424e07684c198f972c716b
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/text/heading_with_image.html
@@ -0,0 +1,7 @@
+<div class="flex justify-between items-center gap-4">
+ <h1 class="head-xl">Nadpis velikosti XL</h1>
+ <img
+ class="max-w-[75px] max-h-[75px]"
+ src="/static/images/person-table.png"
+ >
+</div>
\ No newline at end of file
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/atoms/text/prose.html b/majak_uistyleguide/templates/patterns/atoms/text/prose.html
index 39fe45cb3cf1dcec657c4022c053d8d960a7ce02..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">
+<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/atoms/text/prose_aligned.html b/majak_uistyleguide/templates/patterns/atoms/text/prose_aligned.html
new file mode 100644
index 0000000000000000000000000000000000000000..af2f96ee3e2ae0bb473e324e249e7e88ae7130aa
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/text/prose_aligned.html
@@ -0,0 +1,11 @@
+<div class="w-full [&_*]:mr-auto text-left">
+ {% include "patterns/atoms/text/prose.html" %}
+</div>
+
+<div class="w-full [&_*]:mx-auto text-center">
+ {% include "patterns/atoms/text/prose.html" %}
+</div>
+
+<div class="w-full [&_*]:ml-auto text-right">
+ {% include "patterns/atoms/text/prose.html" %}
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html
new file mode 100644
index 0000000000000000000000000000000000000000..9a2a00bad458f2f8774d321d8ab6ae2b214c41f0
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html
@@ -0,0 +1,23 @@
+<div
+ class="
+ flex gap-4 w-full flex-col
+ lg:flex-row
+ "
+>
+ <div
+ class="
+ w-full max-w-[unset] shrink-0 grow-1 prose
+ lg:w-1/2
+ "
+ >
+ {{ first_column }}
+ </div>
+ <div
+ class="
+ w-full max-w-[unset] shrink-0 grow-1 prose
+ lg:w-1/2
+ "
+ >
+ {{ second_column }}
+ </div>
+</div>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.yaml b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..641d532365a99508573478142870e7c96e8586c8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.yaml
@@ -0,0 +1,4 @@
+context:
+ first_column: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna fringilla urna porttitor. Risus nullam eget felis eget. Duis at tellus at urna condimentum mattis pellentesque id. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut. At elementum eu facilisis sed odio morbi. Ut diam quam nulla porttitor massa. Lacus laoreet non curabitur gravida arcu ac. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Porttitor massa id neque aliquam vestibulum. Vulputate ut pharetra sit amet aliquam id. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Est lorem ipsum dolor sit. Consequat mauris nunc congue nisi vitae suscipit tellus. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Enim ut tellus elementum sagittis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.'
+ second_column: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna fringilla urna porttitor. Risus nullam eget felis eget. Duis at tellus at urna condimentum mattis pellentesque id. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut. At elementum eu facilisis sed odio morbi. Ut diam quam nulla porttitor massa. Lacus laoreet non curabitur gravida arcu ac. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Porttitor massa id neque aliquam vestibulum. Vulputate ut pharetra sit amet aliquam id. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Est lorem ipsum dolor sit. Consequat mauris nunc congue nisi vitae suscipit tellus. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Enim ut tellus elementum sagittis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.'
+
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.html b/majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.html
new file mode 100644
index 0000000000000000000000000000000000000000..1ccfee339f1149e9886d46801a02774d7ab853cf
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.html
@@ -0,0 +1,66 @@
+<div
+ class="
+ flex flex-col gap-2 mb-10
+
+ relative max-w-[600px]
+
+ group
+
+ text-center rounded cursor-pointer
+ "
+ id="ytVideo{{ video_id }}PosterContainer"
+>
+ <img
+ src="{{ image_source }}"
+ alt="{{ image_alt }}"
+ class="
+ object-cover mb-2 aspect-video rounded opacity-50 duration-200
+
+ group-hover:blur-sm
+ "
+ >
+
+ <div
+ class="absolute top-0 left-0 flex justify-center items-center w-full h-full"
+ >
+ <div class="relative">
+ <i
+ class="
+ relative text-red-600 ico--youtube text-7xl z-10 duration-200
+
+ group-hover:text-8xl
+ "
+ ></i>
+
+ <div class="absolute top-[30%] left-[30%] w-10 h-8 bg-white z-0"></div>
+ </div>
+ </div>
+
+ <small class="font-bold">
+ Spuštěním videa dojde k načtení obsahu třetích stran z portálu YouTube.
+ </small>
+</div>
+
+<div
+ class="content-block aspect-video mb-10 max-w-[600px]"
+ id="ytVideo{{ video_id }}IframeContainer"
+ style="display: none"
+>
+
+</div>
+
+{# Script, který při kliknutí na poster načte iframe s YouTube videem (v Enhanced Privacy Mode) #}
+{# Záměrně je přímo na bloku, protože málokterý článek bude mít více videí a naopak většina článků YT videa nemá #}
+<script>
+ (function () {
+ const posterContainer = document.getElementById('ytVideo{{ video_id }}PosterContainer')
+ const videoContainer = document.getElementById('ytVideo{{ video_id }}IframeContainer')
+
+ posterContainer.onclick = function () {
+ videoContainer.innerHTML = '<iframe class="rounded w-full h-full !border-0" src="https://www.youtube-nocookie.com/embed/{{ video_id }}?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>'
+
+ videoContainer.style.display = 'block'
+ posterContainer.style.display = 'none'
+ }
+ })()
+</script>
diff --git a/majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.yaml b/majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..93dc876bebbe36517f4c7ca7e974ea8082c24c7b
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.yaml
@@ -0,0 +1,4 @@
+context:
+ video_id: 'G6N943NlCbw'
+ image_source: 'https://picsum.photos/536/354'
+ image_alt: 'Image alt'
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html
new file mode 100644
index 0000000000000000000000000000000000000000..b59ac7a6802d0714a9d460aae1e1f8996a8dc79a
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html
@@ -0,0 +1,21 @@
+<div
+ class="
+ flex flex-col bg-grey-180 drop-shadow
+
+ {{ classes }}
+ "
+>
+ <div class="flex flex-col px-8 pb-6 pt-6 h-full">
+ <div class="text-xl text-grey-350 mb-2">
+ {{ date }}
+ </div>
+
+ <a href="{{ url }}" class="underline-offset-4">
+ <h2 class="font-alt text-4xl">{{ title }}</h2>
+ </a>
+
+ <div class="mt-2">
+ {% include 'patterns/molecules/tags/inline_tags.html' %}
+ </div>
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..7eca8c01e3b4c97b4a6027352c2667e4b759c9d9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml
@@ -0,0 +1,4 @@
+context:
+ title: 'KONEC MEZINÁRODNÍ OSTUDY. EVROPSKÁ KOMISE UZAVŘELA ŘÍZENÍ O STŘETU ZÁJMŮ'
+ date: '29. června 2023'
+ url: '#'
diff --git a/majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html b/majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html
index 3d754afc488e2588cc32f04e1cac1447e3adfa54..ebb46c95219477c1a8ecfe18ed88a8bbb82ab504 100644
--- a/majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html
+++ b/majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html
@@ -4,7 +4,7 @@
{% else %}
<div
{% endif %}
- class="hover:no-underline mb-12 flex gap-3 max-w-4xl"
+ class="hover:no-underline mb-12 flex gap-3"
>
{% if icon %}
@@ -15,7 +15,7 @@
<h3 class="font-alt mb-4 text-4xl">
{{ title }}
</h3>
- <div class="prose [&>div.content-block>p:first-child]:mt-0">
+ <div class="prose max-w-none [&>div.content-block>p:first-child]:mt-0">
<div class="content-block">
<p>
{{ text }}
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html
index 0bae5770d718a31ebed0342cb90b00bbf57283a5..c59961d8ffad099a157912d873a4580bf471828b 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html
@@ -1,35 +1,52 @@
<div class="flip-card" tabindex="0">
<div class="flip-card-inner">
- <div class="flip-card-front">
+ <div
+ class="flip-card-front rounded-3xl bg-cover"
+
+ {% if background_url %}
+ style="
+ background-image: url('{{ background_url }}')
+ "
+ {% endif %}
+ >
<div
class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
style="
- background-color: {{ bg_color }};
+ {% if not background_url %}
+ background-color: {{ bg_color }};
+ {% endif %}
{% if image_url %}
background-image: url('{{ image_url }}')
{% endif %}
"
>
- <div
- class="
- absolute top-0 left-0
+ {% if not background_url %}
+ <div
+ class="
+ absolute top-0 left-0
- border border-r-[27rem] border-r-[transparent]
- border-l-0 border-t-[33rem]
- "
- style="border-top-color: {{ bg_color }}"
- ></div>
+ border border-r-[27rem] border-r-[transparent]
+ border-l-0 border-t-[33rem]
+ "
+ style="border-top-color: {{ bg_color }}"
+ ></div>
+ {% endif %}
<h1
class="
font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
"
+ {% if title_color %}
+ style="color: {{ title_color }}"
+ {% endif %}
>{{ title }}</h1>
<div
class="
- absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed
+ bottom-8 left-8 text-left
+
+ absolute block text-white opacity-75 leading-5 font-condensed
md:hidden
"
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml
index 942a18caa8d3190daedb39d9646e199ae7b9cecc..b06861549642e7315fd2fbb06c05ab8dcdc77c73 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml
@@ -3,6 +3,8 @@ context:
Staň se členkou
nebo členem
image_url: '../../../../../static/images/onboarding/member.png'
+ title_color: ''
+ background_url: ''
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/image_with_button_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/image_with_button_box.html
index 8ba2b9e82d8d6f2d1cb156c05e0b3b223e323357..3c3551208fd7876ef8d4a0c2eac134c910455eab 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/image_with_button_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/image_with_button_box.html
@@ -8,7 +8,7 @@
<h2 class="head-6xl">{{ desc_text }}</h2>
</div>
- <div class="text-center flex justify-center">
+ <div class="text-center flex justify-center mt-auto">
{% include 'patterns/atoms/buttons/round_button.html' with classes='bg-white text-black' button_text=button_text %}
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.html b/majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.html
similarity index 73%
rename from majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.html
rename to majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.html
index 3ed76e9cc9f1e232f54c089edc0d5154e2c1ef69..c772a5fe8e4bd7f86e23d340557ad6934d781065 100644
--- a/majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.html
@@ -1,7 +1,9 @@
<ui-candidate-primary-box
name="{{ name }}"
+ subheading="{{ subheading }}"
position="{{ position }}"
description="{{ description }}"
url="{{ url }}"
image-source="{{ image_source }}"
+ :social-links="{{ social_links }}"
></ui-candidate-primary-box>
diff --git a/majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.yaml b/majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.yaml
similarity index 59%
rename from majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.yaml
rename to majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.yaml
index 4d7ef146e7bff60ba9364a6db06604bb23ceda02..69e3ec17067f4676681185763e102f3219fe8b86 100644
--- a/majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_primary_box.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.yaml
@@ -1,5 +1,19 @@
context:
- name: 'Mikuláš Peksa'
+ name: 'Ing. Mgr. et Mgr. Mikuláš Peksa'
+ subheading: 'Podnadpis'
image_source: '../../../../../static/images/mikulas-arrow.png'
position: 'Europoslanec'
description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'
+ social_links:
+ -
+ icon: 'ico--facebook'
+ name: 'Facebook'
+ url: 'https://example.com'
+ -
+ icon: 'ico--instagram'
+ name: 'Instagram'
+ url: 'https://example.com'
+ -
+ icon: 'ico--web'
+ name: 'Stránky'
+ url: 'https://example.com'
diff --git a/majak_uistyleguide/templates/patterns/molecules/dropdown/dropdown.html b/majak_uistyleguide/templates/patterns/molecules/dropdown/dropdown.html
new file mode 100644
index 0000000000000000000000000000000000000000..a602989b618f26788613efb2ae4302ab9d0a121d
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/dropdown/dropdown.html
@@ -0,0 +1,18 @@
+<div
+ class="dropdown nav-link js-scroll-anchor"
+ tabindex="0"
+>
+ <div class="dropbtn">
+ {{ name }}
+
+ <span class="drop-arrow">
+ <i class="ico--chevron-down"></i>
+ </span>
+ </div>
+
+ <ul class="dropdown-content">
+ {% for nested_item in menu_items %}
+ {% include "patterns/atoms/dropdown/dropdown_item.html" with name=nested_item.name url=nested_item.url %}
+ {% endfor %}
+ </ul>
+</div>
\ No newline at end of file
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/majak_uistyleguide/templates/patterns/molecules/lists/image_list.html b/majak_uistyleguide/templates/patterns/molecules/lists/image_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..6ad116ea6b60f970222cc34c33fa25dca1ffeb42
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/lists/image_list.html
@@ -0,0 +1,7 @@
+<ul class="flex flex-col gap-2">
+ {% include "patterns/atoms/lists/image_list_item.html" %}
+ {% include "patterns/atoms/lists/image_list_item.html" %}
+ {% include "patterns/atoms/lists/image_list_item.html" %}
+ {% include "patterns/atoms/lists/image_list_item.html" %}
+ {% include "patterns/atoms/lists/image_list_item.html" %}
+</ul>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
index b1437bfd90ffc4f078ed999bd6cfcc5fad51cef4..c13170fbe3942300f309d9de7a59df41bcc98bdd 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
@@ -1,6 +1,14 @@
<div class="__js-root">
<div class="header-carousel">
- <div class="block h-[700px] xl:h-screen relative group cursor-pointer">
+ <div
+ class="
+ {% block wrapper_classes %}
+ block h-[700px] xl:h-screen relative
+ {% endblock %}
+
+ group cursor-pointer
+ "
+ >
<video
class="
header-carousel--image
@@ -35,24 +43,38 @@
{% endif %}
</video>
- <div class="header-carousel--text-wrapper" style="box-sizing: border-box">
- <div class="container--wide px-0 h-full flex flex-col justify-end items-start" style="box-sizing: border-box">
+ <div
+ class="
+ {% block text_wrapper_class %}
+ header-carousel--text-wrapper
+ {% endblock %}
+ "
+ style="box-sizing: border-box"
+ >
+ <h1
+ class="
+ {% block text_inner_wrapper_classes %}
+ container--wide px-0 h-full flex flex-col justify-end items-start
+ {% endblock %}
+ "
+ style="box-sizing: border-box"
+ >
- <h1 class="mb-4 px-5 flex flex-col text-black block lg:hidden">
+ <div class="mb-4 px-5 flex flex-col text-black lg:hidden">
<div>{{ mobile_label_first }}</div>
<div>{{ mobile_label_second }}</div>
<div>{{ mobile_label_third }}</div>
- </h1>
+ </div>
- <h1 class="mb-4 px-5 flex flex-col text-black hidden lg:block">
+ <div class="mb-4 px-5 flex-col text-black hidden lg:flex">
<div>{{ desktop_label_first }}</div>
<div>{{ desktop_label_second }}</div>
- </h1>
+ </div>
<div class="ml-4 text-lg group">
{% include "patterns/atoms/buttons/round_button.html" with button_text=button_text %}
</div>
- </div>
+ </h1>
</div>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/district/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/district/carousel.html
index 23316967df343f67cad5f0bdc8a90325394b61ae..d198249b1630f0d74428ace1e3d98517b36724fb 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/district/carousel.html
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/district/carousel.html
@@ -1 +1,19 @@
{% extends 'patterns/molecules/menus/carousel.html' %}
+
+{% block wrapper_classes %}
+ block h-[600px] xl:h-[620px] relative group cursor-pointer
+{% endblock %}
+
+{% block text_wrapper_class %}
+ header-carousel--text-wrapper
+
+ !bottom-[0] !h-full
+{% endblock %}
+
+{% block text_inner_wrapper_classes %}
+ container--wide px-0 h-full flex flex-col justify-end items-start
+
+ py-[200px] flex flex-col justify-center
+
+ xl:pb-[110px]
+{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html b/majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html
index ba908660189ec6b19b37561479831dbd1ba650ec..70c7b34795762cbbb69676d414385ed462f4b08e 100644
--- a/majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html
+++ b/majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html
@@ -1,5 +1,7 @@
<a
class="
+ navbar__border-button__wrapper
+
hover:no-underline
hidden lg:inline
@@ -8,7 +10,7 @@
>
<div
class="
- navbar__border-button
+ navbar__border-button {{ extra_classes }}
flex items-center justify-center border-none duration-150 border-4 w-24 h-11 py-4 px-6
diff --git a/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.html b/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.html
index 8aeaa9a41db395d88838623cc9c5ea1ff99f55cb..287c6f2919d83f3a139349c66ba45183db4c2ed1 100644
--- a/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.html
+++ b/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.html
@@ -4,8 +4,36 @@
{{ name }}
</template>
<ui-popout-content>
- <div class="prose max-w-screen-lg">
- {% include "patterns/atoms/text/paragraph.html" with text=text %}
+ <div>
+ {% if guarantor_name %}
+ <div
+ class="
+ !text-grey-250 [&_*]:!text-grey-250
+
+ mb-3 flex gap-2 items-center justify-end
+ "
+ >
+ <div class="mr-2">
+ Garant programového bodu:
+ </div>
+
+ <img
+ alt="Obrázek osoby {{ guarantor_name }}"
+ class="w-10 h-10 opacity-75 m-0 p-0 rounded-full"
+ src="{{ guarantor_image_url }}"
+ >
+
+ <strong>
+ <a href="{{ guarantor_url }}">
+ {{ guarantor_name }}
+ </a>
+ </strong>
+ </div>
+ {% endif %}
+
+ <div class="prose max-w-screen-lg">
+ {% include "patterns/atoms/text/paragraph.html" with text=text %}
+ </div>
</div>
</ui-popout-content>
</ui-popout>
diff --git a/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.yaml b/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.yaml
index cc4d9dd25dd8c9f65122715381568e5d1fd37440..de8fde5295eab0d3e82382b85d279fd0f5811a46 100644
--- a/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.yaml
@@ -5,3 +5,6 @@ context:
asperiores voluptatibus enim qui velit quaerat. Perspiciatis
eum autem quidem et beatae quia dolore. Esse fuga architecto
delectus tenetur nesciunt aut aut dolore.'
+ guarantor_name: 'Petr Vepřový'
+ guarantor_url: 'https://example.com'
+ guarantor_image_url: '../../../../../static/images/person-table.png'
diff --git a/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html b/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html
new file mode 100644
index 0000000000000000000000000000000000000000..5fbfe5d7d0c51d3201aec37b83e86c7dcdc15a03
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html
@@ -0,0 +1,12 @@
+<div class="bg-grey-180">
+ <div
+ class="__js-root container--wide"
+ id="{{ id }}"
+ >
+ <ui-card-program
+ background-class="bg-grey-180"
+ open-point-background-class=""
+ :points="{{ program_data }}"
+ ></ui-card-program>
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.yaml b/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..c6180a8d3612968d4b69d0bcee6de55db8116412
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.yaml
@@ -0,0 +1,27 @@
+context:
+ program_data: "[
+ {
+ 'slug': '1',
+ 'number': 1,
+ 'title': 'Cowork',
+ 'renderedContent': '<small>test</small>'
+ },
+ {
+ 'slug': '2',
+ 'number': 2,
+ 'title': 'Dětský koutek',
+ 'renderedContent': '<strong>test</strong>'
+ },
+ {
+ 'slug': '3',
+ 'number': 3,
+ 'title': 'Pořádání akcí',
+ 'renderedContent': '<strong>test</strong>'
+ },
+ {
+ 'slug': '4',
+ 'number': 4,
+ 'title': 'Cokoliv dalšího',
+ 'renderedContent': '<strong>test</strong>'
+ }
+ ]"
diff --git a/majak_uistyleguide/templates/patterns/molecules/tags/tags.html b/majak_uistyleguide/templates/patterns/molecules/tags/tags.html
index 1f1c00613859b4f038dfae3fe600cb3345b2ab63..35dc047581cdc614d65139815060be687f37d335 100644
--- a/majak_uistyleguide/templates/patterns/molecules/tags/tags.html
+++ b/majak_uistyleguide/templates/patterns/molecules/tags/tags.html
@@ -1,4 +1,16 @@
-<div class="flex gap-2 flex-wrap max-w-[550px] {{ classes }}">
+<div
+ class="
+ flex gap-2 flex-wrap
+
+ {% if size_classes %}
+ max-w-[550px]
+ {% else %}
+ {{ size_classes }}
+ {% endif %}
+
+ {{ classes }}
+ "
+>
{% for tag in tags %}
{% include 'patterns/atoms/tags/tag.html' with text=tag color_classes=tag_color_classes %}
{% endfor %}
diff --git a/majak_uistyleguide/templates/patterns/molecules/tags/tags.yaml b/majak_uistyleguide/templates/patterns/molecules/tags/tags.yaml
index 45bd257d5e266145671a401e5c5be4cd540eb9eb..e017386503fdd9bb26061e1471b33d7da535765f 100644
--- a/majak_uistyleguide/templates/patterns/molecules/tags/tags.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/tags/tags.yaml
@@ -8,3 +8,11 @@ context:
- 'legalizace'
- 'digitalizace'
- 'volby do Evropy'
+ - 'schvalování zákonů'
+ - 'legislativa'
+ - 'lidská práva'
+ - 'LGBT+'
+ - 'europarlament'
+ - 'legalizace'
+ - 'digitalizace'
+ - 'volby do Evropy'
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/article_titles_list.html b/majak_uistyleguide/templates/patterns/organisms/articles/article_titles_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..b69bf4d6ad54edfe10b9a6eb2dd0301e3aa97eb8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/article_titles_list.html
@@ -0,0 +1,18 @@
+<div class="flex justify-center">
+ <div class="container--wide w-full">
+ <div class="flex flex-col gap-8 mb-16">
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+ {% include 'patterns/molecules/articles/article_title_preview.html' %}
+ {% include 'patterns/molecules/articles/article_title_preview.html' %}
+ {% include 'patterns/molecules/articles/article_title_preview.html' %}
+ {% include 'patterns/molecules/articles/article_title_preview.html' %}
+ {% include 'patterns/molecules/articles/article_title_preview.html' %}
+ {% include 'patterns/molecules/articles/article_title_preview.html' %}
+ </div>
+
+ <div class="flex justify-center">
+ {% include 'patterns/atoms/buttons/round_button.html' with button_text='Další články' %}
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/district/articles_section.html b/majak_uistyleguide/templates/patterns/organisms/articles/district/articles_section.html
index e6f619a20fe0208bf2edf2c0c4a1f96993e25540..b20a3c54b2c46c6f3de32f3e90733c2a9ea8ca2f 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/district/articles_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/district/articles_section.html
@@ -1,3 +1,9 @@
{% extends 'patterns/organisms/articles/articles_section.html' %}
{% block description_classes %}max-w-[400px] text-xl{% endblock %}
+
+{% block button_wrapper_classes %}
+ flex justify-center pt-12 pb-20
+
+ xl:py-24
+{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_primary_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_primary_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..45c3e9e95aad34a577884cd720f7ed7f409b6896
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_primary_list.html
@@ -0,0 +1,11 @@
+<ul
+ class="candidate-primary-list __js-root"
+ id="{{ id }}"
+>
+ {% include "patterns/molecules/candidates/candidate_primary_box.html" %}
+ {% include "patterns/molecules/candidates/candidate_primary_box.html" %}
+ {% include "patterns/molecules/candidates/candidate_primary_box.html" %}
+ {% include "patterns/molecules/candidates/candidate_primary_box.html" %}
+ {% include "patterns/molecules/candidates/candidate_primary_box.html" %}
+ {% include "patterns/molecules/candidates/candidate_primary_box.html" %}
+</ul>
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_secondary_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_secondary_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..143b300f90182185682233c4e9c6d28c5855a9a9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_secondary_list.html
@@ -0,0 +1,70 @@
+<div class="bg-grey-180">
+ <ul class="candidate-secondary-list pt-14 pb-16">
+ <div class="container--wide">
+ <h2 class="head-7xl mb-3">{{ heading }}</h2>
+ </div>
+
+ {% for candidate in candidates %}
+ <li class="candidate-secondary-box container--wide">
+ <a
+ href="{{ candidate.url }}"
+ class="
+ py-2 flex gap-6 items-center underline-offset-2
+ "
+ >
+ <div class="font-bold text-xl w-8">
+ {{ candidate.number }}
+ </div>
+
+ <div
+ class="
+ flex grow-1 shrink-0 font-bold justify-center items-center rounded-full
+ "
+ >
+ <img
+ class="w-12 object-cover"
+ src="{{ candidate.image_source }}"
+ >
+ </div>
+
+ <div
+ class="
+ flex gap-2 flex-col
+
+ lg:gap-6 lg:flex-row
+ "
+ >
+ <h4
+ class="text-xl font-bold w-64"
+ >{{ candidate.name }}</h4>
+
+ {% if candidate.position %}
+ <p class="lg:ml-6">
+ {{ candidate.position }}
+ </p>
+ {% endif %}
+
+ {% if candidate.party_membership %}
+ <div
+ class="
+ font-bold flex items-center gap-1
+
+ lg:ml-auto
+ "
+ >
+ {% if candidate.party_membership == "Pirátská strana" %}
+ <img
+ class="w-8"
+ src="../../../../../static/images/logo-round-black.svg"
+ >
+ {% endif %}
+
+ {{ candidate.party_membership }}
+ </div>
+ {% endif %}
+ </div>
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/district/candidate_secondary_list.yaml b/majak_uistyleguide/templates/patterns/organisms/candidates/candidate_secondary_list.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/organisms/candidates/district/candidate_secondary_list.yaml
rename to majak_uistyleguide/templates/patterns/organisms/candidates/candidate_secondary_list.yaml
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/district/candidate_secondary_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/district/candidate_secondary_list.html
deleted file mode 100644
index 8a02bb72e49a32ada7b173aff62d857ec38ff8fa..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/organisms/candidates/district/candidate_secondary_list.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<div class="bg-grey-180">
- <ul class="candidate-secondary-list pt-14 pb-16">
- <div class="container--wide">
- <h2 class="head-7xl mb-3">{{ heading }}</h2>
- </div>
-
- {% for candidate in candidates %}
- <li class="candidate-secondary-box container--wide">
- <a
- href="{{ candidate.url }}"
- class="
- py-2 flex gap-6 items-center underline-offset-2
- "
- >
- <div class="font-bold text-xl w-8">
- {{ candidate.number }}
- </div>
-
- <div
- class="
- flex font-bold justify-center items-center rounded-full
- "
- >
- <img
- class="w-12 object-cover"
- src="{{ candidate.image_source }}"
- >
- </div>
-
- <h4
- class="text-xl font-bold w-64"
- >{{ candidate.name }}</h4>
-
- {% if candidate.position %}
- <p class="ml-6">
- {{ candidate.position }}
- </p>
- {% endif %}
-
- {% if candidate.party_membership %}
- <div class="ml-auto font-bold flex items-center gap-1">
- {% if candidate.party_membership == "Pirátská strana" %}
- <img
- class="w-8"
- src="../../../../../static/images/logo-round-black.svg"
- >
- {% endif %}
-
- {{ candidate.party_membership }}
- </div>
- {% endif %}
- </a>
- </li>
- {% endfor %}
- </ul>
-</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/candidates/elections/candidate_primary_list.html b/majak_uistyleguide/templates/patterns/organisms/candidates/elections/candidate_primary_list.html
deleted file mode 100644
index a97ec30ab098e6d3b8b75fe98e06ed803e095235..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/organisms/candidates/elections/candidate_primary_list.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<ul
- class="candidate-primary-list __js-root"
- id="{{ id }}"
->
- {% include "patterns/molecules/candidates/elections/candidate_primary_box.html" %}
- {% include "patterns/molecules/candidates/elections/candidate_primary_box.html" %}
- {% include "patterns/molecules/candidates/elections/candidate_primary_box.html" %}
- {% include "patterns/molecules/candidates/elections/candidate_primary_box.html" %}
- {% include "patterns/molecules/candidates/elections/candidate_primary_box.html" %}
- {% include "patterns/molecules/candidates/elections/candidate_primary_box.html" %}
-</ul>
diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html
index 162341f68828aaab8758e5ce0ad0790fc45de1ae..e8f85fe80dcd381bdf0415b80e0dbfe9f5423b43 100644
--- a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html
@@ -1,5 +1,5 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
{% for card in cards %}
- {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url content=card.content button_text=card.button_text %}
+ {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url background_url=card.background_url title_color=card.title_color content=card.content button_text=card.button_text %}
{% endfor %}
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml
index 6884696e40af56de35377dcbbb197822c86957f3..1d5c3aa337ebb41a52863728027c9d8de16e7419 100644
--- a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml
@@ -4,7 +4,8 @@ context:
title: |-
Staň se členkou
nebo členem
- image_url: '../../../../../static/images/onboarding/member.webp'
+ title_color: 'red'
+ background_url: '../../../../../static/images/onboarding/member.webp'
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/article_header.html b/majak_uistyleguide/templates/patterns/organisms/header/article_header.html
index 2692d4195167d0fbaca61fea0eefc1cddced31c9..6256d62f9691bc5d01667c083c8ea7c6d2007d2f 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/article_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/article_header.html
@@ -4,4 +4,9 @@
{% include 'patterns/atoms/header/navigation.html' with classes='mb-6' first_text=first_nav_text second_text=second_nav_text second_link=second_link %}
{% endblock %}
+{% block after_heading %}
+ {% include 'patterns/atoms/articles/header_author.html' %}
+ {% include 'patterns/molecules/tags/tags.html' with classes='mb-4 mt-4' %}
+{% endblock %}
+
{% block heading_classes %}head-8xl{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/article_header.yaml b/majak_uistyleguide/templates/patterns/organisms/header/article_header.yaml
index d43f79cc82be3760f20b7ac4d25a8a469bfac6a3..fb36b3ef7c4727205d809484a036a2f1d8e18ce9 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/article_header.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/header/article_header.yaml
@@ -6,4 +6,4 @@ context:
second_link: '#'
sub_heading: 'Podtitulek'
has_navigation: false
- has_tags: false
+ has_tags: false
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/articles_header.html b/majak_uistyleguide/templates/patterns/organisms/header/articles_header.html
index 75b55f75775aa074b640a355f6086bdacf9b8b85..b01ab8d770d20ce7f23dcdcf8b3864da4bcc33ec 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/articles_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/articles_header.html
@@ -1,7 +1,11 @@
{% extends 'patterns/organisms/header/simple_header_with_tags.html' %}
+{% block header_margin_class %}
+ mb-10
+{% endblock %}
+
{% block classes %}
- bg-black flex items-center w-full mb-10 pt-28 pb-8
+ bg-black flex items-center w-full pt-28 pb-8
md:mb-16
@@ -11,7 +15,7 @@
{% endblock %}
{% block after_heading %}
- {% include 'patterns/molecules/tags/tags.html' with classes='mb-4' %}
+ {% include 'patterns/molecules/tags/tags.html' with classes='mb-4' size_classes='' %}
<div class="flex justify-start">
<input
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html b/majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html
new file mode 100644
index 0000000000000000000000000000000000000000..36c17d4b4b5631827a201d7e0ba569110981f448
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html
@@ -0,0 +1,102 @@
+{% extends 'patterns/organisms/header/simple_header.html' %}
+
+{% block header_margin_class %}{% endblock %}
+
+{% block after_header %}
+ <div
+ class="
+ bg-pirati-yellow py-4
+ "
+ >
+ <div class="container--wide">
+ {% include "patterns/atoms/buttons/round_button.html" with button_text="Zobrazit na mapě" id="map-opener" %}
+ </div>
+ </div>
+
+ <div
+ class="
+ opacity-0 absolute top-0 left-0 overflow-hidden
+
+ py-8
+
+ bg-pirati-yellow
+ "
+ id="address-popup"
+ data-is-open="false"
+ >
+ <div
+ class="
+ container--wide flex flex-col gap-4
+
+ lg:flex-row lg:justify-between
+ "
+ >
+ <div
+ class="prose prose-black leading-6"
+ >
+ <address>
+ <div class="mb-3">
+ <strong>
+ K Pirátskému centru je možné se dostat autobusy č. 13, 15 a 17,<br>
+ s výstupem na stanici Želivského.
+ </strong>
+ </div>
+
+ <div class="whitespace-pre-line">Mozilla Foundation
+331 E Evelyn Ave
+Mountain View, CA 94041
+USA</div>
+ </address>
+ </div>
+
+ <div
+ class="
+ w-full [&_*]:mt-0
+
+ lg:w-[35rem]
+ "
+ >
+ <!-- Placeholder instead of map -->
+ <img
+ class="w-full mt-8"
+ src="https://picsum.photos/536/354"
+ >
+ </div>
+ </div>
+ </div>
+
+ <script>
+ document.getElementById("map-opener").addEventListener(
+ "click",
+ (event) => {
+ const addressPopup = document.getElementById("address-popup");
+
+ if (addressPopup.dataset.isOpen === "false") {
+ document.getElementById(`${event.currentTarget.id}-inner-text`).innerHTML = "Uzavřít mapu"
+
+ addressPopup.dataset.isOpen = "true";
+ addressPopup.classList.remove("absolute");
+ addressPopup.classList.remove("top-0");
+ addressPopup.classList.remove("left-0");
+ addressPopup.classList.add("duration-300");
+ addressPopup.classList.remove("opacity-0");
+
+ // For some reason, this can't run immediately
+ setTimeout(
+ () => { addressPopup.scrollIntoView() },
+ 1
+ )
+ } else {
+ document.getElementById(`${event.currentTarget.id}-inner-text`).innerHTML = "Zobrazit na mapě"
+
+ addressPopup.dataset.isOpen = "false";
+ addressPopup.classList.add("absolute");
+ addressPopup.classList.add("top-0");
+ addressPopup.classList.add("left-0");
+ addressPopup.classList.remove("duration-300");
+ addressPopup.classList.add("opacity-0");
+ }
+ }
+ )
+ </script>
+{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/district/elections_header.html b/majak_uistyleguide/templates/patterns/organisms/header/district/elections_header.html
index 096578bb9849b7fbe20cbad2cef2325e00559340..73febef6a653e46edcd95a3069a07c64b31f41c9 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/district/elections_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/district/elections_header.html
@@ -1,5 +1,7 @@
{% extends 'patterns/organisms/header/simple_header_with_ui_switch.html' %}
+{% block header_margin_class %}{% endblock %}
+
{% block classes %}
bg-black flex items-center w-full pt-28 pb-8
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html
new file mode 100644
index 0000000000000000000000000000000000000000..75d83800d3651b1ca1942ae75bca9b94058e9454
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html
@@ -0,0 +1,83 @@
+<header
+ class="
+ flex items-center mb-4 w-full pt-96 pb-16
+ bg-no-repeat bg-cover bg-center bg-blend-darken bg-[top_right_-7rem] bg-[#00000088]
+ xl:mb-20 xl:bg-center xl:py-52
+ "
+ style="background-image: url('../../../../../static/images/background-images/bg-bartos.jpg')"
+>
+ <div class="container--wide w-full">
+ <div class="text-white flex flex-col">
+ {% include 'patterns/atoms/header/navigation.html' with classes='mb-10' first_text='Lidé' second_text='Sněmovna' %}
+
+ <div
+ class="
+ flex gap-12 flex-nowrap flex-col
+
+ lg:flex-row
+ "
+ >
+ <img
+ class="rounded-full w-52 h-52"
+ src="../../../../../static/images/person-table.png"
+ alt="Profilový obrázek"
+ >
+
+ <div class="flex flex-col">
+ <span
+ class="
+ text-xl font-alt
+ sm:text-4xl
+ "
+ >{{ degree_before }}</span>
+
+ <div class="flex items-baseline flex-col xl:flex-row font-alt">
+ <h1 class="font-alt text-6xl xl:text-9xl grow xl:grow-0">{{ name }}</h1>
+
+ <span class="text-2xl xl:text-4xl">
+ <span class="hidden xl:inline">, </span>{{ degree_after }}
+ </span>
+ </div>
+
+ <span
+ class="
+ text-lg font-bold mt-8
+ xl:mt-[-0.7rem]
+ "
+ >{{ function }}</span>
+
+ <span
+ class="
+ text-lg font-bold mt-8
+ "
+ >
+ {% if is_pirate %}
+ <div class="flex gap-3 items-center">
+ <img
+ src="../../../../../static/images/badge.png"
+ alt="Logo Pirátské strany"
+ width="35"
+ height="35"
+ >
+
+ Člen(ka) Pirátské strany
+ </div>
+ {% else %}
+ <div class="flex gap-3 items-center">
+ <img
+ src="../../../../../static/images/badge_other.png"
+ alt="Logo strany '{{ other_party_name }}'"
+ width="35"
+ height="35"
+ >
+
+ {{ other_party_name }}
+ </div>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ </span>
+ </div>
+ </div>
+</header>
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.yaml b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..341d2938b5b901d2f895b2dd374b49db323582d1
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.yaml
@@ -0,0 +1,7 @@
+context:
+ degree_before: 'Ing.'
+ name: 'Ivan Bartoš'
+ degree_after: 'PhDr. et PhD'
+ function: 'Poslanec PSP ČR za Ústecký kraj, lídr Pirátů a ministr pro místní rozvoj'
+ is_pirate: False
+ other_party_name: 'Strana Zelených'
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/elections/articles_header.html b/majak_uistyleguide/templates/patterns/organisms/header/elections/articles_header.html
index 573d4f6f444b115398633cf0405113b8032b312c..4f1b840b98ef847caa518ae2c7510d712eba1595 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/elections/articles_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/elections/articles_header.html
@@ -1,7 +1,11 @@
{% extends 'patterns/organisms/header/elections/simple_header_with_tags.html' %}
+{% block header_margin_class %}
+ mb-10
+{% endblock %}
+
{% block classes %}
- bg-pirati-yellow flex items-center w-full mb-10 pt-28 pb-8
+ bg-pirati-yellow flex items-center w-full pt-28 pb-8
md:mb-16
@@ -11,7 +15,7 @@
{% endblock %}
{% block after_heading %}
- {% include 'patterns/molecules/tags/tags.html' with classes='mb-4' tag_color_classes='bg-black text-white' %}
+ {% include 'patterns/molecules/tags/tags.html' with classes='mb-4' tag_color_classes='bg-black text-white' size_classes='' %}
<div class="flex justify-start">
<input
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/elections/candidate_header.html b/majak_uistyleguide/templates/patterns/organisms/header/elections/candidate_header.html
index 66723435254daa3f49dc6106abe4a42c0d1bc2b3..06f6bbffcd0131d17c47f7f3cab8578cd01f0f41 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/elections/candidate_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/elections/candidate_header.html
@@ -1,5 +1,7 @@
{% extends 'patterns/organisms/header/elections/simple_header.html' %}
+{% block header_margin_class %}{% endblock %}
+
{% block classes %}
bg-pirati-yellow flex items-center w-full pt-28 pb-8
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/elections/candidates_header.html b/majak_uistyleguide/templates/patterns/organisms/header/elections/candidates_header.html
index 04e15de78fc06ad1118220c72ef66517997c2ace..6e3afb00712b38986384ae3ad763bff11643a9e3 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/elections/candidates_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/elections/candidates_header.html
@@ -1,5 +1,7 @@
{% extends 'patterns/organisms/header/elections/simple_header.html' %}
+{% block header_margin_class %}{% endblock %}
+
{% block classes %}
bg-pirati-yellow flex items-center w-full pt-28 pb-8
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/elections/simple_header.html b/majak_uistyleguide/templates/patterns/organisms/header/elections/simple_header.html
index 185258399e3da590f559f47239bae42b09ada373..455f20f941119b142bd55027e412e6eea210460c 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/elections/simple_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/elections/simple_header.html
@@ -1,7 +1,7 @@
{% extends 'patterns/organisms/header/simple_header.html' %}
{% block classes %}
- bg-pirati-yellow flex items-center w-full mb-20 pt-28 pb-8
+ bg-pirati-yellow flex items-center w-full pt-28 pb-8
xl:pt-48 xl:pb-24
@@ -14,7 +14,7 @@
{% if is_short %}head-short{% endif %}
{% if description %}
- head-8xl
+ {% if title|length <= 100 %}head-8xl{% else %}head-7xl{% endif %}
{% else %}
head-14xl
{% endif %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/people_header.html b/majak_uistyleguide/templates/patterns/organisms/header/people_header.html
index 5e777762d3c07588760e0a2c4933a0362ffc4dad..5f3c435bea7bdb878b09235fd06ae42c0347171a 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/people_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/people_header.html
@@ -1,6 +1,6 @@
{% extends 'patterns/organisms/header/simple_header_with_ui_switch.html' %}
-{% block extra_classes %}xl:pt-32 xl:pb-16{% endblock %}
+{% block extra_classes %}xl:pt-32 xl:pb-16 mb-20{% endblock %}
{% block description %}
<div
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/people_header.yaml b/majak_uistyleguide/templates/patterns/organisms/header/people_header.yaml
index 1b8178d3614fbdae63cdf208d968b641c25b373e..c63e37c706504b4d4080050cf4721db86ca75cbb 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/people_header.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/header/people_header.yaml
@@ -5,8 +5,8 @@ context:
<br>
Následovala řada dalších témat, která se stala součástí politického programu Pirátů: upozornili na řadu korupčních skandálů, prosadili zveřejňování materiálů ze zastupitelstvech a odmítli omezování svobod v reálném i online prostoru.'
description_column_2: 'Piráti dnes vystupují ve všech patrech politiky a pokrývají veškerá politická a společenská témata. Jsou stranou liberálního středu, kladou důraz na diskusi, transparentnost a rozhodování na základě dat a informací. Piráti zastupují občany ČR na všech úrovních politiky. Na komunální úrovni působí od roku 2014, v krajských zastupitelstvech od roku 2016. Ve druhém volebním období působí v Poslanecké sněmovně a od roku 2018 hájí Piráti ČR v Evropském parlamentu. Piráti mají aktuálně 1205 členů.'
- choice_1: 'Poslanecká sněmovna'
- choice_2: 'Vláda'
- choice_3: 'Jiná skupina'
- choice_4: 'Jiná skupina dvě'
- choice_5: 'Týmy'
+ choice_1: 'Poslanecká sněmovna AAAAAAAAAAAAAAAAAAAAAAAAAa'
+ choice_2: 'Vláda AAAAAAAAAAAAAAAAAAAAAAAAAa'
+ choice_3: 'Jiná skupina AAAAAAAAAAAAAAAAAAAAAAAAAa'
+ choice_4: 'Jiná skupina dvě AAAAAAAAAAAAAAAAAAAAAAAAAa'
+ choice_5: 'Týmy AAAAAAAAAAAAAAAAAAAAAAAAAa'
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html b/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
index f96838c81f104a9a7453bb53a8aa93a7c9c49070..6a15547356f3d5dc2dd9a04e9c26dead2d05b832 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
@@ -1,63 +1,75 @@
+{% block before_header_tag %}{% endblock %}
+
<header
class="
- {% block classes %}
- bg-black flex items-center w-full mb-20 pt-28 pb-8
-
- xl:pt-48 xl:pb-24
+ flex flex-col z-100 relative
- {% block extra_classes %}{% endblock %}
+ {% block header_margin_class %}
+ mb-20
{% endblock %}
"
>
- <div class="flex justify-start w-full">
- <div class="container--wide w-full">
- {% block content %}
- <div class="text-white flex flex-col">
- {% block before_heading %}{% endblock %}
-
- {% block heading %}
- <h1
- class="
- {% block heading_classes %}
- mb-1
-
- {% if is_short %}head-short{% endif %}
-
- {% if description %}
- head-8xl
- {% else %}
- head-14xl
- {% endif %}
- {% endblock %}
- "
- >
- {{ title|safe }}
- </h1>
- {% endblock %}
-
- {% block after_heading %}{% endblock %}
-
- {% block description %}
- {% if description %}
- <p
- class="
- font-semibold text-lg leading-7 pr-4
+ <div
+ class="
+ {% block classes %}
+ bg-black flex items-center w-full pt-28 pb-8
+
+ xl:pt-48 xl:pb-24
- xl:pr-0
+ {% block extra_classes %}{% endblock %}
+ {% endblock %}
+ "
+ >
+ <div class="flex justify-start w-full">
+ <div class="container--wide w-full">
+ {% block content %}
+ <div class="text-white flex flex-col">
+ {% block before_heading %}{% endblock %}
+
+ {% block heading %}
+ <h1
+ class="
+ {% block heading_classes %}
+ mb-1
- lg:max-w-screen-lg
+ {% if is_short %}head-short{% endif %}
- {% block description_classes %}{% endblock %}
+ {% if description and not override_title_size %}
+ head-10xl
+ {% else %}
+ head-14xl
+ {% endif %}
+ {% endblock %}
"
>
- {{ description }}
- </p>
- {% endif %}
- {% endblock %}
+ {{ title|safe }}
+ </h1>
+ {% endblock %}
- {% block after_description %}{% endblock %}
- </div>
- {% endblock %}
+ {% block after_heading %}{% endblock %}
+
+ {% block description %}
+ {% if description %}
+ <p
+ class="
+ text-lg leading-7 pr-4 whitespace-pre-line
+
+ xl:pr-0
+
+ lg:max-w-screen-lg
+
+ {% block description_classes %}{% endblock %}
+ "
+ >{{ description }}</p>
+ {% endif %}
+ {% endblock %}
+
+ {% block after_description %}{% endblock %}
+ </div>
+ {% endblock %}
+ </div>
</div>
</div>
+
+ {% block after_header %}{% endblock %}
</header>
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/organisms/header/simple_header_with_ui_switch.html b/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
index 3ba50b3d56a03cae26047568dad73208f6308dc1..c88b6f2095de8f638d84376b758a43bb2975e65b 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
@@ -1,5 +1,7 @@
{% extends 'patterns/organisms/header/simple_header.html' %}
+{% block header_margin_class %}{% endblock %}
+
{% block after_description %}
<div
class="
@@ -8,7 +10,11 @@
"
>
<ui-horizontal-scrollable
- classes="switch overflow-x-scroll flex gap-2 w-[calc(100vw_-_3rem)] lg:w-[unset]"
+ classes="
+ switch overflow-x-scroll flex gap-x-2 gap-y-1 w-[calc(100vw_-_3rem)]
+
+ lg:overflow-x-hidden lg:flex-wrap lg:w-[unset]
+ "
arrow-position="bottom"
>
{% block switch %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html
index 67f8d6dbe02e076da95cddf6fd9a731f75d7fd5a..aec6282609aefe6d710e323920a31bfedd243641 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html
@@ -1,6 +1,71 @@
{% extends 'patterns/organisms/layout/navbar.html' %}
{% block navbar_logo_images %}
- <img class="navbar__logo--white w-[200px] lg:w-[250px]" src="{{ white_logo_image_url }}" alt="">
- <img class="navbar__logo--black w-[200px] lg:w-[250px]" src="{{ black_logo_image_url }}" alt="">
+ <div
+ class="
+ gap-3 flex-row flex-nowrap items-center
+
+ navbar__logo--white
+ navbar__district__logo
+ "
+ >
+ <img class="w-[160px] lg:w-[190px]" src="{{ white_logo_image_url }}" alt="">
+
+ <div class="font-alt text-xl w-[100px]">
+ {{ region_name }}
+ </div>
+ </div>
+
+ <div
+ class="
+ gap-3 flex-row flex-nowrap items-center
+
+ navbar__logo--black
+ navbar__district__logo
+ "
+ >
+ <img class="w-[160px] lg:w-[190px]" src="{{ black_logo_image_url }}" alt="">
+
+ <div class="font-alt text-xl w-[100px]">
+ {{ region_name }}
+ </div>
+ </div>
{% endblock %}
+
+{% block after_desktop_search %}
+ <div class="w-24 h-11 min-w-[9rem]">
+ <a
+ href="{{ calendar_button_url }}"
+ class="
+ navbar__border-button
+
+ font-alt flex items-center justify-center border-none border-4 w-24 h-11 py-4 px-3 duration-150 cursor-pointer text-lg gap-1
+
+ hover:no-underline
+
+ xl:w-auto
+ "
+ >
+ <i class="ico--calendar"></i>
+
+ {{ calendar_button_text }}
+ </a>
+ </div>
+{% endblock %}
+
+{% block menu_items %}
+ {% for item in menu_items %}
+ <a
+ href="{{ item.url }}"
+ class="
+ decoration-1 underline-offset-4 mx-2
+
+ {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+ "
+ >{{ item.name }}</a>
+ {% endfor %}
+
+ {% for parent in menu_parents %}
+ {% include "patterns/molecules/dropdown/dropdown.html" with name=parent.name menu_items=parent.menu_items %}
+ {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml
index ccd72e7dc3b0fb52c7ce8600e9a766ff301c2c42..ef62c3e9a67e73ee6346d10b27a5ce6a2912b18b 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml
@@ -1,4 +1,6 @@
context:
+ region_name: 'Pardubický kraj'
+
menu_button: 'Zapojte se'
logo_url: '#'
@@ -29,6 +31,17 @@ context:
name: 'Kontakt'
url: '#'
+ menu_parents:
+ -
+ name: 'Volby'
+ menu_items:
+ -
+ name: 'Aktuality'
+ url: '#'
+ -
+ name: 'Lidé'
+ url: '#'
+
important_item: 'Krajské volby'
important_item_url: 'https://example.com'
@@ -57,3 +70,6 @@ context:
white_logo_image_url: '../../../../../../static/images/district/logo-full-white.svg'
black_logo_image_url: '../../../../../../static/images/district/logo-full-black.svg'
+
+ calendar_button_text: 'Kalendář akcí'
+ calendar_button_url: 'https://example.com'
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/main/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/main/navbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..4d370f75a3d7085aaec100e67d524e778de987f3
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/main/navbar.html
@@ -0,0 +1,13 @@
+{% extends 'patterns/organisms/layout/navbar.html' %}
+
+{% block navbar_menu_button %}
+ {% if additional_buttons %}
+ <div class="flex gap-6 ml-2">
+ {% block navbar_menu_button_additional_buttons %}
+ {% for button in additional_buttons %}
+ {% include 'patterns/molecules/navbar/additional_button.html' with extra_classes='navbar__border-button--main' %}
+ {% endfor %}
+ {% endblock %}
+ </div>
+ {% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
index 84ce6776c2a912c2ae993141cb83ae4c0d195c08..230682dd8a89090248ead78574b292b4241f5379 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
@@ -17,7 +17,7 @@
<div class="flex items-center xl:items-start">
<!-- BEGIN Logo-->
- <a href="{{ logo_url }}" class="z-20 xl:mt-2">
+ <a href="{{ logo_url }}" class="z-20 xl:mt-2 hover:no-underline">
{% block navbar_logo_images %}
<img class="navbar__logo--white w-[150px] lg:w-[180px]" src="{{ white_logo_image_url }}" alt="">
<img class="navbar__logo--black w-[150px] lg:w-[180px]" src="{{ black_logo_image_url }}" alt="">
@@ -39,19 +39,25 @@
</div>
{% block desktop_search %}
- {% include 'patterns/atoms/form_fields/form_input_backgroundless.html' with placeholder='Hledej' classes='text-black px-2 py-1 w-80' %}
+ {% include 'patterns/atoms/form_fields/form_input_backgroundless.html' with placeholder='Hledej' classes='text-black px-2 py-1 w-60' %}
{% endblock %}
+
+ {% block after_desktop_search %}{% endblock %}
</div>
<!-- END Social media -->
<!-- BEGIN Menu -->
<div
- class="flex text-2xl gap-8 font-alt items-center justify-end"
+ class="flex text-2xl gap-4 font-alt items-center justify-end"
>
{% if important_item %}
<a
href="{{ important_item_url }}"
- class="__js-root flex gap-1 items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
+ class="
+ __js-root mx-2 flex gap-1 items-center decoration-1 underline-offset-4
+
+ {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}
+ "
>
<div class="mb-1">
{% if not is_transparent or is_on_dark_background %}
@@ -73,12 +79,18 @@
</a>
{% endif %}
- {% for item in menu_items %}
- <a
- href="{{ item.url }}"
- class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
- >{{ item.name }}</a>
- {% endfor %}
+ {% block menu_items %}
+ {% for item in menu_items %}
+ <a
+ href="{{ item.url }}"
+ class="
+ decoration-1 underline-offset-4 mx-2
+
+ {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+ "
+ >{{ item.name }}</a>
+ {% endfor %}
+ {% endblock %}
{% if menu_button %}
{% if additional_buttons or menu_button_url %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.yaml b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.yaml
index fd401e3a4a2d456283a9876709802bd045592a18..317b43c058e6091315ed52097800f36b2a846460 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.yaml
@@ -20,7 +20,7 @@ context:
name: 'Aktuality'
url: '#'
-
- name: 'Progran'
+ name: 'Program'
url: '#'
-
name: 'Kdo jsme'
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/district/calendar.yaml b/majak_uistyleguide/templates/patterns/organisms/main_section/district/calendar.yaml
index 762502a3e32eb3808dd29ee894605edf627385a8..12d9eb1f3acffd65f661345129940c5bac4ac562 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/district/calendar.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/district/calendar.yaml
@@ -1,7 +1,3 @@
context:
title: 'Kalendář'
- calendar_data: '[
- {"title": "event 1", "start": "2023-11-21T09:30:00.000Z", "url": "https://example.com"},
- {"title": "event 2", "start": "2023-11-21", "url": "https://example.com"},
- {"title": "event 3", "start": "2023-11-22T09:00:00.000Z", "description": "Lorem ipsum...", "location": "https://jitsi.pirati.cz"}
- ]'
+ calendar_data: '[{"allDay": false, "start": "2024-05-05T18:00:00+02:00", "end": "2024-05-05T21:00:00+02:00", "title": "PubQuiz", "location": "Praha, \u010cesko"}, {"allDay": true, "start": "2024-05-04T00:00:00+02:00", "end": "2024-05-05T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Litomy\u0161l, 570 01 Litomy\u0161l, \u010cesko"}, {"allDay": true, "start": "2024-05-03T00:00:00+02:00", "end": "2024-05-04T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Liberec, \u010cesko"}, {"allDay": true, "start": "2024-05-03T00:00:00+02:00", "end": "2024-05-04T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Karlovy Vary, \u010cesko"}, {"allDay": true, "start": "2024-05-02T00:00:00+02:00", "end": "2024-05-03T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Plze\u0148, \u010cesko"}, {"allDay": false, "start": "2024-05-01T12:00:00+02:00", "end": "2024-05-01T18:00:00+02:00", "title": "United Islands festival", "location": "St\u0159eleck\u00fd ostrov, 110 00 Praha-Praha 1, \u010cesko", "description": "<a href=\"https://www.instagram.com/p/C3-QDHCM-MB/?igsh=OWE5NXlmY3pqOHZw\" rel=\"noopener noreferrer\">instagram akce</a><a href=\"/\" rel=\"noopener noreferrer\"></a>"}, {"allDay": true, "start": "2024-05-01T00:00:00+02:00", "end": "2024-05-02T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "U Kolon\u00e1dy, Pod\u011bbrady"}, {"allDay": false, "start": "2024-04-30T14:00:00+02:00", "end": "2024-04-30T22:00:00+02:00", "title": "Zah\u00e1jen\u00ed kampan\u011b!", "location": "Mystic Skatepark \u0160tvanice, ostrov \u0160tvanice 170 00, 170 00 Praha 7, \u010cesko", "description": "<a href=\"https://www.facebook.com/events/954508859381882\" rel=\"noopener noreferrer\">facebook</a> ud\u00e1lost"}, {"allDay": true, "start": "2024-05-06T00:00:00+02:00", "end": "2024-05-07T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "T\u00e1bor, \u010cB, P\u00edsek"}, {"allDay": true, "start": "2024-05-06T00:00:00+02:00", "end": "2024-05-07T00:00:00+02:00", "title": "Posezen\u00ed s kandid\u00e1tem", "location": "Praha 7, \u010cesko"}, {"allDay": false, "start": "2024-05-06T11:00:00+02:00", "end": "2024-05-06T17:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Masarykovo N\u00e1m\u011bst\u00ed, 586 01 Jihlava 1, \u010cesko"}, {"allDay": true, "start": "2024-05-07T00:00:00+02:00", "end": "2024-05-08T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "P\u0159erov, \u010cesko"}, {"allDay": false, "start": "2024-05-07T07:00:00+02:00", "end": "2024-05-07T16:00:00+02:00", "title": "Pink\u00e1ra", "location": "Havl\u00ed\u010dk\u016fv Brod, n\u00e1dra\u017e\u00ed - Jihlava"}, {"allDay": true, "start": "2024-05-08T00:00:00+02:00", "end": "2024-05-09T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Krom\u011b\u0159\u00ed\u017e, Zl\u00edn"}, {"allDay": true, "start": "2024-05-08T00:00:00+02:00", "end": "2024-05-09T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Fr\u00fddek-M\u00edstek, \u010cesko"}, {"allDay": true, "start": "2024-05-09T00:00:00+02:00", "end": "2024-05-10T00:00:00+02:00", "title": "Den Evropy", "location": "N\u00e1m\u011bst\u00ed Republiky, Nov\u00e9 M\u011bsto, 110 00 Praha-Praha 1, \u010cesko"}, {"allDay": true, "start": "2024-05-10T00:00:00+02:00", "end": "2024-05-11T00:00:00+02:00", "title": "S Pir\u00e1ty se bav\u00ed\u0161 - sportovn\u00ed odpoledne", "location": "Ostrava, Lod\u011bnice"}, {"allDay": true, "start": "2024-05-11T00:00:00+02:00", "end": "2024-05-12T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Karvin\u00e1, Nov\u00fd Ji\u010d\u00edn, Opava"}, {"allDay": true, "start": "2024-05-11T00:00:00+02:00", "end": "2024-05-12T00:00:00+02:00", "title": "B\u011bh pro Pam\u011b\u0165 n\u00e1roda", "location": "Praha, \u010cesko"}, {"allDay": true, "start": "2024-05-11T00:00:00+02:00", "end": "2024-05-12T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Olomouc, \u010cesko"}, {"allDay": true, "start": "2024-05-12T00:00:00+02:00", "end": "2024-05-13T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Olomouc, Prost\u011bjov"}, {"allDay": true, "start": "2024-05-12T00:00:00+02:00", "end": "2024-05-13T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Hradec Kr\u00e1lov\u00e9, \u010cesko"}, {"allDay": false, "start": "2024-05-12T18:00:00+02:00", "end": "2024-05-12T22:00:00+02:00", "title": "PubQuiz", "location": "Hradec Kr\u00e1lov\u00e9, \u010cesko"}, {"allDay": true, "start": "2024-05-13T00:00:00+02:00", "end": "2024-05-14T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Vamberk, Rychnov, NM nad Metuj\u00ed"}, {"allDay": true, "start": "2024-05-13T00:00:00+02:00", "end": "2024-05-14T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Automatick\u00e9 ml\u00fdny, Pardubice"}, {"allDay": true, "start": "2024-05-14T00:00:00+02:00", "end": "2024-05-15T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Jilemnice, Turnov"}, {"allDay": true, "start": "2024-05-14T00:00:00+02:00", "end": "2024-05-15T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Kutn\u00e1 Hora "}, {"allDay": true, "start": "2024-05-15T00:00:00+02:00", "end": "2024-05-16T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Praha"}, {"allDay": false, "start": "2024-05-15T11:00:00+02:00", "end": "2024-05-15T17:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Havl\u00ed\u010dkovo n\u00e1m\u011bst\u00ed, Havl\u00ed\u010dk\u016fv Brod"}, {"allDay": true, "start": "2024-05-16T00:00:00+02:00", "end": "2024-05-17T00:00:00+02:00", "title": "S pir\u00e1ty se bav\u00ed\u0161 - Kulturn\u00ed odpoledne", "location": "N\u00e1m\u011bst\u00ed Svobody, Brno"}, {"allDay": true, "start": "2024-05-17T00:00:00+02:00", "end": "2024-05-18T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "NM na Morav\u011b, \u017d\u010f\u00e1r nad S\u00e1zavou... NMN Vratislavovo"}, {"allDay": true, "start": "2024-05-17T00:00:00+02:00", "end": "2024-05-18T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Zl\u00edn"}, {"allDay": true, "start": "2024-05-18T00:00:00+02:00", "end": "2024-05-19T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Praha, \u010cesko"}, {"allDay": true, "start": "2024-05-18T00:00:00+02:00", "end": "2024-05-19T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "B\u0159eclav, \u010cesko"}, {"allDay": true, "start": "2024-05-19T00:00:00+02:00", "end": "2024-05-20T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Nymburk, \u0158\u00ed\u010dany, \u010cerno\u0161ice"}, {"allDay": true, "start": "2024-05-19T00:00:00+02:00", "end": "2024-05-20T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Znojmo, \u010cesko"}, {"allDay": true, "start": "2024-05-20T00:00:00+02:00", "end": "2024-05-21T00:00:00+02:00", "title": "S pir\u00e1ty se bav\u00ed\u0161 - Relax z\u00f3na ", "location": "\u010cesk\u00e9 bud\u011bjovice, u po\u0161ty venku"}, {"allDay": true, "start": "2024-05-21T00:00:00+02:00", "end": "2024-05-22T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Praha"}, {"allDay": true, "start": "2024-05-21T00:00:00+02:00", "end": "2024-05-22T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Plze\u0148, Doma\u017elice"}, {"allDay": true, "start": "2024-05-22T00:00:00+02:00", "end": "2024-05-23T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Plze\u0148, Su\u0161ice"}, {"allDay": true, "start": "2024-05-22T00:00:00+02:00", "end": "2024-05-23T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Bene\u0161ov"}, {"allDay": true, "start": "2024-05-23T00:00:00+02:00", "end": "2024-05-24T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Litom\u011b\u0159ice "}, {"allDay": true, "start": "2024-05-23T00:00:00+02:00", "end": "2024-05-24T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Sokolov, Cheb, ML"}, {"allDay": true, "start": "2024-05-24T00:00:00+02:00", "end": "2024-05-25T00:00:00+02:00", "title": "S Pir\u00e1ty se bav\u00ed\u0161!", "location": "Kladno"}, {"allDay": true, "start": "2024-05-25T00:00:00+02:00", "end": "2024-05-26T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Pardubice - pod Ku\u0148kou"}, {"allDay": false, "start": "2024-05-25T15:00:00+02:00", "end": "2024-05-25T16:00:00+02:00", "title": "Pride pr\u016fvod", "location": "Zeln\u00fd trh, 602 00 Brno-st\u0159ed, \u010cesko", "description": "<a href=\"https://www.facebook.com/events/7412941205462208/?acontext=%7B%22event_action_history%22:[]%7D\" rel=\"noopener noreferrer\">Odkaz </a>na ud\u00e1lost"}, {"allDay": true, "start": "2024-05-26T00:00:00+02:00", "end": "2024-05-27T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "D\u011b\u010d\u00edn, \u010cesko"}, {"allDay": true, "start": "2024-05-26T00:00:00+02:00", "end": "2024-05-27T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Chrudim, cyklostezka"}, {"allDay": true, "start": "2024-05-27T00:00:00+02:00", "end": "2024-05-28T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "\u00dast\u00ed nad Labem, \u010cesko"}, {"allDay": true, "start": "2024-05-27T00:00:00+02:00", "end": "2024-05-28T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Ho\u0159ice, Ji\u010d\u00edn, Nov\u00e1 Paka"}, {"allDay": true, "start": "2024-05-28T00:00:00+02:00", "end": "2024-05-29T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Rakovn\u00edk, Slan\u00fd"}, {"allDay": true, "start": "2024-05-28T00:00:00+02:00", "end": "2024-05-29T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Karlovy Vary"}, {"allDay": true, "start": "2024-05-29T00:00:00+02:00", "end": "2024-05-30T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Praha"}, {"allDay": true, "start": "2024-05-29T00:00:00+02:00", "end": "2024-05-30T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Klatovy"}, {"allDay": true, "start": "2024-05-30T00:00:00+02:00", "end": "2024-05-31T00:00:00+02:00", "title": "S pir\u00e1ty se bav\u00ed\u0161 - D\u011btsk\u00fd den", "location": "Plze\u0148"}, {"allDay": true, "start": "2024-05-31T00:00:00+02:00", "end": "2024-06-01T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Ho\u0159ovice, Dob\u0159\u00ed\u0161, Mn\u00ed\u0161ek"}, {"allDay": true, "start": "2024-05-31T00:00:00+02:00", "end": "2024-06-01T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "P\u00edsek"}, {"allDay": true, "start": "2024-06-01T00:00:00+02:00", "end": "2024-06-02T00:00:00+02:00", "title": "S pir\u00e1ty se bav\u00ed\u0161 - D\u011btsk\u00fd den", "location": "Praha"}, {"allDay": true, "start": "2024-06-02T00:00:00+02:00", "end": "2024-06-03T00:00:00+02:00", "title": "Plavba po Berounce", "location": "Beroun"}, {"allDay": false, "start": "2024-06-02T14:00:00+02:00", "end": "2024-06-02T15:00:00+02:00", "title": "Sv\u011btov\u00e1 cykloj\u00edzda", "location": "Praha - magistr\u00e1la ", "description": "<a href=\"https://www.facebook.com/events/1126480395385415/?acontext=%7B%22event_action_history%22:[%7B%22surface%22:%22external_search_engine%22%7D,%7B%22mechanism%22:%22calendar_tab_event%22,%22surface%22:%22bookmark_calendar%22%7D],%22ref_notif_type%22:null%7D\" rel=\"noopener noreferrer\">Odkaz</a> na ud\u00e1lost"}, {"allDay": true, "start": "2024-06-03T00:00:00+02:00", "end": "2024-06-04T00:00:00+02:00", "title": "Rozd\u00e1v\u00e1n\u00ed", "location": "Praha - metra "}, {"allDay": true, "start": "2024-06-06T00:00:00+02:00", "end": "2024-06-07T00:00:00+02:00", "title": "Rozd\u00e1v\u00e1n\u00ed", "location": "Praha - metra"}]'
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.html b/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.html
index fd1bc2eac46460bb5c3fd9cd5a28edcbf118fa6b..2195f2b39c54e07e628e072f790bd513c375d83e 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.html
@@ -4,18 +4,40 @@
{{ title }}
</h2>
<div class="flex flex-col flex-wrap mb-12">
- <div class="flex gap-4 font-alt items-center">
- <div class="text-6xl flex items-center gap-2">
- {% include 'patterns/atoms/icons/arrow.html' with width="66.6" height="70" fill="#000" %}
+ <div class="
+ flex gap-1 font-alt flex-col
+
+ lg:gap-4 lg:flex-row lg:items-center
+ ">
+ <div
+ class="
+ text-4xl flex items-center gap-1
+
+ lg:text-6xl
+ "
+ >
+ <div class="lg:block hidden">
+ {% include 'patterns/atoms/icons/arrow.html' with width="66.6" height="70" fill="#000" %}
+ </div>
+
+ <div class="block lg:hidden">
+ {% include 'patterns/atoms/icons/arrow.html' with width="33.3" height="35" fill="#000" %}
+ </div>
<div class="leading-none mt-2">
Aktuálně zbývá
</div>
</div>
- <div class="p-4 text-6xl bg-black text-white">
- <div class="leading-none mt-2">
- 6 dní, 4 hodiny, 21 sekund
- </div>
+ <div
+ class="
+ text-4xl
+
+ lg:text-6xl
+ "
+ >
+ <span class="inline-block bg-black text-white p-4 leading-none mt-2 __js-root">
+ <ui-countdown to="{{ ending_time }}"></ui-countdown>
+ </span>
</div>
</div>
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.yaml b/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.yaml
index b5eeee46672b9946bb7713668cb4dab8a9a3755f..8bee967f21ba67e268d63b9e89efb6fa5dde6851 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/district/elections.yaml
@@ -2,3 +2,4 @@ context:
title: 'Krajské volby'
button_program_text: 'Zobrazit program'
button_candidates_text: 'Zobrazit kandidáty'
+ ending_time: "2024-05-30T14:00:00+02:00"
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/district/representatives_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/district/representatives_section.html
index 49c766b9226854c3cafd4452096b589b87f8eba8..477d564b0933bb5c405bb938cfd131cf3b0a436d 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/district/representatives_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/district/representatives_section.html
@@ -1,3 +1,3 @@
{% extends 'patterns/organisms/main_section/representatives_section.html' %}
-{% block wrapper_classes %}bg-black text-white pt-16{% endblock %}
+{% block wrapper_classes %}bg-black text-white xl:pt-16{% endblock %}
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/elections/calendar.yaml b/majak_uistyleguide/templates/patterns/organisms/main_section/elections/calendar.yaml
index 1b5eb161ca7624d150a34fdbc2fe84b9876a51da..d2118ff2980b32dd9013138ba88d648be1603e05 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/elections/calendar.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/elections/calendar.yaml
@@ -1,7 +1,3 @@
context:
title: 'Kalendář akcí'
- calendar_data: '[
- {"title": "event 1", "start": "2023-11-21T09:30:00.000Z", "url": "https://example.com"},
- {"title": "event 2", "start": "2023-11-21", "url": "https://example.com"},
- {"title": "event 3", "start": "2023-11-22T09:00:00.000Z", "description": "Lorem ipsum...", "location": "https://jitsi.pirati.cz"}
- ]'
+ calendar_data: '[{"allDay": true, "start": "2024-05-14T00:00:00+02:00", "end": "2024-05-15T00:00:00+02:00", "title": "Jilemnice, Turnov - Pink\u00e1ra", "location": "Jilemnice, Turnov"}, {"allDay": true, "start": "2024-05-13T00:00:00+02:00", "end": "2024-05-14T00:00:00+02:00", "title": "Pardubice - Pokoj\u00ed\u010dek", "location": "Automatick\u00e9 ml\u00fdny, Pardubice"}, {"allDay": true, "start": "2024-05-13T00:00:00+02:00", "end": "2024-05-14T00:00:00+02:00", "title": "Vamberk, Rychnov, Rychnov a N\u00e1chod - Pink\u00e1ra", "location": "Vamberk, Rychnov, NM nad Metuj\u00ed"}, {"allDay": false, "start": "2024-05-12T16:00:00+02:00", "end": "2024-05-12T17:30:00+02:00", "title": "Hradec Kr\u00e1lov\u00e9 - Debata N\u00e3PLAVKA caf\u00e9 & music bar", "location": "Hradec Kr\u00e1lov\u00e9, \u010cesko"}, {"allDay": true, "start": "2024-05-12T00:00:00+02:00", "end": "2024-05-13T00:00:00+02:00", "title": "Olomouc, Prost\u011bjov - Pink\u00e1ra", "location": "Olomouc, Prost\u011bjov"}, {"allDay": true, "start": "2024-05-11T00:00:00+02:00", "end": "2024-05-12T00:00:00+02:00", "title": "B\u011bh pro Pam\u011b\u0165 n\u00e1roda", "location": "Praha, \u010cesko"}, {"allDay": true, "start": "2024-05-11T00:00:00+02:00", "end": "2024-05-12T00:00:00+02:00", "title": "Karvin\u00e1 - Pink\u00e1ra", "location": "Karvin\u00e1, Nov\u00fd Ji\u010d\u00edn, Opava"}, {"allDay": true, "start": "2024-05-11T00:00:00+02:00", "end": "2024-05-12T00:00:00+02:00", "title": "Olomouc - Pokoj\u00ed\u010dek", "location": "Olomouc, \u010cesko"}, {"allDay": true, "start": "2024-05-10T00:00:00+02:00", "end": "2024-05-11T00:00:00+02:00", "title": "Ostrava - S Pir\u00e1ty se bav\u00ed\u0161 - sportovn\u00ed odpoledne", "location": "Ostrava, Lod\u011bnice"}, {"allDay": true, "start": "2024-05-09T00:00:00+02:00", "end": "2024-05-10T00:00:00+02:00", "title": "Praha - Den Evropy", "location": "N\u00e1m\u011bst\u00ed Republiky, Nov\u00e9 M\u011bsto, 110 00 Praha-Praha 1, \u010cesko"}, {"allDay": true, "start": "2024-05-08T00:00:00+02:00", "end": "2024-05-09T00:00:00+02:00", "title": "Fr\u00fddek-M\u00edstek - Pokoj\u00ed\u010dek", "location": "Fr\u00fddek-M\u00edstek, \u010cesko"}, {"allDay": true, "start": "2024-05-08T00:00:00+02:00", "end": "2024-05-09T00:00:00+02:00", "title": "Krom\u011b\u0159\u00ed\u017e - Pink\u00e1ra", "location": "Krom\u011b\u0159\u00ed\u017e, Zl\u00edn"}, {"allDay": false, "start": "2024-05-07T07:00:00+02:00", "end": "2024-05-07T16:00:00+02:00", "title": "Havl\u00ed\u010dk\u016fv Brod - Pink\u00e1ra", "location": "Havl\u00ed\u010dk\u016fv Brod, n\u00e1dra\u017e\u00ed - Jihlava"}, {"allDay": true, "start": "2024-05-07T00:00:00+02:00", "end": "2024-05-08T00:00:00+02:00", "title": "P\u0159erov - Pokoj\u00ed\u010dek", "location": "P\u0159erov, \u010cesko"}, {"allDay": false, "start": "2024-05-06T11:00:00+02:00", "end": "2024-05-06T17:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Masarykovo N\u00e1m\u011bst\u00ed, 586 01 Jihlava 1, \u010cesko"}, {"allDay": true, "start": "2024-05-06T00:00:00+02:00", "end": "2024-05-07T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "T\u00e1bor, \u010cB, P\u00edsek"}, {"allDay": false, "start": "2024-05-05T18:00:00+02:00", "end": "2024-05-05T21:00:00+02:00", "title": "PubQuiz", "location": "Praha, \u010cesko"}, {"allDay": true, "start": "2024-05-04T00:00:00+02:00", "end": "2024-05-05T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Litomy\u0161l, 570 01 Litomy\u0161l, \u010cesko"}, {"allDay": true, "start": "2024-05-03T00:00:00+02:00", "end": "2024-05-04T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Liberec, \u010cesko"}, {"allDay": true, "start": "2024-05-03T00:00:00+02:00", "end": "2024-05-04T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Karlovy Vary, \u010cesko"}, {"allDay": true, "start": "2024-05-02T00:00:00+02:00", "end": "2024-05-03T00:00:00+02:00", "title": "Pink\u00e1ra", "location": "Plze\u0148, \u010cesko"}, {"allDay": false, "start": "2024-05-01T12:00:00+02:00", "end": "2024-05-01T18:00:00+02:00", "title": "United Islands festival", "location": "St\u0159eleck\u00fd ostrov, 110 00 Praha-Praha 1, \u010cesko", "description": "<a href=\"https://www.instagram.com/p/C3-QDHCM-MB/?igsh=OWE5NXlmY3pqOHZw\" rel=\"noopener noreferrer\">instagram akce</a><a href=\"/\" rel=\"noopener noreferrer\"></a>"}, {"allDay": true, "start": "2024-05-01T00:00:00+02:00", "end": "2024-05-02T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "U Kolon\u00e1dy, Pod\u011bbrady"}, {"allDay": false, "start": "2024-04-30T14:00:00+02:00", "end": "2024-04-30T22:00:00+02:00", "title": "Zah\u00e1jen\u00ed kampan\u011b!", "location": "Mystic Skatepark \u0160tvanice, ostrov \u0160tvanice 170 00, 170 00 Praha 7, \u010cesko", "description": "<a href=\"https://www.facebook.com/events/954508859381882\" rel=\"noopener noreferrer\">facebook</a> ud\u00e1lost"}, {"allDay": false, "start": "2024-05-15T16:00:00+02:00", "end": "2024-05-15T18:00:00+02:00", "title": "Praha - kampus \u010cVUT Dejvice - Pink\u00e1ra", "location": "Praha"}, {"allDay": false, "start": "2024-05-15T18:00:00+02:00", "end": "2024-05-15T19:00:00+02:00", "title": "Praha 3 - PubQuiz", "location": "Pivnice U Sadu, \u0160kroupovo n\u00e1m. 1282/5, 130 00 Praha 3-\u017di\u017ekov, \u010cesko"}, {"allDay": false, "start": "2024-05-16T14:00:00+02:00", "end": "2024-05-16T20:00:00+02:00", "title": "Brno - S pir\u00e1ty se bav\u00ed\u0161 - Kulturn\u00ed odpoledne", "location": "N\u00e1m\u011bst\u00ed Svobody, Brno"}, {"allDay": false, "start": "2024-05-17T13:00:00+02:00", "end": "2024-05-17T19:00:00+02:00", "title": "Zl\u00edn - Pokoj\u00ed\u010dek", "location": "Park Komensk\u00e9ho"}, {"allDay": true, "start": "2024-05-19T00:00:00+02:00", "end": "2024-05-20T00:00:00+02:00", "title": "Nymburk, \u0158\u00ed\u010dany, \u010cerno\u0161ice - Pink\u00e1ra", "location": "Nymburk, \u0158\u00ed\u010dany, \u010cerno\u0161ice"}, {"allDay": true, "start": "2024-05-20T00:00:00+02:00", "end": "2024-05-21T00:00:00+02:00", "title": "\u010cesk\u00e9 Bud\u011bjovice - S pir\u00e1ty se bav\u00ed\u0161 - Relax z\u00f3na ", "location": "\u010cesk\u00e9 bud\u011bjovice, u po\u0161ty venku"}, {"allDay": true, "start": "2024-05-21T00:00:00+02:00", "end": "2024-05-22T00:00:00+02:00", "title": "Praha - Pokoj\u00ed\u010dek", "location": "Praha"}, {"allDay": true, "start": "2024-05-21T00:00:00+02:00", "end": "2024-05-22T00:00:00+02:00", "title": "Plze\u0148, Doma\u017elice - Pink\u00e1ra", "location": "Plze\u0148, Doma\u017elice"}, {"allDay": true, "start": "2024-05-22T00:00:00+02:00", "end": "2024-05-23T00:00:00+02:00", "title": "Bene\u0161ov - Pokoj\u00ed\u010dek", "location": "Bene\u0161ov"}, {"allDay": true, "start": "2024-05-22T00:00:00+02:00", "end": "2024-05-23T00:00:00+02:00", "title": "Plze\u0148, Su\u0161ice - Pink\u00e1ra", "location": "Plze\u0148, Su\u0161ice"}, {"allDay": true, "start": "2024-05-23T00:00:00+02:00", "end": "2024-05-24T00:00:00+02:00", "title": "Sokolov, Cheb, ML - Pink\u00e1ra", "location": "Sokolov, Cheb, ML"}, {"allDay": true, "start": "2024-05-23T00:00:00+02:00", "end": "2024-05-24T00:00:00+02:00", "title": "Pokoj\u00ed\u010dek", "location": "Litom\u011b\u0159ice "}, {"allDay": true, "start": "2024-05-24T00:00:00+02:00", "end": "2024-05-25T00:00:00+02:00", "title": "Kladno - S Pir\u00e1ty se bav\u00ed\u0161!", "location": "Kladno"}, {"allDay": true, "start": "2024-05-25T00:00:00+02:00", "end": "2024-05-26T00:00:00+02:00", "title": "Pardubice - Pink\u00e1ra", "location": "Pardubice - pod Ku\u0148kou"}, {"allDay": false, "start": "2024-05-25T15:00:00+02:00", "end": "2024-05-25T16:00:00+02:00", "title": "Brno - Pride pr\u016fvod", "location": "Zeln\u00fd trh, 602 00 Brno-st\u0159ed, \u010cesko", "description": "<a href=\"https://www.facebook.com/events/7412941205462208/?acontext=%7B%22event_action_history%22:[]%7D\" rel=\"noopener noreferrer\">Odkaz </a>na ud\u00e1lost"}, {"allDay": true, "start": "2024-05-26T00:00:00+02:00", "end": "2024-05-27T00:00:00+02:00", "title": "D\u011b\u010d\u00edn - Pokoj\u00ed\u010dek", "location": "D\u011b\u010d\u00edn, \u010cesko"}, {"allDay": true, "start": "2024-05-26T00:00:00+02:00", "end": "2024-05-27T00:00:00+02:00", "title": "Chrudim - Pink\u00e1ra", "location": "Chrudim, cyklostezka"}, {"allDay": true, "start": "2024-05-27T00:00:00+02:00", "end": "2024-05-28T00:00:00+02:00", "title": "Trutnov - Pink\u00e1ra", "location": "Ho\u0159ice, Ji\u010d\u00edn, Nov\u00e1 Paka"}, {"allDay": true, "start": "2024-05-27T00:00:00+02:00", "end": "2024-05-28T00:00:00+02:00", "title": "\u00dast\u00ed nad Labem - Pokoj\u00ed\u010dek", "location": "\u00dast\u00ed nad Labem, \u010cesko"}, {"allDay": true, "start": "2024-05-28T00:00:00+02:00", "end": "2024-05-29T00:00:00+02:00", "title": "Karlovy Vary - Pokoj\u00ed\u010dek", "location": "Karlovy Vary"}, {"allDay": true, "start": "2024-05-28T00:00:00+02:00", "end": "2024-05-29T00:00:00+02:00", "title": "Rakovn\u00edk, Slan\u00fd - Pink\u00e1ra", "location": "Rakovn\u00edk, Slan\u00fd"}, {"allDay": true, "start": "2024-05-29T00:00:00+02:00", "end": "2024-05-30T00:00:00+02:00", "title": "Klatovy - Pokoj\u00ed\u010dek", "location": "Klatovy"}, {"allDay": true, "start": "2024-05-29T00:00:00+02:00", "end": "2024-05-30T00:00:00+02:00", "title": "Praha - Pink\u00e1ra", "location": "Praha"}, {"allDay": true, "start": "2024-05-30T00:00:00+02:00", "end": "2024-05-31T00:00:00+02:00", "title": "Plze\u0148 - S pir\u00e1ty se bav\u00ed\u0161 - D\u011btsk\u00fd den", "location": "Plze\u0148"}, {"allDay": true, "start": "2024-05-31T00:00:00+02:00", "end": "2024-06-01T00:00:00+02:00", "title": "P\u00edsek - Pokoj\u00ed\u010dek", "location": "P\u00edsek"}, {"allDay": true, "start": "2024-05-31T00:00:00+02:00", "end": "2024-06-01T00:00:00+02:00", "title": "Ho\u0159ovice, Dob\u0159\u00ed\u0161, Mn\u00ed\u0161ek - Pink\u00e1ra", "location": "Ho\u0159ovice, Dob\u0159\u00ed\u0161, Mn\u00ed\u0161ek"}, {"allDay": true, "start": "2024-06-01T00:00:00+02:00", "end": "2024-06-02T00:00:00+02:00", "title": "Praha - S pir\u00e1ty se bav\u00ed\u0161 - D\u011btsk\u00fd den", "location": "Praha"}, {"allDay": true, "start": "2024-06-02T00:00:00+02:00", "end": "2024-06-03T00:00:00+02:00", "title": "Beroun - Plavba po Berounce", "location": "Beroun"}, {"allDay": false, "start": "2024-06-02T14:00:00+02:00", "end": "2024-06-02T15:00:00+02:00", "title": "Praha - Sv\u011btov\u00e1 cykloj\u00edzda", "location": "Praha - magistr\u00e1la ", "description": "<a href=\"https://www.facebook.com/events/1126480395385415/?acontext=%7B%22event_action_history%22:[%7B%22surface%22:%22external_search_engine%22%7D,%7B%22mechanism%22:%22calendar_tab_event%22,%22surface%22:%22bookmark_calendar%22%7D],%22ref_notif_type%22:null%7D\" rel=\"noopener noreferrer\">Odkaz</a> na ud\u00e1lost"}, {"allDay": true, "start": "2024-06-03T00:00:00+02:00", "end": "2024-06-04T00:00:00+02:00", "title": "Praha - Rozd\u00e1v\u00e1n\u00ed", "location": "Praha - metra "}, {"allDay": true, "start": "2024-06-06T00:00:00+02:00", "end": "2024-06-07T00:00:00+02:00", "title": "Praha - Rozd\u00e1v\u00e1n\u00ed", "location": "Praha - metra"}]'
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
index 53dad05617c15e10505d759623e77d4377c68869..cbd123ef4d0d210b0f8b391afbc191313e91d6a4 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
@@ -8,7 +8,7 @@
{{ second_line }}
</h2>
<p class="xl:mt-[-1rem]">
- Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!
+ {{ section_label }}
</p>
<div class="flex flex-col gap-2 mt-12 items-start">
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.yaml b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.yaml
index 78f15903838be464b32d0d50f5101f2a89298cc9..31699e1471a0ec69ac8bd454c30e98d54bce9c5a 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.yaml
@@ -2,4 +2,3 @@ context:
first_line: 'Odebírej náš'
second_line: 'newsletter'
section_label: 'Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!'
- section_text: 'Odebírej náš newsletter'
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/representatives_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/representatives_section.html
index e7d05567817534da58159e3522016dc8d49816b3..4f7f4c95535a104bb48684d6a55137902282c465 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/representatives_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/representatives_section.html
@@ -39,7 +39,7 @@
"
>
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
- {% include 'patterns/molecules/boxes/image_with_button_box.html' %}
+ {% include 'patterns/molecules/boxes/image_with_button_box.html' with desc_text='Předsednictva MS' %}
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
</ui-horizontal-scrollable>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.html
new file mode 100644
index 0000000000000000000000000000000000000000..f4cc7f8e900e177e9cc09d6ef8d1d7e20a8b22da
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.html
@@ -0,0 +1,19 @@
+<div
+ class="newsletter-section newsletter-section--small"
+ style="background-image:url('../../../../../static/images/background-images/bg-newsletter.webp')"
+>
+ <div class="container--medium py-16">
+ <h2 class="head-9xl">
+ {{ header }}
+ </h2>
+ <p class="xl:mt-[-1rem]">
+ {{ section_label }}
+ </p>
+
+ <div class="flex flex-col gap-2 mt-4 items-start">
+ {% include 'patterns/atoms/form_fields/form_input_backgroundless.html' with placeholder='Tvůj email' classes='mb-3 w-full md:w-96' %}
+ {% include 'patterns/atoms/form_fields/form_checkbox.html' with label='Souhlasím se zpracováním osobních údajů' classes='mb-3' %}
+ {% include 'patterns/atoms/buttons/round_button.html' with button_text='Odebírat' %}
+ </div>
+ </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.yaml b/majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..2ad519e847046c59ea2c00befdf0452bd2411467
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/small_newsletter_section.yaml
@@ -0,0 +1,3 @@
+context:
+ header: 'Odebírej newsletter centra'
+ section_label: 'Lorem ipsum dolor sit amet.'
diff --git a/majak_uistyleguide/templates/patterns/templates/district/center/center.html b/majak_uistyleguide/templates/patterns/templates/district/center/center.html
new file mode 100644
index 0000000000000000000000000000000000000000..b3d309c030e39631149dd53c24f9caf9fa767898
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/district/center/center.html
@@ -0,0 +1,14 @@
+{% include 'patterns/organisms/layout/district/navbar.html' %}
+{% include 'patterns/organisms/header/district/center_header.html' with title="Pirátské centrum" description="V Pardubicích jsme otevřeli nové pirátské centrum pod zkratkou ParduPiCe." %}
+
+<main role="main">
+ {% include "patterns/molecules/program/secondary_card_program.html" %}
+
+ <div class="container--wide my-6 lg:my-12">
+ asdf
+ </div>
+
+ {% include 'patterns/organisms/main_section/small_newsletter_section.html' %}
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/district/elections/elections.html b/majak_uistyleguide/templates/patterns/templates/district/elections/elections.html
index 19a68d6d92320f7a51d54ea7719cf09663c5d3ac..22cc23461c847a0db3cf56725682261266e0b872 100644
--- a/majak_uistyleguide/templates/patterns/templates/district/elections/elections.html
+++ b/majak_uistyleguide/templates/patterns/templates/district/elections/elections.html
@@ -9,8 +9,8 @@
<main role="main">
<template v-if="isCurrentView('view1')">
- {% include 'patterns/organisms/candidates/elections/candidate_primary_list.html' with id='kandidati' %}
- {% include "patterns/organisms/candidates/district/candidate_secondary_list.html" %}
+ {% include 'patterns/organisms/candidates/candidate_primary_list.html' with id='kandidati' %}
+ {% include "patterns/organisms/candidates/candidate_secondary_list.html" %}
</template>
<template v-if="isCurrentView('view2')">
<div class="container--wide my-20">
diff --git a/majak_uistyleguide/templates/patterns/templates/district/people/person.html b/majak_uistyleguide/templates/patterns/templates/district/people/person.html
index 4478c58dce4f6d94a670a4cc7385cfb18dc4032d..61a1e336de601a5a927262f7e5125ef6dace84bb 100644
--- a/majak_uistyleguide/templates/patterns/templates/district/people/person.html
+++ b/majak_uistyleguide/templates/patterns/templates/district/people/person.html
@@ -1,5 +1,5 @@
{% include 'patterns/organisms/layout/district/navbar.html' with selected_item='Kdo jsme' is_transparent=True is_on_dark_background=True %}
-{% include 'patterns/organisms/header/photo_header.html' %}
+{% include 'patterns/organisms/header/district/photo_header.html' %}
<main role="main">
<div class="container--wide w-full">
diff --git a/majak_uistyleguide/templates/patterns/templates/district/universal_cards/universal_cards.html b/majak_uistyleguide/templates/patterns/templates/district/universal_cards/universal_cards.html
new file mode 100644
index 0000000000000000000000000000000000000000..6998684b9a6506ae3e5f4796dee8f3a9425e4693
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/district/universal_cards/universal_cards.html
@@ -0,0 +1,10 @@
+{% include 'patterns/organisms/layout/district/navbar.html' %}
+{% include 'patterns/organisms/header/simple_header.html' with title="Stránka s kartami" %}
+
+<main role="main" class="mb-10 xl:mb-32">
+ <div class="container--wide mb-2 lg:mb-12">
+ {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" %}
+ </div>
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/district/universal_page/universal_page.html b/majak_uistyleguide/templates/patterns/templates/district/universal_page/universal_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..537e8237b50eaa6522485848b160b2673bf4a641
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/district/universal_page/universal_page.html
@@ -0,0 +1,12 @@
+{% include 'patterns/organisms/layout/district/navbar.html' %}
+{% include 'patterns/organisms/header/simple_header.html' with title="Univerzální stránka" %}
+
+<main role="main" class="mb-10 xl:mb-32">
+ <div class="container--wide mb-2 lg:mb-12">
+ <div class="prose max-w-screen-lg">
+ {{ text }}
+ </div>
+ </div>
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/district/universal_page/universal_page.yaml b/majak_uistyleguide/templates/patterns/templates/district/universal_page/universal_page.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..8120127f1b2fa6a706d387030057e6db3fdf0eb6
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/district/universal_page/universal_page.yaml
@@ -0,0 +1,2 @@
+context:
+ text: 'Ratione quasi dicta fuga cumque sunt ab tempora quia. Est voluptatem possimus praesentium est molestiae. Ipsam eum mollitia esse deleniti hic deserunt. Officiis dolor reiciendis est cumque non. Ut sapiente voluptatem itaque provident. Ea eos nisi est porro laborum.'
diff --git a/majak_uistyleguide/templates/patterns/templates/elections/candidates/candidate_list.html b/majak_uistyleguide/templates/patterns/templates/elections/candidates/candidate_list.html
index d723bd6e72fa810bf8ead6942850a7602c5bb664..6c6434cd7b73f9c96a32203d8c98f16fa982d547 100644
--- a/majak_uistyleguide/templates/patterns/templates/elections/candidates/candidate_list.html
+++ b/majak_uistyleguide/templates/patterns/templates/elections/candidates/candidate_list.html
@@ -2,7 +2,7 @@
{% include 'patterns/organisms/header/elections/candidates_header.html' with title='Kandidáti' %}
<main role="main">
- {% include "patterns/organisms/candidates/elections/candidate_primary_list.html" %}
+ {% include "patterns/organisms/candidates/candidate_primary_list.html" %}
{% include "patterns/organisms/candidates/elections/candidate_secondary_list.html" %}
</main>
diff --git a/majak_uistyleguide/templates/patterns/templates/elections/homepage/homepage.html b/majak_uistyleguide/templates/patterns/templates/elections/homepage/homepage.html
index cbd26dd186bc412b841406a4e177b1a00b4ea962..802bde1e56a8ef4750eb473dc05881405e7efa36 100644
--- a/majak_uistyleguide/templates/patterns/templates/elections/homepage/homepage.html
+++ b/majak_uistyleguide/templates/patterns/templates/elections/homepage/homepage.html
@@ -7,7 +7,7 @@
<main role="main">
{% include 'patterns/molecules/menus/elections/carousel.html' %}
- {% include 'patterns/organisms/candidates/elections/candidate_primary_list.html' with id='kandidati' %}
+ {% include 'patterns/organisms/candidates/candidate_primary_list.html' with id='kandidati' %}
{% include "patterns/organisms/candidates/elections/candidate_secondary_list.html" %}
diff --git a/majak_uistyleguide/templates/patterns/templates/main/article/article_detail.html b/majak_uistyleguide/templates/patterns/templates/main/article/article_detail.html
index 9a29e5e78d30e6585d080b631b8ef4af6d5c4dcd..a2a890c3c501335c87c865ec5b2e2f184a728862 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/article/article_detail.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/article/article_detail.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Aktuality' %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Aktuality' %}
{% include 'patterns/organisms/header/article_header.html' with second_link=None %}
<main role="main" class="mb-10 xl:mb-32">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/article/article_list.html b/majak_uistyleguide/templates/patterns/templates/main/article/article_list.html
index 791c299ee25b40823749b9d1f2abc8b78f5be0e4..f036c57c25e6f0e855694439ec5575dbca6688a9 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/article/article_list.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/article/article_list.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Aktuality' %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Aktuality' %}
{% include 'patterns/organisms/header/articles_header.html' %}
<main role="main">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/contact/contact.html b/majak_uistyleguide/templates/patterns/templates/main/contact/contact.html
index fa7253af1fdb30d286dd91b424f2a02a3113833f..eb69d1e46fccf5d20cf6c9ed7c33d7d30d707661 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/contact/contact.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/contact/contact.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Kontakty' %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Kontakty' %}
{% include 'patterns/organisms/header/simple_header.html' with title='Kontakty' %}
<main role="main">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/crossroad/crossroad.html b/majak_uistyleguide/templates/patterns/templates/main/crossroad/crossroad.html
index b8583329c39b26e5f8c54137cb6f66877353515c..7954b73dfdbf954b9edfc1e9d22d2a71a69a0e30 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/crossroad/crossroad.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/crossroad/crossroad.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Kdo jsme' %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Kdo jsme' %}
{% include 'patterns/organisms/header/simple_header.html' with title='Týmy' %}
<main role="main" class="mb-10 xl:mb-32">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/hoax/hoax.html b/majak_uistyleguide/templates/patterns/templates/main/hoax/hoax.html
index 9111e6a43d033fcb0eb9dccab530d40bbd1529e6..fecf9903c196e501adcae67df8ad39eb9e6c51be 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/hoax/hoax.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/hoax/hoax.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/layout/main/navbar.html' %}
{% include 'patterns/organisms/header/simple_header.html' with title="Hoaxy" %}
<main role="main" class="mb-10 xl:mb-32">
<div class="container--wide mb-2 lg:mb-12">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/homepage/homepage.html b/majak_uistyleguide/templates/patterns/templates/main/homepage/homepage.html
index 86eb4ce93cb09594925318756aff70e3f976bbc2..561c779e68c49762529bcefd51cdce3118fb407e 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/homepage/homepage.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/homepage/homepage.html
@@ -2,7 +2,7 @@
{% include 'patterns/molecules/blocks/message_block.html' with is_last_child=True %}
{% endif %}
-{% include 'patterns/organisms/layout/navbar.html' with is_transparent=True %}
+{% include 'patterns/organisms/layout/main/navbar.html' with is_transparent=True %}
<main role="main">
{% include 'patterns/molecules/menus/carousel.html' %}
diff --git a/majak_uistyleguide/templates/patterns/templates/main/people/people.html b/majak_uistyleguide/templates/patterns/templates/main/people/people.html
index d97a02e83ae7f2f794b26b555bd99ece17c06bd9..eaf55d083cf0913e1f7e3dadb9cbdb1896910ba7 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/people/people.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/people/people.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Kdo jsme' %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Kdo jsme' %}
<div class="__js-root">
<ui-view-provider
diff --git a/majak_uistyleguide/templates/patterns/templates/main/people/person.html b/majak_uistyleguide/templates/patterns/templates/main/people/person.html
index 94b1d1ce4aa1c0593c8d178f0c62f93667c57a65..3286301e95cdba4c59d3ff7aa90227d533cbab1e 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/people/person.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/people/person.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Kdo jsme' is_transparent=True is_on_dark_background=True %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Kdo jsme' is_transparent=True is_on_dark_background=True %}
{% include 'patterns/organisms/header/photo_header.html' %}
<main role="main">
@@ -9,6 +9,8 @@
class="
mb-4
xl:mb-24 xl:mr-2 xl:pr-40
+
+ [&_p]:whitespace-pre-line
"
>
<p class="mb-5 text-lg leading-7">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/program/program.html b/majak_uistyleguide/templates/patterns/templates/main/program/program.html
index 96da87afb5eea62ffdf1da508565ee861c29b55b..accafc27213ea82f6136acbd9712df3b98acde22 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/program/program.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/program/program.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' with selected_item='Program' %}
+{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Program' %}
<div class="__js-root">
<ui-view-provider
@@ -6,41 +6,76 @@
:sync-location="true"
v-slot="{ isCurrentView, toggleView }"
>
- {% include 'patterns/organisms/header/simple_header_with_ui_switch.html' with title='Program' ui_switch_iterable=programs %}
-
- <main role="main" class="mb-4 xl:mb-20">
- <div class="container--wide flex flex-col">
- {% for program in programs %}
- <template v-if="isCurrentView('view{{ forloop.counter }}')">
- {% if program.type == "concise" %}
- <div>
- {% if program.perex %}
- <div class="mb-12">
- <div class="prose">
- {# BEGIN Cast generovana Majakem #}<div class="content-block">
- <p>
- {{ program.perex }}
- </p>
- </div>{# END Cast generovana Majakem #}
- </div>
+ {% include 'patterns/organisms/header/simple_header_with_ui_switch.html' with title='Program' description='Description' ui_switch_iterable=programs %}
+
+ <main role="main">
+ {% for program in programs %}
+ <template v-if="isCurrentView('view{{ forloop.counter }}')">
+ {% if program.type == "concise" %}
+ <div class="container--wide flex flex-col mt-20 mb-4 xl:mb-20">
+ {% if program.perex %}
+ <div class="mb-12">
+ <div class="prose max-w-none">
+ {# BEGIN Cast generovana Majakem #}<div class="content-block">
+ <p>
+ {{ program.perex }}
+ </p>
+ </div>{# END Cast generovana Majakem #}
</div>
- {% endif %}
+ </div>
+ {% endif %}
- {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon='ico--book' %}
- {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon=None %}
- </div>
- {% elif program.type == 'popout' %}
- <div class="mb-12">
- {% include 'patterns/organisms/popouts/popout_list.html' %}
- </div>
- {% elif program.type == 'crossroad' %}
- <div class="mb-12">
- {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
+ {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon='ico--book' %}
+ {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon=None %}
+ </div>
+ {% elif program.type == 'popout' %}
+ <div class="container--wide flex flex-col mt-20 mb-12 xl:mb-20">
+ {% include 'patterns/organisms/popouts/popout_list.html' %}
+ </div>
+ {% elif program.type == 'crossroad' %}
+ <div class="container--wide flex flex-col mt-20 mb-12 xl:mb-20">
+ {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
+ </div>
+ {% elif program.type == 'with_candidates' %}
+ <ui-secondary-view-provider
+ :initial="{candidates: true, program: false}"
+ :sync-location="true"
+ v-slot="{ isCurrentSecondaryView, toggleSecondaryView }"
+ >
+ <div class="bg-white py-12 container--wide text-center">
+ <a
+ @click="toggleSecondaryView('candidates')"
+ class="switch__item--program"
+ :class="{'switch__item--active': isCurrentSecondaryView('candidates')}"
+ >Kandidáti</a>
+
+ <a
+ @click="toggleSecondaryView('program')"
+ class="switch__item--program"
+ :class="{'switch__item--active': isCurrentSecondaryView('program')}"
+ >Program</a>
</div>
- {% endif %}
- </template>
- {% endfor %}
- </div>
+
+ <template v-if="isCurrentSecondaryView('candidates')">
+ <div>
+ {% include "patterns/organisms/candidates/candidate_primary_list.html" %}
+ {% include "patterns/organisms/candidates/candidate_secondary_list.html" %}
+ </div>
+ </template>
+
+ <template v-if="isCurrentSecondaryView('program')">
+ <div class="bg-grey-50 pb-4 xl:pb-20">
+ <div class="container--wide flex flex-col mb-12 gap-8">
+ {% include 'patterns/atoms/text/richtext.html' %}
+
+ {% include 'patterns/organisms/popouts/popout_list.html' %}
+ </div>
+ </div>
+ </template>
+ </ui-secondary-view-provider>
+ {% endif %}
+ </template>
+ {% endfor %}
</main>
</ui-view-provider>
</div>
diff --git a/majak_uistyleguide/templates/patterns/templates/main/program/program.yaml b/majak_uistyleguide/templates/patterns/templates/main/program/program.yaml
index 6dd69959ca49aedc38a3ecde2040826cb30c8fd1..4d7b0cdbb250969d0d7090e837229b8a35d41a4b 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/program/program.yaml
+++ b/majak_uistyleguide/templates/patterns/templates/main/program/program.yaml
@@ -20,4 +20,9 @@ context:
name: 'dlouhodobý'
type: 'popout'
perex: 'Lorem ipsum dolor sit amet 5, který vysvětluje důležitost dlouhodobého
- programu.'
+ programu.'
+ -
+ name: 'krajský'
+ type: 'with_candidates'
+ perex: 'Lorem ipsum dolor sit amet 6, který vysvětluje důležitost dlouhodobého
+ programu.'
diff --git a/majak_uistyleguide/templates/patterns/templates/main/results/results.html b/majak_uistyleguide/templates/patterns/templates/main/results/results.html
index c430a2c8ed50ed341efa06588b1e60a5ff6a535b..d17b7e04d2733da77a3e8aab287b098183d7a22e 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/results/results.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/results/results.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/layout/main/navbar.html' %}
{% include 'patterns/organisms/header/simple_header.html' with title="Výsledky" %}
<main role="main" class="mb-10 xl:mb-32">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/search/search.html b/majak_uistyleguide/templates/patterns/templates/main/search/search.html
index 67f686b63f9b18ccb79d63268382d56c00cf73c2..974988c81e98d6aa906022ec63c1827295d5fadb 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/search/search.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/search/search.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/layout/main/navbar.html' %}
{% include 'patterns/organisms/header/simple_header.html' with title="Vyhledávání" %}
<main role="main" class="mb-10 xl:mb-32">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/simple/simple.html b/majak_uistyleguide/templates/patterns/templates/main/simple/simple.html
index 0a24658abdc413c4799de957a8a539e5f8c02338..3575678b01982e98bebaace19a196fa7f6a11910 100644
--- a/majak_uistyleguide/templates/patterns/templates/main/simple/simple.html
+++ b/majak_uistyleguide/templates/patterns/templates/main/simple/simple.html
@@ -1,4 +1,4 @@
-{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/organisms/layout/main/navbar.html' %}
{% include 'patterns/organisms/header/simple_header.html' with title='Jednoduchá stránka' %}
<main role="main" class="mb-10 xl:mb-32">
diff --git a/majak_uistyleguide/templates/patterns/templates/uniweb/form.html b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
new file mode 100644
index 0000000000000000000000000000000000000000..a6d9dc2a4cf0396aa68baae59aacfe3ef88dfd9c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/form.html
@@ -0,0 +1,20 @@
+{% include 'patterns/organisms/layout/navbar.html' %}
+{% 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">
+ {% include "patterns/atoms/form_fields/form_text.html" %}
+ {% include "patterns/atoms/form_fields/form_date.html" %}
+ {% include "patterns/atoms/form_fields/form_datetime.html" %}
+ {% include "patterns/atoms/form_fields/form_email.html" %}
+ {% include "patterns/atoms/form_fields/form_phone.html" %}
+ {% include "patterns/atoms/form_fields/form_select.html" %}
+ {% include "patterns/atoms/form_fields/form_radio.html" %}
+ {% include "patterns/atoms/form_fields/form_multiselect.html" %}
+ {% include "patterns/atoms/form_fields/form_textarea.html" %}
+ {% include "patterns/atoms/form_fields/form_checkbox.html" %}
+ {% include "patterns/atoms/form_fields/form_captcha.html" %}
+ </div>
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
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..85a97567a95128b21453110f52983d1309c7d45f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/uniweb/universal_page_with_progress.html
@@ -0,0 +1,21 @@
+{% 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" %}
+ {% include "patterns/atoms/table/popout_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/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/requirements/base.in b/requirements/base.in
index 1e8edefd1ed6150fa2fb0736a0c00f5db148531f..1bb4dfa6c379155075265dbf5cf7e9a39b562596 100644
--- a/requirements/base.in
+++ b/requirements/base.in
@@ -3,4 +3,4 @@ django-pattern-library
django-environ
django-vite
psycopg2-binary
-whitenoise
+whitenoise
\ No newline at end of file
diff --git a/src/css/atoms/dropdown.pcss b/src/css/atoms/dropdown.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..a2308d6b51bb9eacbaf5c2f398f7b76e7e97053d
--- /dev/null
+++ b/src/css/atoms/dropdown.pcss
@@ -0,0 +1,62 @@
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+ @apply relative cursor-pointer;
+}
+
+.dropbtn {
+ @apply p-3 mb-1;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ @apply hidden absolute z-[1] list-none;
+}
+
+@media screen and (max-width: 1200px) {
+ .dropdown-content {
+ position: unset;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ .dropbtn {
+ @apply hidden;
+ }
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ @apply block text-white;
+}
+
+@media screen and (min-width: 1200px) {
+ /* Show the dropdown menu on hover */
+ .dropdown:hover .dropdown-content,
+ .dropdown:focus .dropdown-content {
+ @apply flex flex-col gap-3 bg-black w-full p-3;
+ }
+
+ .dropdown:hover .dropbtn,
+ .dropdown:focus .dropbtn {
+ @apply text-white relative;
+ }
+
+ .dropdown-content li {
+ @apply leading-6;
+ }
+
+ .dropdown:hover,
+ .dropdown:focus {
+ @apply bg-black;
+ }
+}
+
+.drop-arrow {
+ @apply ml-1 relative top-[2px];
+}
+
+@media screen and (max-width: 1200px) {
+ .drop-arrow {
+ @apply hidden;
+ }
+}
diff --git a/src/css/atoms/form-field.pcss b/src/css/atoms/form-field.pcss
index 7ab30e49cb3e87d15b3bb53ada37375b7b6a0ba6..f4f091ef190ad1390463456803e4dcf304c40bc0 100644
--- a/src/css/atoms/form-field.pcss
+++ b/src/css/atoms/form-field.pcss
@@ -1,11 +1,11 @@
-.text-input-addon {
+.form__text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg border border-grey-200 transition duration-200;
}
-.text-input {
+.form__text-input {
@apply outline-none bg-grey-25 py-3 px-4 text-lg border-b-2 border-black transition duration-200;
- /* Fix FF text-input not adjusting it's width.
+ /* Fix FF form__text-input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
@@ -35,40 +35,40 @@
}
}
-.text-input-addon--l {
+.form__text-input-addon--l {
@apply border-r-0;
}
-.text-input-addon--r {
+.form__text-input-addon--r {
@apply border-l-0;
}
-.text-input:hover:not([disabled]):not([readonly]) ~ .text-input-addon {
+.form__text-input:hover:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-grey-300;
}
-.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon,
-.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon {
+.form__text-input:focus:not([disabled]):not([readonly]) ~ .form__text-input-addon,
+.form__text-input:active:not([disabled]):not([readonly]) ~ .form__text-input-addon {
@apply border-blue-300;
}
-.text-input[readonly] ~ .text-input-addon,
-.text-input[disabled] ~ .text-input-addon {
+.form__text-input[readonly] ~ .form__text-input-addon,
+.form__text-input[disabled] ~ .form__text-input-addon {
@apply bg-grey-125 text-grey-200;
}
-.text-input--has-addon-l.text-input {
+.form__text-input--has-addon-l.form__text-input {
@apply border-l-0;
}
-.text-input--has-addon-r.text-input {
+.form__text-input--has-addon-r.form__text-input {
@apply border-r-0;
}
-.select {
- @apply relative flex items-center w-full py-2 xl:py-4;
+.form__select {
+ @apply relative flex items-center w-full;
- &:after {
+ &:not(.form__multiselect):after {
@apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
font-family: 'pirati-ui';
/* chevron down */
@@ -110,7 +110,7 @@
}
-.checkbox {
+.form__checkbox {
@apply relative flex;
input {
@@ -191,9 +191,9 @@
.form-field--error {
- .text-input,
+ .form__text-input,
.select__control,
- .text-input ~ .text-input-addon {
+ .form__text-input ~ .form__text-input-addon {
@apply border-red-600;
}
}
diff --git a/src/css/atoms/full-calendar.pcss b/src/css/atoms/full-calendar.pcss
index 4b7600ac6d4398b67704868a9afd70ab5b80c323..efbb3de73f8d252de80d6b0c910a1b44342493e8 100644
--- a/src/css/atoms/full-calendar.pcss
+++ b/src/css/atoms/full-calendar.pcss
@@ -76,3 +76,7 @@
.fc-daygrid-event-dot {
border: calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-dot-color);
}
+
+.fc .fc-scroller-harness {
+ overflow: visible;
+}
diff --git a/src/css/atoms/geo_feature_collection.pcss b/src/css/atoms/geo_feature_collection.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..e0123932def423a1a02ca3bff6aa48048565ed30
--- /dev/null
+++ b/src/css/atoms/geo_feature_collection.pcss
@@ -0,0 +1,162 @@
+.marker-cluster {
+ border-radius: 50%;
+ background-clip: padding-box;
+}
+.marker-cluster div {
+ color: #fff;
+ font-family: Roboto;
+ font-weight: bold;
+ text-align: center;
+ font-size: 16px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-left:0;
+ margin-top: 0;
+}
+.marker-cluster span {
+ line-height: 40px;
+}
+.marker-cluster-small,
+.marker-cluster-medium,
+.marker-cluster-small:hover,
+.marker-cluster-medium:hover {
+ background-color: transparent;
+}
+.marker-cluster-small div,
+.marker-cluster-medium div{
+ background-color: rgba(0, 0, 0, 0.5);
+}
+.marker-cluster-small:hover div,
+.marker-cluster-medium:hover div {
+ background-color: rgba(0, 0, 0, 0.9);
+}
+
+.geo-feature-collection {
+ position: relative;
+}
+
+.geo-feature-collection__map-layer {
+ width: 100%;
+ z-index: -1;
+}
+
+.geo-feature-collection .modal__overlay {
+ z-index: 9999;
+}
+
+.modal__container-body {
+ position: relative;
+}
+
+.geo-feature-collection .modal__close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 2rem;
+ width: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 50;
+ margin: auto;
+ color: var(--color-black);
+ background: var(--color-white);
+}
+
+.geo-feature-collection .card__body {
+ position: relative;
+}
+
+.geo-feature-collection-item__category {
+ position: absolute;
+ left: 1rem;
+ top: -2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 50;
+ padding: .5rem 1rem 1rem;
+ background: var(--color-white);
+}
+
+.geo-feature-collection__legend {
+ padding: 1rem;
+ width: 16rem;
+ background: var(--color-white);
+ border-radius: .5rem;
+ pointer-events: all;
+}
+
+.geo-feature-collection__legend-item {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@media only screen and (min-width: 30rem) {
+ .geo-feature-collection__legend {
+ width: 20rem;
+ }
+}
+
+.geo-feature-collection-tooltip {
+ background: none;
+ border-radius: 0;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ margin-top: -.25rem;
+ box-shadow: none;
+ font-size: .875rem;
+ font-weight: bold;
+ color: var(--color-grey-500);
+ text-align: center;
+ text-shadow:
+ -1px -1px 0 white,
+ 1px -1px 0 white,
+ -1px 1px 0 white,
+ 1px 1px 0 white;
+ width: 12em;
+ white-space: normal;
+ height: 8rem;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ line-height: 1;
+}
+
+.geo-feature-collection-tooltip:before {
+ display: none;
+}
+
+.geo-feature-collection .leaflet-touch .leaflet-bar {
+ border: none;
+ box-shadow: 0 6px 6px -3px rgb(221 221 221 / 43%), 0 10px 14px 1px rgb(221 221 221 / 37%), 0 4px 18px 3px rgb(221 221 221 / 35%)
+}
+
+.geo-feature-collection .leaflet-touch .leaflet-control-zoom-in,
+.geo-feature-collection .leaflet-touch .leaflet-control-zoom-out {
+ line-height: 2rem;
+ height: 2rem;
+ width: 2rem;
+ font-weight: bold;
+ font-size: 24px;
+ font-family: var(--font-body);
+}
+
+.geo-feature-collection .leaflet-touch .leaflet-control-zoom-in:hover,
+.geo-feature-collection .leaflet-touch .leaflet-control-zoom-out:hover {
+ background-color: var(--color-grey-125);
+}
+
+.geo-feature-collection .leaflet-touch .leaflet-control-zoom-in {
+ border-top-left-radius: .5rem !important;
+ border-top-right-radius: .5rem !important;
+ border-bottom: 1px var(--color-grey-125) solid !important;
+}
+.geo-feature-collection .leaflet-touch .leaflet-control-zoom-out {
+ border-bottom-left-radius: .5rem !important;
+ border-bottom-right-radius: .5rem !important;
+}
+
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/molecules/card_box.pcss b/src/css/molecules/card_box.pcss
index ddd5afe864f7eecd1025881f3fd9650498b62d80..f638b392666c80af3a4441dded173c11377637d0 100644
--- a/src/css/molecules/card_box.pcss
+++ b/src/css/molecules/card_box.pcss
@@ -1,10 +1,10 @@
.flip-card {
- .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ &.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
- .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ &.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
diff --git a/src/css/molecules/popout.pcss b/src/css/molecules/popout.pcss
index 06b87e58b10d0f3262e3ce2267a289b3c9cee590..b6f7c55b5ac7582692c6135b463c81e3726aac5c 100644
--- a/src/css/molecules/popout.pcss
+++ b/src/css/molecules/popout.pcss
@@ -2,7 +2,7 @@
@apply px-5 text-lg flex justify-between items-center cursor-pointer duration-150 hover:bg-grey-150;
&.popout__toggle-wrapper--active {
- @apply bg-yellow-500;
+ @apply bg-pirati-yellow;
}
}
@@ -11,7 +11,7 @@
}
.popout__content-wrapper {
- @apply px-5 py-4 flex flex-col gap-3;
+ @apply px-5 py-4 flex flex-col gap-3 bg-grey-150;
}
.popout__toggle-arrow {
diff --git a/src/css/molecules/switch.pcss b/src/css/molecules/switch.pcss
index 989d301cc684d3deee2fbfaa4b9c30356f61d5ea..d4976326a33127ac8f774407aacfcbe126472e43 100644
--- a/src/css/molecules/switch.pcss
+++ b/src/css/molecules/switch.pcss
@@ -2,7 +2,7 @@
@apply py-5 mx-auto;
}
-.switch__item, .switch__item--elections {
+.switch__item, .switch__item--elections, .switch__item--program {
@apply whitespace-nowrap cursor-pointer px-5 py-2 mb-2 font-normal text-center duration-200;
&:not(:last-child) {
@@ -11,15 +11,29 @@
}
.switch__item {
- @apply bg-yellow-500 text-black;
+ @apply bg-white text-black;
&:hover {
- @apply no-underline bg-yellow-600;
+ @apply no-underline bg-pirati-yellow;
}
&.switch__item--active,
&.switch__item--active:hover {
- @apply bg-grey-150;
+ @apply bg-pirati-yellow;
+ }
+}
+
+
+.switch__item--program {
+ @apply bg-grey-150 text-black;
+
+ &:hover {
+ @apply no-underline bg-grey-200;
+ }
+
+ &.switch__item--active,
+ &.switch__item--active:hover {
+ @apply bg-pirati-yellow;
}
}
diff --git a/src/css/organisms/navbar.pcss b/src/css/organisms/navbar.pcss
index 281e020ac74f0a660615c13ca7406e0d1a8cf07d..abb8367bfb89b443fa6f62ac16a28cb0113660b9 100644
--- a/src/css/organisms/navbar.pcss
+++ b/src/css/organisms/navbar.pcss
@@ -2,10 +2,22 @@
@apply bg-black text-white;
.navbar__logo--white {
- @apply inline
+ @apply !text-white;
+
+ &:not(.navbar__district__logo) {
+ @apply inline
+ }
+
+ &.navbar__district__logo {
+ @apply flex
+ }
}
.navbar__logo--black {
- @apply hidden
+ @apply !text-black hidden
+ }
+
+ .navbar__border-button__wrapper:not(:first-child) > .navbar__border-button--main {
+ @apply bg-white border-solid border-4 border-pirati-yellow hover:bg-pirati-yellow
}
.navbar__border-button {
@@ -66,7 +78,13 @@
@apply hidden
}
.navbar__logo--black {
- @apply inline
+ &:not(.navbar__district__logo) {
+ @apply inline
+ }
+
+ &.navbar__district__logo {
+ @apply flex
+ }
}
.bar1, .bar2, .bar3 {
@@ -78,7 +96,13 @@
@apply xl:text-white;
.navbar__logo--white {
- @apply inline
+ &:not(.navbar__district__logo) {
+ @apply inline
+ }
+
+ &.navbar__district__logo {
+ @apply flex
+ }
}
.navbar__logo--black {
@apply hidden
diff --git a/src/css/organisms/newsletter.pcss b/src/css/organisms/newsletter.pcss
index 0a92b2692177a19b34464d1058c38d360a05d12d..3a55396214d81b4182cb8bc5baf023304ff12935 100644
--- a/src/css/organisms/newsletter.pcss
+++ b/src/css/organisms/newsletter.pcss
@@ -1,8 +1,6 @@
.newsletter-section {
@apply bg-cover bg-no-repeat;
- background-position: -400px;
-
@screen md {
background-position: left top;
}
diff --git a/src/css/style.pcss b/src/css/style.pcss
index 059d67037a8227efc9c4dc4b38b2999e040be12b..79ee31ee11f7b248e9f9b7f6445688cabbd4b50c 100644
--- a/src/css/style.pcss
+++ b/src/css/style.pcss
@@ -24,6 +24,8 @@
@import "atoms/heading.pcss";
@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/CandidatePrimaryBox.vue b/src/js/components/CandidatePrimaryBox.vue
index fef7e01d47af3a98c43c1537e1ff41ca155e2779..099e80b36466fb95aa54a820a437cd39e361d0fc 100644
--- a/src/js/components/CandidatePrimaryBox.vue
+++ b/src/js/components/CandidatePrimaryBox.vue
@@ -18,18 +18,40 @@
"
ref="text"
>
- <div class="flex flex-col lg:w-min">
- <h2 class="head-9xl whitespace-nowrap">
+ <div class="flex flex-col">
+ <h2 class="head-9xl">
{{ name }}
</h2>
- <p v-if="position" class="font-bold text-lg mt-[-0.5rem] mb-8">
+ <h3 class="head-6xl mb-5" v-if="subheading">
+ {{ subheading }}
+ </h3>
+
+ <p v-if="position" class="font-bold text-lg mt-[-0.5rem] mb-3">
{{ position }}
</p>
- <p class="text-lg mb-8 lg:mb-16">
- {{ description }}
- </p>
+ <div v-if="!socialLinks" class="mb-5"></div>
+
+ <ul
+ v-if="socialLinks"
+ class="flex gap-2 mb-6"
+ >
+ <li
+ v-for="social of socialLinks"
+ >
+ <a
+ :href="social.url"
+ target="_blank"
+ >
+ <i :class="social.icon"></i>
+ </a>
+ </li>
+ </ul>
+
+ <div class="text-lg mb-8 lg:mb-16">
+ <div v-html="description"></div>
+ </div>
</div>
<div class="flex justify-start">
@@ -43,7 +65,10 @@
xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
"
>
- <span class="group-hover:-translate-x-2 duration-200">Zjisti více</span>
+ <span class="group-hover:-translate-x-2 duration-200">
+ <div v-if="buttonText">{{ buttonText }}</div>
+ <div v-else>Zjisti více</div>
+ </span>
<span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">
<svg width="20" height="21" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -81,7 +106,7 @@
<script>
export default {
name: "CandidatePrimaryBox",
- props: ["name", "position", "description", "url", "imageSource"],
+ props: ["name", "subheading", "position", "description", "url", "buttonText", "imageSource", "socialLinks"],
mounted () {
var intersectionOptions = {
rootMargin: '0px',
diff --git a/src/js/components/PopoutTable.vue b/src/js/components/PopoutTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d8b60bbb1e93600d60f079e3688b5adf0db8187
--- /dev/null
+++ b/src/js/components/PopoutTable.vue
@@ -0,0 +1,57 @@
+<template>
+ <table :class="'duration-200 my-6 prose ' + $props.sizingClasses">
+ <slot name="caption"></slot>
+
+ <thead class="relative w-full duration-200">
+ <slot name="head"></slot>
+
+ <div class="absolute top-0 right-[-60px]">
+ <button
+ ref="togglerButton"
+ class="w-10 h-10 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
+ @click="$data.isOpen = !$data.isOpen"
+ >
+ <i
+ :class="
+ ($data.isOpen) ?
+ 'ico--chevron-up' :
+ 'ico--chevron-down'
+ "
+ class="text-2xl"
+ ></i>
+ </button>
+ </div>
+ </thead>
+
+ <tbody
+ v-if="$data.isOpen"
+ class="
+ w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+ [&_tr:nth-child(even)]:bg-grey-50
+ "
+ >
+ <slot name="body"></slot>
+ </tbody>
+ </table>
+</template>
+
+<script>
+ export default {
+ props: {
+ sizingClasses: {
+ type: String,
+ required: false
+ },
+ openByDefault: {
+ type: Boolean,
+ required: true
+ }
+ },
+ data () {
+ return {
+ isOpen: false,
+ isOpen: this.$props.openByDefault
+ }
+ }
+ }
+</script>
\ No newline at end of file
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/components/SecondaryViewProvider.vue b/src/js/components/SecondaryViewProvider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67d45cad2c7209306d98abef1fb972c6af106faf
--- /dev/null
+++ b/src/js/components/SecondaryViewProvider.vue
@@ -0,0 +1,98 @@
+<template>
+ <div>
+ <slot
+ v-bind:secondaryViews="secondaryViews"
+ v-bind:isCurrentSecondaryView="isCurrentSecondaryView"
+ v-bind:toggleSecondaryView="toggleSecondaryView"
+ v-bind:showSecondaryView="showSecondaryView"
+ v-bind:setSecondaryView="setSecondaryView"
+ ></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ initial: {
+ default: () => {}
+ },
+ syncLocation: {
+ type: Boolean,
+ default: false,
+ },
+ locationParam: {
+ type: String,
+ default: "secondary-view",
+ }
+ },
+ data() {
+ return {
+ secondaryViews: this.$props.initial,
+ queryParams: null,
+ keyListener: e => {
+ // Esc
+ if (e.keyCode === 27) {
+ this.hideAllViews();
+ }
+ }
+ };
+ },
+ watch: {
+ routeView() {
+ const queryParams = new URLSearchParams(window.location.search);
+ }
+ },
+ methods: {
+ setSecondaryView(viewId, show, hideOthers = false) {
+ if (hideOthers) {
+ Object.keys(this.$data.secondaryViews).forEach(key => {
+ if (key !== viewId) {
+ this.setSecondaryView(key, false);
+ }
+ });
+ }
+
+ this.$data.secondaryViews[viewId] = show;
+
+ if (show && this.$props.syncLocation) {
+ const queryParams = new URLSearchParams(window.location.search);
+
+ queryParams.set(this.$props.locationParam, viewId);
+ history.pushState(null, null, "?" + queryParams.toString());
+ }
+ },
+ setSecondaryViews(updates) {
+ this.$data.secondaryViews = Object.assign({}, this.data.secondaryViews, updates);
+ },
+ toggleSecondaryView(viewId) {
+ !this.isCurrentSecondaryView(viewId) && this.setSecondaryView(viewId, !this.isCurrentSecondaryView(viewId), true);
+ },
+ showSecondaryView(viewId) {
+ this.setSecondaryView(viewId, true, true);
+ },
+ isCurrentSecondaryView(viewId) {
+ return this.$data.secondaryViews[viewId];
+ },
+ hideAllViews() {
+ Object.keys(this.$data.secondaryViews).forEach(key => {
+ this.setSecondaryView(key, false);
+ });
+ }
+ },
+ mounted() {
+ window.addEventListener('keydown', this.$data.keyListener);
+
+ if (this.$props.syncLocation) {
+ const queryParams = new URLSearchParams(window.location.search);
+ const locationView = queryParams.get(this.$props.locationParam);
+
+ if (locationView && Object.keys(this.$data.secondaryViews).indexOf(locationView) !== -1) {
+ this.showSecondaryView(locationView);
+ }
+ }
+ },
+ destroyed() {
+ window.removeEventListener('keydown', this.$data.keyListener);
+ }
+}
+</script>
diff --git a/src/js/components/card_program/CardProgram.vue b/src/js/components/card_program/CardProgram.vue
index 321723aabd36bc40fae109ceee83859f56d848e7..8bb5ca064e187cc69001811872406162b80c6cd5 100644
--- a/src/js/components/card_program/CardProgram.vue
+++ b/src/js/components/card_program/CardProgram.vue
@@ -3,9 +3,17 @@
</script>
<template>
- <div class="bg-pirati-yellow py-16">
+ <div
+ :class="
+ (
+ (backgroundClass !== null) ?
+ backgroundClass :
+ 'bg-pirati-yellow'
+ ) + ' py-16'
+ "
+ >
<div class="container--wide">
- <h2 class="head-14xl head-compact mb-8">{{ label }}</h2>
+ <h2 class="head-14xl head-compact mb-8" v-if="label">{{ label }}</h2>
<ul
class="
@@ -21,8 +29,9 @@
:defaultIsOpen="index === 0"
:number="point.number"
:title="point.title"
- :content="point.content"
+ :renderedContent="point.renderedContent"
:points="point.points"
+ :openPointBackgroundClass="openPointBackgroundClass"
/>
</ul>
</div>
@@ -32,6 +41,11 @@
<script>
export default {
name: "CardProgram",
- props: ["points", "label"],
+ props: [
+ "points",
+ "label",
+ "backgroundClass",
+ "openPointBackgroundClass"
+ ],
}
</script>
diff --git a/src/js/components/card_program/CardProgramItem.vue b/src/js/components/card_program/CardProgramItem.vue
index 1202493b741c232c1e43db55c0be3a5fa3ace17d..0f3201be1bddc0f3f2466b7aa30db55fee7693b3 100644
--- a/src/js/components/card_program/CardProgramItem.vue
+++ b/src/js/components/card_program/CardProgramItem.vue
@@ -17,7 +17,7 @@
hover:bg-grey-600
"
- v-if="!this.isOpen"
+ v-if="!isOpen"
@click="openClose"
>
<div
@@ -39,13 +39,18 @@
<div
ref="openVariant"
- class="bg-white"
:class="
- !this.defaultIsOpen ?
-
- 'w-0 [&_*]:!text-[0rem] [&_*]:!p-0 [&_*]:!gap-0 [&_*]:!leading-[0px] [&_*]:!delay-0 [&_*]:!duration-0 !h-0'
- :
- 'p-6 xl:p-12'
+ (
+ !defaultIsOpen ?
+
+ 'w-0 [&_*]:!text-[0rem] [&_*]:!p-0 [&_*]:!gap-0 [&_*]:!leading-[0px] [&_*]:!delay-0 [&_*]:!duration-0 !h-0'
+ :
+ 'p-6 xl:p-12'
+ ) + ' ' + (
+ (openPointBackgroundClass !== undefined) ?
+ openPointBackgroundClass :
+ 'bg-white'
+ )
"
>
<div
@@ -73,14 +78,20 @@
2xl:text-[6.5rem]
"
>
- {{ this.title }}
+ {{ title }}
</h2>
<CardProgramItemPoint
+ v-id="points"
v-for="(point, index) in points"
:key="point.number"
:content="point.content"
/>
+
+ <div
+ v-if="renderedContent"
+ v-html="renderedContent"
+ ></div>
</div>
</div>
</div>
@@ -90,7 +101,7 @@
<script>
export default {
name: "CardProgramItem",
- props: ["slug", "title", "number", "content", "points", "defaultIsOpen"],
+ props: ["slug", "title", "number", "renderedContent", "points", "defaultIsOpen", "openPointBackgroundClass"],
data () {
return {
isOpen: this.defaultIsOpen
diff --git a/src/js/components/countdown/Countdown.vue b/src/js/components/countdown/Countdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..afd9714f585747b7bb1b0d93f07e92de52f74b5f
--- /dev/null
+++ b/src/js/components/countdown/Countdown.vue
@@ -0,0 +1,86 @@
+<template>
+ <span>
+ {{ countdownText }}
+ </span>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ countdown: {
+ days: 0,
+ hours: 0,
+ minutes: 0,
+ seconds: 0
+ },
+ countdownText: ''
+ };
+ },
+ props: {
+ to: {
+ type: String,
+ required: true
+ }
+ },
+ mounted() {
+ this.updateCountdown();
+ setInterval(this.updateCountdown, 1000);
+ },
+ methods: {
+ updateCountdown() {
+ const formatCountdown = (countdown) => {
+ let parts = [];
+
+ if (countdown.days > 0) {
+ parts.push(`${countdown.days} dní`);
+ }
+ if (countdown.hours > 0) {
+ parts.push(`${countdown.hours} hodin`);
+ }
+ if (countdown.minutes > 0) {
+ parts.push(`${countdown.minutes} minut`);
+ }
+
+ // Always include seconds
+ parts.push(`${countdown.seconds} sekund`);
+
+ // Determine pluralization for "sekund"
+ let secondsSuffix = '';
+
+ if (countdown.seconds === 1) {
+ secondsSuffix = 'a';
+ } else if (countdown.seconds > 1 && countdown.seconds < 5) {
+ secondsSuffix = 'y';
+ }
+
+ return parts.join(', ') + (parts.length > 0 ? secondsSuffix : '');
+ }
+
+ const targetDate = new Date(this.to);
+ const currentDate = new Date();
+
+ let timeDifference = targetDate - currentDate;
+
+ if (timeDifference <= 0) {
+ this.countdownText = 'nic. Jdeme volit!';
+ return;
+ }
+
+ const oneDay = 24 * 60 * 60 * 1000;
+ this.countdown.days = Math.floor(timeDifference / oneDay);
+ timeDifference -= this.countdown.days * oneDay;
+
+ this.countdown.hours = Math.floor(timeDifference / (60 * 60 * 1000));
+ timeDifference -= this.countdown.hours * (60 * 60 * 1000);
+
+ this.countdown.minutes = Math.floor(timeDifference / (60 * 1000));
+ timeDifference -= this.countdown.minutes * (60 * 1000);
+
+ this.countdown.seconds = Math.floor(timeDifference / 1000);
+
+ this.countdownText = formatCountdown(this.countdown);
+ }
+ }
+};
+</script>
diff --git a/src/js/components/full_calendar/Calendar.vue b/src/js/components/full_calendar/Calendar.vue
index d8218d31cbe30d11c2725efc98cb36123c91fa3f..fbcd736c08acd31b1502a5e80df90bc9fa9ff3c3 100644
--- a/src/js/components/full_calendar/Calendar.vue
+++ b/src/js/components/full_calendar/Calendar.vue
@@ -26,14 +26,6 @@ export default {
meridiem: false
},
eventClick (info) {
- if (
- info.event.url === ''
- && info.event.extendedProps.location === undefined
- && info.event.extendedProps.url === undefined
- ) {
- return
- }
-
info.jsEvent.preventDefault();
const popup = tippy(
@@ -41,6 +33,27 @@ export default {
{
content: `
<div class="p-2 flex flex-col gap-3 text-white">
+ ${
+ (info.event.title !== undefined) ?
+ `
+ <div class="flex gap-2 items-baseline">
+ <strong>${info.event.title}</strong>
+ </div>
+ ` : ''
+ }
+ ${
+ (!info.event.allDay) ?
+ `
+ <div class="flex gap-2 items-baseline">
+ <i class="ico--clock" aria-label="Místo konání"></i>
+ <div>${
+ info.event.start.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit' })
+ + " - "
+ + info.event.end.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit' })
+ }</div>
+ </div>
+ ` : ''
+ }
${
(info.event.extendedProps.location !== undefined) ?
`
@@ -55,7 +68,7 @@ export default {
`
<div class="flex gap-2 items-baseline">
<i class="ico--info" aria-label="Popis"></i>
- <div>${info.event.extendedProps.description}</div>
+ <div class="[&_a]:underline">${info.event.extendedProps.description}</div>
</div>
` : ''
}
@@ -79,7 +92,11 @@ export default {
'hover' : 'click'
),
allowHTML: true,
- interactive: true
+ interactive: true,
+ onShow(instance) {
+ // Set the minimum width using CSS
+ instance.popper.style.minWidth = '250px'; // Set your desired minimum width here
+ }
}
);
diff --git a/src/js/components/geo_feature_collection/GeoFeatureCollection.vue b/src/js/components/geo_feature_collection/GeoFeatureCollection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09a35114e790e0d7d40707745c7381cf111c33df
--- /dev/null
+++ b/src/js/components/geo_feature_collection/GeoFeatureCollection.vue
@@ -0,0 +1,739 @@
+import { LMap, LTileLayer, LMarker, LControl, LIcon, LFeatureGroup, LMarkerClusterGroup, LGeoJson } from "@vue-leaflet/vue-leaflet";
+import Vue from "vue";
+
+Vue.component("l-map", LMap);
+Vue.component("l-tile-layer", LTileLayer);
+Vue.component("l-marker", LMarker);
+Vue.component("l-control", LControl);
+
+const buildMarkerIcon = (color, number) => {
+ const iconUrl =
+ number !== undefined
+ ? `/maps/marker/${color}/${number}/`
+ : `/maps/marker/${color}/`;
+
+ return new Licon({
+ iconUrl,
+ shadowUrl: `/maps/marker-shadow/`,
+ iconSize: [44, 64],
+ iconAnchor: [22, 64],
+ shadowSize: [48, 68],
+ shadowAnchor: [22, 68],
+ });
+};
+
+const layerUrl = (tileServerConfig, baseLayerName, gridName) => {
+ return `${tileServerConfig.url}/tiles/${baseLayerName}/${gridName || 'webmercator'}/{z}/{x}/{y}.png`;
+}
+
+const retinaAwareLayerUrl = (tileServerConfig, baseLayerName, gridName, gridNameHq) => {
+ const isRetina = false; // TODO
+ const ln = isRetina ? baseLayerName + '_hq' : baseLayerName;
+ const gn = isRetina ? (gridNameHq || "webmercator") : (gridName || "webmercator");
+ return layerUrl(tileServerConfig, ln, gn);
+}
+
+const mapboxStyle = (tileServerConfig, id) => ({
+ url: retinaAwareLayerUrl(tileServerConfig, id, "mapbox_webmercator", "mapbox_webmercator_hq"),
+ attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+ // @see: https://github.com/Leaflet/Leaflet/issues/6059#issuecomment-367007392
+ mapMaxZoom: 20,
+ maxZoom: 22,
+ maxNativeZoom: 22,
+ detectRetina: true,
+ tileSize: false ? 1024 : 512, // TODO
+ zoomOffset: false ? -2 : -1, // TODO
+});
+
+const tileStyles = {
+ "osm-mapnik": (tileServerConfig) => ({
+ url: layerUrl(tileServerConfig, "osm_mapnik"),
+ attribution:
+ '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+ maxZoom: 19,
+ maxNativeZoom: 19,
+ }),
+ "stamen-toner": (tileServerConfig) => ({
+ url: layerUrl(tileServerConfig, "stamen_toner"),
+ attribution:
+ 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+ ext: "png",
+ maxZoom: 20,
+ maxNativeZoom: 20,
+ }),
+ "stamen-terrain": (tileServerConfig) => ({
+ url: layerUrl(tileServerConfig, "stamen_terrain"),
+ attribution:
+ 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+ ext: "png",
+ maxZoom: 20,
+ maxNativeZoom: 20,
+ }),
+ "stadia-osm-bright": (tileServerConfig) => ({
+ url: retinaAwareLayerUrl(tileServerConfig, "stadia_osm_bright"),
+ attribution:
+ '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
+ maxZoom: 20,
+ maxNativeZoom: 20,
+ }),
+ "stadia-outdoors": (tileServerConfig) => ({
+ url: retinaAwareLayerUrl(tileServerConfig, "stadia_outdoors"),
+ attribution:
+ '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
+ maxZoom: 20,
+ maxNativeZoom: 20,
+ }),
+ "mapbox-streets": (tileServerConfig) => mapboxStyle(tileServerConfig, "mapbox_streets"),
+ "mapbox-outdoors": (tileServerConfig) => mapboxStyle(tileServerConfig, "mapbox_outdoors"),
+ "mapbox-light": (tileServerConfig) => mapboxStyle(tileServerConfig, "mapbox_light"),
+ "mapbox-dark": (tileServerConfig) => mapboxStyle(tileServerConfig, "mapbox_dark"),
+ "mapbox-satellite": (tileServerConfig) => mapboxStyle(tileServerConfig, "mapbox_satellite"),
+ "mapbox-pirate": (tileServerConfig) => mapboxStyle(tileServerConfig, "mapbox_pirate"),
+};
+
+const GeoFeatureCollection = Vue.component(
+ "GeoFeatureCollection",
+ {
+ props: {
+ tileServerConfig: {
+ type: Object,
+ default: {},
+ },
+ geojson: {
+ type: Array,
+ required: true,
+ },
+ categoryList: {
+ type: Array,
+ required: false,
+ },
+ wrapperClass: {
+ type: String,
+ default: "",
+ },
+ tileStyle: {
+ type: String,
+ default: "osm-mapnik",
+ },
+ initialZoom: {
+ type: Number,
+ default: 13,
+ },
+ displayLegend: {
+ type: Boolean,
+ default: true,
+ },
+ displayZoomControl: {
+ type: Boolean,
+ default: true,
+ },
+ displayPopups: {
+ type: Boolean,
+ default: true,
+ },
+ handleClicks: {
+ type: Boolean,
+ default: true,
+ },
+ height: {
+ type: String,
+ default: "50rem",
+ },
+ },
+ data: function () {
+ const tileOpts = tileStyles[this.tileStyle](this.tileServerConfig);
+
+ return {
+ // Future map reference
+ map: null,
+ categories: [],
+ entityMap: {},
+ collections: [],
+ featureGroup: LFeatureGroup(),
+ zoom: this.initialZoom,
+ currentItem: null,
+ // See `mapboxStyle` implementation above.
+ mapMaxZoom: tileOpts.mapMaxZoom || tileOpts.maxZoom,
+ mapOptions: {
+ dragging: true, // TODO
+ tap: true, // TODO
+ zoomSnap: 1,
+ zoomControl: this.displayZoomControl,
+
+ },
+ tileLayerOptions: {
+ ...tileOpts
+ },
+ };
+ },
+ computed: {
+ categoryListExpanded: function () {
+ return Object.values(this.categories).reduce((result, category) => {
+ return result || category.expanded;
+ }, false);
+ },
+ categoryCount: function () {
+ return Object.keys(this.categories).length;
+ },
+ },
+ mounted() {
+ this.map = this.$refs.map.mapObject;
+ this.initialize(this.categoryList, this.geojson);
+
+ window.addEventListener("keydown", (event) => {
+ if (event.defaultPrevented) {
+ return; // Should do nothing if the default action has been cancelled
+ }
+
+ let handled = false;
+ let key;
+
+ if (event.key !== undefined) {
+ // Handle the event with KeyboardEvent.key and set handled true.
+ key = event.key;
+ } else if (event.keyCode !== undefined) {
+ // Handle the event with KeyboardEvent.keyCode and set handled true.
+ key = event.keyCode;
+ }
+
+ if (key === 27 || key === "Esc" || key === "Escape") {
+ handled = true;
+ this.closeItemInfo();
+ }
+
+ if (handled) {
+ // Suppress "double action" if event handled
+ event.preventDefault();
+ }
+ });
+ },
+ // Unbind event listener on component destroy.
+ beforeDestroy() {
+ window.removeEventListener("hashchange", this.onHashChange);
+ },
+ methods: {
+ initialize(categories, featureCollections) {
+ const allFeatures = [];
+
+ // Preprocess all the features and collections.
+ // - prepare link to layer and feature collection
+ // - prepare latlng
+ // - prepare marker shats
+ // - add `muted` to featureCollection to control opacity
+ featureCollections.forEach((featureCollection) => {
+ // Muted property to control opacity.
+ featureCollection.properties.muted = false;
+
+ featureCollection.features.forEach(f => {
+ // Marker stash.
+ f.properties.markers = [];
+ // LatLng info (for points).
+ f.properties.latlng = null;
+ // Layer link (for other types).
+ f.properties.layer = null;
+ // Parent FeatureCollection link./
+ f.properties.collection = featureCollection;
+
+ // Preload images.
+ if (f.properties.image) {
+ const i = new Image();
+ i.src = f.properties.image;
+ }
+
+ // Keep reference for easier searches.
+ this.entityMap[f.properties.slug] = f;
+
+ allFeatures.push(f);
+ })
+ });
+
+
+ if (categories) {
+ // Build category list.
+ this.initCategories(categories, featureCollections);
+
+ // Bind categories to features.
+ allFeatures.forEach((f) => {
+ if (f.properties.category && this.categories[f.properties.category]) {
+ f.properties.categoryObj = this.categories[f.properties.category];
+ }
+ });
+
+ // Bind categories to featureCollections.
+ featureCollections.forEach(fc => {
+ if (fc.properties.category && this.categories[fc.properties.category]) {
+ fc.properties.categoryObj = this.categories[fc.properties.category];
+ }
+ });
+ }
+
+ this.collections = featureCollections;
+
+ // Draw the map.
+ this.initMap(featureCollections);
+ },
+ /**
+ * Traverse list of features a build list of categories
+ * with features assigned.
+ *
+ * @param {GeoJSON features} features
+ */
+ initCategories(inputCategories, featureCollections) {
+ const categories = {};
+
+ inputCategories.forEach((cat, index) => {
+ categories[cat.name] = {
+ expanded: false,
+ name: cat.name,
+ color: cat.color,
+ featureCollections: [],
+ muted: false,
+ };
+ });
+
+ featureCollections.forEach((featureCollection) => {
+ if (featureCollection.properties.category) {
+ categories[featureCollection.properties.category].featureCollections.push(featureCollection);
+ }
+ });
+
+ this.categories = categories;
+
+ if (this.categories.length === 0) {
+ this.displayLegend = false;
+ }
+ },
+ /**
+ * Given a list of feature collection objects, add layers to map.
+ * @param {GeoJSON featureCollections} featureCollections
+ */
+ initMap(featureCollections) {
+ featureCollections.forEach((featureCollection) => {
+ const {geoJSONLayer, markersLayer} = this.createFeatureCollectionLayers(featureCollection);
+
+ geoJSONLayer.addTo(this.featureGroup);
+ markersLayer.addTo(this.featureGroup);
+
+ // Keep links.
+ featureCollection.properties.geoJSONLayer = geoJSONLayer;
+ featureCollection.properties.markersLayer = markersLayer;
+
+ this.entityMap[featureCollection.properties.slug] = featureCollection;
+ });
+
+ this.map.addLayer(this.featureGroup);
+
+ if (featureCollections.length == 1) {
+ // Pan to single feature, likely a point.
+ this.map.panTo(this.featureGroup.getBounds().getCenter());
+ } else {
+ // Fit multiple features in a view.
+ this.map.fitBounds(this.featureGroup.getBounds());
+ }
+
+ // Initial check - open item detail if in URL.
+ this.onUserNavigation();
+
+ // Listen to URL changes when user triggers browser navigation.
+ window.addEventListener("popstate", this.onUserNavigation);
+
+ },
+ /**
+ * Creates two new layers for a given FeatureCollection object: GeoJSON and markers.
+ * @param {Object} featureCollection
+ * @returns
+ */
+ createFeatureCollectionLayers(featureCollection) {
+ // Markers are clustered for easier orientation.
+ const markers = LMarkerClusterGroup({
+ showCoverageOnHover: false,
+ maxClusterRadius: 48,
+ });
+
+ // Get color for feature - either from category or fall back to default.
+ const colorForFeature = (feature) => {
+ if (feature.properties.color) {
+ return "#" + feature.properties.color;
+ }
+ const cat = feature.properties.categoryObj;
+ return cat ? "#" + cat.color : "#000000";
+ };
+
+ // Get style for given feature.
+ const style = (feature) => ({
+ fillColor: colorForFeature(feature),
+ weight: 3,
+ opacity: 0.8,
+ color: colorForFeature(feature),
+ fillOpacity: 0.6,
+ });
+
+ const markerIconForCategory = (categoryName, number) =>
+ categoryName && this.categories[categoryName]
+ ? buildMarkerIcon(
+ this.categories[categoryName].color,
+ number
+ )
+ : buildMarkerIcon("000000", number);
+
+ const addMarker = (feature, markerPosLatLng, onClick) => {
+ const tooltipTitle = [feature.properties.title, feature.properties.collectionTitle].filter(i => !!i).join(' - ');
+
+ // add marker
+ const featureMarker = new LMarker(markerPosLatLng, {
+ icon: feature.properties.color
+ ? buildMarkerIcon(
+ feature.properties.color,
+ feature.properties.index
+ )
+ : markerIconForCategory(
+ feature.properties.category,
+ feature.properties.index
+ ),
+ })
+ .on("click", onClick)
+ .bindTooltip(tooltipTitle, {
+ className: "geo-feature-collection-tooltip",
+ direction: "top",
+ offset: [0, -64],
+ });
+
+ // Add marker to feature marker list.
+ feature.properties.markers.push(featureMarker);
+
+ // Add item marker to the cluster.
+ markers.addLayer(featureMarker);
+
+ return featureMarker;
+ };
+
+ /**
+ * Process Point/MultiPoint type GeoJSON features.
+ * Called for each such feature when building the map.
+ */
+ const pointToLayer = (feature, latlng) => {
+ const onClick = (evt) => {
+ if (this.handleClicks) {
+ this.zoomToPoint(evt.latlng, feature);
+ }
+ };
+ feature.properties.latlng = latlng;
+ return addMarker(feature, latlng, onClick);
+ };
+
+ /**
+ * Process Polygon/MultiPolygon/LineString/MultiLineString type GeoJSON features.
+ * Called for each such feature when building the map.
+ */
+ const onEachFeature = (feature, layer) => {
+ const markerPosLatLng = [];
+
+ const markerForPolyCoords = (coords) => {
+ // Find pole of inaccessibility (not centroid) for the polygon
+ // @see: https://github.com/mapbox/polylabel
+ const markerPos = polylabel(coords, 1);
+ markerPosLatLng.push(L.latLng(markerPos[1], markerPos[0]));
+ };
+
+ const markerForLineStringCoords = (coords) => {
+ // Find a middle sector of LineString and set position to middle of it
+ const sectorCount = coords.length;
+ const sectorIndex = Math.floor((sectorCount - 1) / 2);
+
+ markerPosLatLng.push(
+ L.latLng(
+ (coords[sectorIndex][1] +
+ coords[sectorIndex + 1][1]) /
+ 2,
+ (coords[sectorIndex][0] +
+ coords[sectorIndex + 1][0]) /
+ 2
+ )
+ );
+ };
+
+ /**
+ * Supported GeoJSON features: Polygon, MultiPolygon, LineString, MultiLineString.
+ * Point/MultiPoint features are better handled by pointToLayer function.
+ * It's better idea to convert Points to small Polygons (ask marek.forster@pirati.cz for conversion tool) as
+ * bounds and zoom methods are not supported for those.
+ **/
+ if (feature.geometry.type == "Polygon") {
+ markerForPolyCoords(feature.geometry.coordinates);
+ feature.properties.layer = layer;
+ } else if (feature.geometry.type == "MultiPolygon") {
+ feature.geometry.coordinates.forEach(markerForPolyCoords);
+ feature.properties.layer = layer;
+ } else if (feature.geometry.type == "LineString") {
+ markerForLineStringCoords(feature.geometry.coordinates);
+ feature.properties.layer = layer;
+ } else if (feature.geometry.type == "MultiLineString") {
+ feature.geometry.coordinates.forEach(
+ markerForLineStringCoords
+ );
+ feature.properties.layer = layer;
+ } else if (feature.geometry.type == "MultiPoint" || feature.geometry.type == "Point") {
+ // Supported via `pointToLayer`, noop here.
+ } else {
+ console.warn(
+ `GeoJSON feature type unsupported: ${feature.geometry.type}`
+ );
+ }
+
+ if (markerPosLatLng.length) {
+ const onMarkerClick = (evt) => {
+ if (this.handleClicks) {
+ this.zoomToFeature(feature, true, false);
+ }
+ }
+
+ markerPosLatLng.forEach((pos) => {
+ addMarker(feature, pos, onMarkerClick);
+
+ });
+
+ if (this.handleClicks) {
+ // Bind click event on the layer target item.
+ layer.on({
+ click: (evt) => {
+ this.zoomToFeature(feature, true, false);
+ }
+ });
+ }
+ }
+
+ };
+
+ return {
+ geoJSONLayer: LGeoJson(featureCollection, {
+ style,
+ onEachFeature,
+ pointToLayer,
+ }),
+ markersLayer: markers,
+ };
+ },
+ /**
+ * Stores slug in URL query param.
+ *
+ * @param {Object} item
+ */
+ pushToUrl(slug) {
+ const url = new URL(window.location);
+
+ if (slug === null) {
+ url.searchParams.delete("item");
+ history.pushState({}, "", url);
+ } else {
+ url.searchParams.set("item", slug);
+ history.pushState({}, "", url);
+ }
+ },
+ /**
+ * Called when user navigates. Will display detail
+ * of corresponding item if such exist.
+ *
+ * @param {Event} evt
+ */
+ onUserNavigation(evt) {
+ const urlParams = new URLSearchParams(window.location.search);
+
+ // If query is present when starting, locate the item and zoom to it.
+ if (urlParams.has("item")) {
+ this.focusOnEntity(urlParams.get("item"), false, true);
+ } else if (this.currentItem) {
+ this.closeItemInfo(false);
+ }
+ },
+ /**
+ * Hide current item detail, drop it from URL.
+ * @param {Boolean} updateUrl whether to push new state to history.
+ */
+ closeItemInfo(updateUrl = true) {
+ if (this.currentItem) {
+ this.currentItem = null;
+
+ if (updateUrl) {
+ this.pushToUrl(null);
+ }
+ }
+ },
+ /**
+ * Expand category, show list of FeatureCollection objects belonging to it
+ * @param {String} category
+ */
+ toggleExpandCategory(category) {
+ category.expanded = !category.expanded;
+ },
+ /**
+ * Set muted state for whole feature collection category.
+ * @param {String} category
+ */
+ setMutedCategory(category, muted) {
+ category.featureCollections.forEach(featureCollection => this.setMuted(featureCollection, muted));
+ },
+ /**
+ * Set muted state for collection.
+ * When featureCollection is muted, it will be less opaque in the list. Used for
+ * better orientation when there are lots of features.
+ * @param {Object} featureCollection
+ */
+ setMuted(featureCollection, muted) {
+ featureCollection.properties.muted = muted;
+
+ if (featureCollection.properties.categoryObj) {
+ // Update muted flag on category this featureCollection belongs to.
+ // Category is muted when all featureCollections in it are muted.
+ featureCollection.properties.categoryObj.muted = featureCollection
+ .properties
+ .categoryObj
+ .featureCollections
+ .map(featureCollection => featureCollection.properties.muted)
+ .reduce((a, b) => a && b, true);
+ }
+
+ if (featureCollection.properties.muted) {
+ if (this.featureGroup.hasLayer(featureCollection.properties.geoJSONLayer)) {
+ this.featureGroup.removeLayer(featureCollection.properties.geoJSONLayer);
+ }
+ if (this.featureGroup.hasLayer(featureCollection.properties.markersLayer)) {
+ this.featureGroup.removeLayer(featureCollection.properties.markersLayer);
+ }
+ } else {
+ this.featureGroup.addLayer(featureCollection.properties.geoJSONLayer);
+ this.featureGroup.addLayer(featureCollection.properties.markersLayer);
+ }
+ },
+ /**
+ * Toggle solo view for a FeatureCollection object.
+ * If collection is in solo mode, all other collections are muted. When solo is toggled off, all collections
+ * will get unmuted.
+ * @param {Object} featureCollection
+ */
+ toggleSolo(featureCollection) {
+ const wasSolo = this.collections
+ .filter(c => c !== featureCollection)
+ .map(c => c.properties.muted)
+ .reduce((a, b) => a && b, true);
+
+ if (wasSolo) {
+ // Unset solo - unmute all items.
+ this.collections.forEach((c) => this.setMuted(c, false));
+
+ } else {
+ // Set solo.
+ this.collections.forEach((c) => this.setMuted(c, c !== featureCollection));
+ }
+ },
+ /**
+ * Zoom to a layer.
+ *
+ * @param {L.Layer} layer
+ * @param {Boolean} zoom whether to zoom to the items
+ */
+ zoomToLayer(layer, zoom = false) {
+ if (zoom) {
+ this.map.flyToBounds(layer.getBounds());
+ } else {
+ this.map.panInsideBounds(layer.getBounds());
+ }
+ },
+ /**
+ * Zoom to a point.
+ *
+ * @param {L.Latlng} Latlng
+ * @param {Object} feature
+ * @param {Boolean} updateUrl whether to push new state to history.
+ * @param {Boolean} zoom whether to zoom to the item
+ */
+ zoomToPoint(latlng, feature, updateUrl = true, zoom = false) {
+ if (zoom) {
+ this.map.flyTo(latlng, 18);
+ } else {
+ this.map.panTo(latlng);
+ }
+ this.currentItem = feature.properties;
+
+ if (updateUrl) {
+ this.pushToUrl(this.currentItem.slug);
+ }
+
+ // Zooming always unmutes.
+ this.setMuted(feature.properties.collection, false);
+ },
+ /**
+ * Zoom to a feature.
+ *
+ * @param {Object} feature
+ * @param {Boolean} updateUrl whether to push new state to history.
+ * @param {Boolean} zoom whether to zoom to the items
+ */
+ zoomToFeature(feature, updateUrl = true, zoom = false) {
+ this.zoomToLayer(feature.properties.layer, zoom);
+ this.currentItem = feature.properties;
+
+ if (updateUrl) {
+ this.pushToUrl(this.currentItem.slug);
+ }
+
+ // Zooming always unmutes.
+ this.setMuted(feature.properties.collection, false);
+ },
+ /**
+ * Zoom to a feature collection.
+ *
+ * @param {Object} featureCollection
+ * @param {Boolean} updateUrl whether to push new state to history.
+ * @param {Boolean} zoom whether to zoom to the items
+ */
+ zoomToFeatureCollection(fetureCollection, updateUrl = true, zoom = false) {
+ this.zoomToLayer(fetureCollection.properties.geoJSONLayer, zoom);
+ this.currentItem = fetureCollection.properties;
+
+ if (updateUrl) {
+ this.pushToUrl(this.currentItem.slug);
+ }
+
+ // Zooming always unmutes.
+ this.setMuted(fetureCollection, false);
+ },
+ /**
+ * Focus on a entity with corresponding slugified URL.
+ *
+ * @param {String} slugUrl entity slug
+ * @param {Boolean} updateUrl whether to push new state to history.
+ * @param {Boolean} zoom whether to zoom to the items
+ */
+ focusOnEntity(slugUrl, updateUrl = true, zoom = false) {
+ const entity = this.entityMap[slugUrl];
+
+ if (entity) {
+ if (entity.properties.geoJSONLayer) {
+ // Whole FeatureCollection.
+ this.zoomToFeatureCollection(entity, zoom);
+ } else if (entity.properties.layer) {
+ // Feature - other than Point type.
+ this.zoomToFeature(entity, updateUrl, zoom);
+ } else if (entity.properties.latlng) {
+ // Feature - Point type.
+ this.zoomToPoint(entity.properties.latlng, entity, updateUrl, zoom);
+ }
+ }
+ },
+ /**
+ * Stop event propagation, utility fn.
+ * @param {Event} evt
+ */
+ stopPropagation(evt) {
+ evt.stopPropagation();
+ },
+ },
+ template: `
+ <template>
+
+ </template>
+ `,
+ }
+);
+
+export { GeoFeatureCollection }
diff --git a/src/js/main.js b/src/js/main.js
index 5a45e8c39b5d5cce935c82280a3aa8c465b0d1fb..26250cd6678f94636504c99b2e16444e610156f4 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";
@@ -10,15 +14,19 @@ import GoogleProvider from "./components/calendar/GoogleProvider";
import FullCalendar from "./components/full_calendar/Calendar";
import RegionMap from "./components/RegionMap";
import ViewProvider from "./components/ViewProvider";
+import SecondaryViewProvider from "./components/SecondaryViewProvider";
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"
import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
import CandidateSecondaryList from "./components/secondary_candidates/CandidateSecondaryList";
+import Countdown from "./components/countdown/Countdown";
+import PopoutTable from "./components/PopoutTable";
import SlideUpDown from 'vue-slide-up-down';
@@ -30,9 +38,11 @@ Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-full-calendar", FullCalendar);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-view-provider", ViewProvider);
+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);
@@ -40,6 +50,13 @@ Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);
Vue.component("ui-card-program", CardProgram);
Vue.component("ui-slide-up-down", SlideUpDown);
Vue.component("ui-candidate-secondary-list", CandidateSecondaryList);
+Vue.component("ui-countdown", Countdown);
+Vue.component("ui-popout-table", PopoutTable);
+
+
+Fancybox.bind("[data-fancybox]", {
+ l10n: cs
+});
import UiApp from "./components/UiApp.vue";
diff --git a/tailwind.config.js b/tailwind.config.js
index 320f5a975f915ce49a8bb33065e8c6378a32dd7f..97c2eaa5e54322eddc89135d63dea26cf8048da4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -189,7 +189,7 @@ module.exports = {
'700': '#7d347d',
},
'pirati': {
- 'yellow': '#fec900'
+ 'yellow': '#f2c700'
}
},
container: {