From 3d6a8855e1c9a5e5230581ed89556135fc41185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Fri, 24 May 2024 11:03:04 +0200
Subject: [PATCH] accept pre-rendered content in card program, add map location
info
---
.../patterns/atoms/buttons/round_button.html | 3 +-
.../program/secondary_card_program.html | 12 ++
.../program/secondary_card_program.yaml | 27 +++++
.../organisms/header/articles_header.html | 6 +-
.../header/district/center_header.html | 86 ++++++++++++++
.../header/district/elections_header.html | 2 +
.../header/elections/articles_header.html | 6 +-
.../header/elections/candidate_header.html | 2 +
.../header/elections/candidates_header.html | 2 +
.../header/elections/simple_header.html | 2 +-
.../organisms/header/simple_header.html | 106 ++++++++++--------
.../templates/district/center/center.html | 8 ++
.../components/card_program/CardProgram.vue | 22 +++-
.../card_program/CardProgramItem.vue | 29 +++--
14 files changed, 248 insertions(+), 65 deletions(-)
create mode 100644 majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html
create mode 100644 majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.yaml
create mode 100644 majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html
create mode 100644 majak_uistyleguide/templates/patterns/templates/district/center/center.html
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
index b0575d4..68f20f3 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
@@ -21,6 +22,6 @@
{% 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/molecules/program/secondary_card_program.html b/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html
new file mode 100644
index 0000000..9e526a3
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html
@@ -0,0 +1,12 @@
+<div class="bg-grey-180 py-24">
+ <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 0000000..c6180a8
--- /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/organisms/header/articles_header.html b/majak_uistyleguide/templates/patterns/organisms/header/articles_header.html
index 6e5ced8..b01ab8d 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
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 0000000..af42a8c
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html
@@ -0,0 +1,86 @@
+{% 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
+
+ py-8
+
+ bg-pirati-yellow
+ "
+ id="address-popup"
+ data-is-open="false"
+ >
+ <div class="container--wide flex 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>
+
+ Mozilla Foundation<br />
+ 331 E Evelyn Ave<br />
+ Mountain View, CA 94041<br />
+ USA
+ </address>
+ </div>
+
+ <img
+ src="https://picsum.photos/536/354"
+ >
+ </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 096578b..73febef 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/elections/articles_header.html b/majak_uistyleguide/templates/patterns/organisms/header/elections/articles_header.html
index b24caf5..4f1b840 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
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 6672343..06f6bbf 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 04e15de..6e3afb0 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 1852583..78970ed 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
diff --git a/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html b/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
index f96838c..6f05d31 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
@@ -1,63 +1,73 @@
<header
class="
- {% block classes %}
- bg-black flex items-center w-full mb-20 pt-28 pb-8
+ flex flex-col z-100 relative
- xl:pt-48 xl:pb-24
-
- {% 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 description %}
+ {% if description %}
+ <p
+ class="
+ text-lg leading-7 pr-4
+
+ 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/templates/district/center/center.html b/majak_uistyleguide/templates/patterns/templates/district/center/center.html
new file mode 100644
index 0000000..5a88328
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/templates/district/center/center.html
@@ -0,0 +1,8 @@
+{% 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" %}
+</main>
+
+{% include 'patterns/organisms/layout/footer.html' %}
diff --git a/src/js/components/card_program/CardProgram.vue b/src/js/components/card_program/CardProgram.vue
index 321723a..ab443ee 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) ?
+ 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 1202493..9917209 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) ?
+ 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"],
data () {
return {
isOpen: this.defaultIsOpen
--
GitLab