Skip to content
Snippets Groups Projects
Commit f90b0238 authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

search bar, implement UI requirements from gdoc

parent ef6e755c
No related branches found
No related tags found
1 merge request!22Feat/redesign
Showing
with 91 additions and 117 deletions
<div class="w-full flex flex-col gap-4">
<div
class="
{{ classes }}
flex flex-col gap-4 my-6
lg:mx-8 lg:my-4 lg:w-2/5
"
>
<img
class="w-full"
class="my-0"
src="{{ richtext_image_url }}"
>
{% if richtext_image_source %}
<span class="text-grey-600 text-sm flex gap-2 items-center">
<span>⎯⎯</span>
......
<a
href="#"
class="
flex items-center group rounded-full font-condensed uppercase font-semibold hover:no-underline
flex items-center group rounded-full font-condensed uppercase font-semibold tracking-tight
hover:no-underline
{% if not classes %}
bg-black text-white
......@@ -16,6 +17,6 @@
{% endblock %}
"
>
<span class="group-hover:-translate-x-3 duration-200">{{ button_text }}</span>
<span class="group-hover:-translate-x-2 duration-200">{{ button_text }}</span>
<span class="opacity-0 group-hover:opacity-100 duration-200">{% include 'patterns/atoms/icons/arrow.html' %}</span>
</a>
<svg width="{% if width %}{{ width }}{% else %}20{% endif %}" height="{% if height %}{{ height }}{% else %}21{% endif %}" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="{% if width %}{{ width }}{% else %}20{% endif %}" height="{% if height %}{{ height }}{% else %}21{% endif %}" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icon / Placeholder">
<path
id="{% block id %}{{ id }}{% endblock %}"
......
<a href="#" class="text-sm px-4 py-2 text-black bg-yellow-500 duration-200 hover:bg-yellow-600 hover:no-underline">
<a href="#" class="text px-4 py-2 text-black bg-yellow-500 duration-200 hover:bg-yellow-600 hover:no-underline">
{{ text }}
</a>
<div class="grid-container mb-2 lg:mb-12">
<div class="grid-content prose max-w-none">
<h2 class="head-7xl">
{{ richtext_title }}
</h2>
<p class="3xl:text-lg">
{{ richtext_text }}
</p>
</div>
</div>
context:
richtext_title: 'SENÁT CHCE V SOUVISLOSTI S RUSKOU AGRESÍ ZABRÁNIT NĚKTERÝM FIRMÁM Z RUSKA A BĚLORUSKA ČERPAT DOTACE Z PROSTŘEDKŮ ROZPOČTU ČESKÉ REPUBLIKY.'
richtext_text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium…'
\ No newline at end of file
<div>
<div
class="
{{ classes }}
font-condensed text-justify
[&_p]:leading-7 [&_p]:text-black [&_p]:text-lg
"
>
{% include "patterns/atoms/articles/side_image.html" with classes="lg:float-right" richtext_image_url=richtext_image_url richtext_image_source=richtext_image_source %}
<p>
{{ richtext_text_1 }}
</p>
<p>
{{ richtext_text_2 }}
</p>
<p>
{{ richtext_text_1 }}
</p>
{% include "patterns/atoms/articles/side_image.html" with classes="lg:float-left" richtext_image_url=richtext_image_url richtext_image_source=richtext_image_source %}
<p>
{{ richtext_text_2 }}
</p>
</div>
</div>
<div class="grid-container mb-2 lg:mb-12">
<div
class="
grid-full flex gap-5 flex-wrap-reverse pb-8 gap-8
md:justify-evenly md:flex-nowrap md:pb-0
"
>
{% include "patterns/atoms/articles/side_image.html" with richtext_image_url=richtext_image_url richtext_image_source=richtext_image_source %}
<div
class="
prose
sm:max-w-[unset]
md:max-w-[50%]
"
>
<p class="3xl:text-lg leading-6 text-black">
{{ richtext_text_1 }}
</p>
<p class="3xl:text-lg leading-6 text-black">
{{ richtext_text_2 }}
</p>
<p class="3xl:text-lg leading-6 text-black">
{{ richtext_text_3 }}
</p>
</div>
</div>
</div>
context:
richtext_image_url: '../../../../static/images/ivan2.png'
richtext_image_source: null
richtext_text_1: 'Veřejné instituce často nemají informace o tom, že jimi placená inzerce se objevuje i na konspiračních webech. Tyto zakázky obvykle zajišťují mediální agentury, kterým státem vlastněné podniky a veřejné instituce v tomto směru nedávají žádná omezení. “Touha vydělat peníze na strachu, obavách nebo frustraci by měla být co nejvíc potlačovaná. Vždyť největší české dezinformační weby si vydělají nižší jednotky statisíců za měsíc právě na reklamě, velmi často díky nevědomosti inzerentů. Ti tak podstupují nejen finanční, ale i reputační rizika,” uvedl spoluzakladatel spolku Nelež Roman Číhalík.'
richtext_text_2: 'Otázkám spojeným s inzercí na dezinformačních a konspiračních webech se dlouhodobě věnují také respektované komunikační agentury. „Toto doporučení vnímáme jako signál, že stát bere problematiku dezinformací vážně, neboť si uvědomuje, že špatná reputace státu může způsobit celospolečenské problémy. Nicméně doporučujeme, aby stát nezůstal jen u tohoto kroku, ale aby použil veškeré možné prostředky v boji s dezinformacemi, jako je například podpora mediální gramotnosti, transparentnost jeho rozhodnutí, spolupráce s novináři nebo podpora výzkumu dezinformací,“ komentuje tento krok Kateřina Hrubešová, výkonná ředitelka Asociace komunikačních agentur.'
richtext_text_3: 'Metodika MMR představuje doporučení, které se opírá o dlouhodobou dobrou praxi soukromých zadavatelů. Veřejné instituce v tomto ohledu teprve napravují vážné nedostatky.'
<div class="grid-container mb-2 lg:mb-12">
<div
class="
grid-full flex gap-5 flex-wrap pb-8 gap-8
md:justify-evenly md:flex-nowrap md:pb-0
"
>
<div
class="
prose
sm:max-w-[unset]
md:max-w-[50%]
"
>
<p class="xl:text-lg leading-6 text-black">
{{ richtext_text_1 }}
</p>
<p class="xl:text-lg leading-6 text-black">
{{ richtext_text_2 }}
</p>
</div>
{% include "patterns/atoms/articles/side_image.html" with richtext_image_url=richtext_image_url richtext_image_source=richtext_image_source %}
</div>
</div>
......@@ -30,7 +30,7 @@
</p>
<div class="flex justify-end">
{% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Zjisti více' %}
{% include 'patterns/atoms/buttons/round_button.html' with button_text='Zjisti více' %}
</div>
</div>
</div>
......@@ -5,10 +5,13 @@
class="mr-4 h-36 w-36"
>
<div class="flex flex-col justify-between items-start">
<span class="text-sm text-grey-200 lg:text-base">{{ small_article_date }}</span>
<h4 class="leading-5 mb-2">
<div class="flex flex-col gap-2.5">
<span class="text-sm text-grey-250 lg:text-base">{{ small_article_date }}</span>
<h4 class="leading-5">
{{ small_article_text }}
</h4>
</div>
{% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Číst dále' %}
</div>
</div>
<div class="grid-container flex xl:grid mb-4 bg-grey-150 xl:mb-20 py-5">
<div class="flex justify-start xl:justify-end grid-left-side">
<div
class="
flex flex-col justify-between bg-grey-150 px-10 py-10 my-10
xl:flex-row xl:my-10 xl:py-5
"
>
<div
class="
flex flex-col gap-3 mb-6 text-lg
xl:flex-row xl:items-center xl:gap-0 xl:mb-0 xl:text-xl
"
>
<i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
</div>
<div class="grid-content flex items-center flex-wrap gap-3 overflow-hidden">
<div class="flex items-center h-11 p-1 mr-3 overflow-hidden">
<div>
<span class="font-bold mr-1">Soubor:</span>
<span class="overflow-hidden text-ellipsis">{{ block_dowload_file_title }}</span>
</div>
</div>
<div class="flex flex-col justify-center items-start">
{% include 'patterns/atoms/buttons/round_button.html' with button_text='Stáhnout' %}
</div>
</div>
{% if icon_title_url %}
<a href="{{ icon_title_url }}" class="hover:no-underline grid-container mb-12">
<a
href="{{ icon_title_url }}"
{% else %}
<div class="grid-container mb-12">
<div
{% endif %}
class="hover:no-underline mb-12 flex gap-3 max-w-4xl"
>
{% if icon %}
<i class="grid-left-side {{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
<i class="{{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
{% endif %}
<div class="{% if icon %}grid-content{% else %}grid-left-side-with-content{% endif %} flex flex-col">
<div class="flex flex-col">
<h3 class="font-alt mb-4 text-4xl">
{{ icon_title_title }}
</h3>
......
......@@ -17,7 +17,7 @@
</a>
</h2>
<p class="text-black text-lg">
<p class="text-black text-lg leading-[1.8rem] font-condensed">
{{ content }}
</p>
</div>
......
......@@ -9,6 +9,6 @@
</div>
<div class="text-center flex justify-center">
{% include 'patterns/atoms/buttons/round_button_small.html' with classes='bg-white text-black' button_text='Zjisti více' %}
{% include 'patterns/atoms/buttons/round_button.html' with classes='bg-white text-black' button_text='Zjisti více' %}
</div>
</div>
<div
class="
flex flex-col grow bg-grey-180
xl:gap-8 xl:flex-row
{{ classes }}
">
<div class="xl:shrink-0">
<a href="#">
......@@ -21,11 +24,11 @@
>
<div class="flex flex-col">
<a
class="hover:no-underline block font-bold mb-2 text-xl xl:text-3xl"
class="hover:no-underline block font-bold mb-1 text-xl xl:text-3xl"
href="#"
><h4>{{ person_big_name }}</h4></a>
<span class="leading-6 mb-4 xl:mb-6 w-10/12">
<span class="leading-6 mb-4 xl:mb-6">
{{ person_big_function }}
</span>
</div>
......
......@@ -5,8 +5,8 @@
src="../../../../static/images/background-images/bg-flag.webp"
draggable="false"
>
<div class="header-carousel--text">
<div class="h-full flex flex-col justify-end items-start">
<div class="header-carousel--text-wrapper">
<div class="container--wide h-full flex flex-col justify-end items-start">
<div class="mb-4">
<h1 class="text-black">{{ label_first }}</h1>
<h1 class="text-black mb-2">{{ label_second }}</h1>
......
<div class="flex gap-4 flex-wrap max-w-[520px] {{ classes }}">
<div class="flex gap-4 flex-wrap max-w-[550px] {{ classes }}">
{% for tag in tags %}
{% include 'patterns/atoms/tags/tag.html' with text=tag %}
{% endfor %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment