From 27e092e93e3232270f83bc49f114de557d97b09c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomi=20Valentov=C3=A1?= <git@imaniti.org>
Date: Wed, 3 Jul 2024 17:56:14 +0200
Subject: [PATCH] add profile image
---
.../patterns/atoms/lists/image_list_item.html | 10 ++
.../patterns/atoms/lists/image_list_item.yaml | 3 +
.../atoms/text/two_columns_richtext.html | 2 +-
.../patterns/molecules/lists/image_list.html | 7 ++
.../header/district/photo_header.html | 103 ++++++++++--------
5 files changed, 81 insertions(+), 44 deletions(-)
create mode 100644 majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.html
create mode 100644 majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.yaml
create mode 100644 majak_uistyleguide/templates/patterns/molecules/lists/image_list.html
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 0000000..9b3e008
--- /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 0000000..67e9595
--- /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/text/two_columns_richtext.html b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html
index 64fb992..9a2a00b 100644
--- a/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html
+++ b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html
@@ -1,6 +1,6 @@
<div
class="
- flex gap-6 w-full flex-col
+ flex gap-4 w-full flex-col
lg:flex-row
"
>
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 0000000..6ad116e
--- /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/organisms/header/district/photo_header.html b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html
index 9badda9..75d8380 100644
--- a/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html
+++ b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html
@@ -7,60 +7,77 @@
style="background-image: url('../../../../../static/images/background-images/bg-bartos.jpg')"
>
<div class="container--wide w-full">
- <h1 class="text-white flex flex-col">
+ <div class="text-white flex flex-col">
{% include 'patterns/atoms/header/navigation.html' with classes='mb-10' first_text='Lidé' second_text='Sněmovna' %}
- <span
+ <div
class="
- text-xl font-alt
- sm:text-4xl
+ flex gap-12 flex-nowrap flex-col
+
+ lg:flex-row
"
- >{{ degree_before }}</span>
+ >
+ <img
+ class="rounded-full w-52 h-52"
+ src="../../../../../static/images/person-table.png"
+ alt="Profilový obrázek"
+ >
- <div class="flex items-baseline flex-col xl:flex-row font-alt">
- <span class="font-alt text-6xl xl:text-9xl grow xl:grow-0">{{ name }}</span>
+ <div class="flex flex-col">
+ <span
+ class="
+ text-xl font-alt
+ sm:text-4xl
+ "
+ >{{ degree_before }}</span>
- <span class="text-2xl xl:text-4xl">
- <span class="hidden xl:inline">, </span>{{ degree_after }}
- </span>
- </div>
+ <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-lg font-bold mt-8
- xl:mt-[-0.7rem]
- "
- >{{ function }}</span>
+ <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
- "
- >
- {% 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"
- >
+ <span
+ class="
+ text-lg font-bold mt-8
+ xl:mt-[-0.7rem]
+ "
+ >{{ function }}</span>
- Č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"
- >
+ <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 }}
+ {{ other_party_name }}
+ </div>
+ {% endif %}
+ </div>
</div>
- {% endif %}
+ </div>
</span>
- </h1>
+ </div>
</div>
</header>
--
GitLab