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/text/two_columns_richtext.html b/majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html index 64fb992a322e232ffbfd1d025357effee132b22e..9a2a00bad458f2f8774d321d8ab6ae2b214c41f0 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 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/organisms/header/district/photo_header.html b/majak_uistyleguide/templates/patterns/organisms/header/district/photo_header.html index 9badda9bb41fd21b791878ae61a80204f8b8f91b..75d83800d3651b1ca1942ae75bca9b94058e9454 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>