Skip to content
Snippets Groups Projects
Verified Commit 3d6a8855 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

accept pre-rendered content in card program, add map location info

parent eaba5d23
Branches
No related tags found
1 merge request!29Feat/redesign
Pipeline #18395 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 248 additions and 65 deletions
majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
+ 2
− 1
View file @ 3d6a8855
<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>
majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.html 0 → 100644
+ 12
− 0
View file @ 3d6a8855
<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>
majak_uistyleguide/templates/patterns/molecules/program/secondary_card_program.yaml 0 → 100644
+ 27
− 0
View file @ 3d6a8855
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>'
}
]"
majak_uistyleguide/templates/patterns/organisms/header/articles_header.html
+ 5
− 1
View file @ 3d6a8855
{% 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
......
majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html 0 → 100644
+ 86
− 0
View file @ 3d6a8855
{% 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 %}
majak_uistyleguide/templates/patterns/organisms/header/district/elections_header.html
+ 2
− 0
View file @ 3d6a8855
{% 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
......
majak_uistyleguide/templates/patterns/organisms/header/elections/articles_header.html
+ 5
− 1
View file @ 3d6a8855
{% 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
......
majak_uistyleguide/templates/patterns/organisms/header/elections/candidate_header.html
+ 2
− 0
View file @ 3d6a8855
{% 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
......
majak_uistyleguide/templates/patterns/organisms/header/elections/candidates_header.html
+ 2
− 0
View file @ 3d6a8855
{% 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
......
majak_uistyleguide/templates/patterns/organisms/header/elections/simple_header.html
+ 1
− 1
View file @ 3d6a8855
{% 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
......
majak_uistyleguide/templates/patterns/organisms/header/simple_header.html
+ 58
− 48
View file @ 3d6a8855
<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>
majak_uistyleguide/templates/patterns/templates/district/center/center.html 0 → 100644
+ 8
− 0
View file @ 3d6a8855
{% 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' %}
src/js/components/card_program/CardProgram.vue
+ 18
− 4
View file @ 3d6a8855
......@@ -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>
src/js/components/card_program/CardProgramItem.vue
+ 20
− 9
View file @ 3d6a8855
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft