From d6428a5edfbbec677f25b8789ec9a24ccec243d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexa=20Valentov=C3=A1?= <git@imaniti.org>
Date: Mon, 16 Sep 2024 07:26:22 +0200
Subject: [PATCH] make main template's top buttons separate
---
.../molecules/navbar/additional_button.html | 4 +++-
.../patterns/organisms/layout/main/navbar.html | 13 +++++++++++++
.../templates/main/article/article_detail.html | 2 +-
.../templates/main/article/article_list.html | 2 +-
.../patterns/templates/main/contact/contact.html | 2 +-
.../templates/main/crossroad/crossroad.html | 2 +-
.../patterns/templates/main/hoax/hoax.html | 2 +-
.../patterns/templates/main/homepage/homepage.html | 2 +-
.../patterns/templates/main/people/people.html | 2 +-
.../patterns/templates/main/people/person.html | 2 +-
.../patterns/templates/main/program/program.html | 2 +-
.../patterns/templates/main/results/results.html | 2 +-
.../patterns/templates/main/search/search.html | 2 +-
.../patterns/templates/main/simple/simple.html | 2 +-
src/css/organisms/navbar.pcss | 4 ++++
src/js/components/CandidatePrimaryBox.vue | 7 +++++--
16 files changed, 37 insertions(+), 15 deletions(-)
create mode 100644 majak_uistyleguide/templates/patterns/organisms/layout/main/navbar.html
diff --git a/majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html b/majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html
index ba90866..70c7b34 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/organisms/layout/main/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/main/navbar.html
new file mode 100644
index 0000000..4d370f7
--- /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/templates/main/article/article_detail.html b/majak_uistyleguide/templates/patterns/templates/main/article/article_detail.html
index 9a29e5e..a2a890c 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 791c299..f036c57 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 fa7253a..eb69d1e 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 b858332..7954b73 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 9111e6a..fecf990 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 86eb4ce..561c779 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 d97a02e..eaf55d0 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 94b1d1c..39a567e 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">
diff --git a/majak_uistyleguide/templates/patterns/templates/main/program/program.html b/majak_uistyleguide/templates/patterns/templates/main/program/program.html
index d57ac5b..f1915b0 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
diff --git a/majak_uistyleguide/templates/patterns/templates/main/results/results.html b/majak_uistyleguide/templates/patterns/templates/main/results/results.html
index c430a2c..d17b7e0 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 67f686b..974988c 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 0a24658..3575678 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/src/css/organisms/navbar.pcss b/src/css/organisms/navbar.pcss
index cb4e0a4..abb8367 100644
--- a/src/css/organisms/navbar.pcss
+++ b/src/css/organisms/navbar.pcss
@@ -16,6 +16,10 @@
@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 {
@apply bg-pirati-yellow text-black hover:bg-yellow-600
}
diff --git a/src/js/components/CandidatePrimaryBox.vue b/src/js/components/CandidatePrimaryBox.vue
index da2fd99..099e80b 100644
--- a/src/js/components/CandidatePrimaryBox.vue
+++ b/src/js/components/CandidatePrimaryBox.vue
@@ -65,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">
@@ -103,7 +106,7 @@
<script>
export default {
name: "CandidatePrimaryBox",
- props: ["name", "subheading", "position", "description", "url", "imageSource", "socialLinks"],
+ props: ["name", "subheading", "position", "description", "url", "buttonText", "imageSource", "socialLinks"],
mounted () {
var intersectionOptions = {
rootMargin: '0px',
--
GitLab