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

news section, card boxes, tags, etc.

parent 4449ca10
No related branches found
No related tags found
1 merge request!22Feat/redesign
Showing
with 106 additions and 67 deletions
...@@ -9,11 +9,7 @@ ...@@ -9,11 +9,7 @@
{{ classes }} {{ classes }}
{% endif %} {% endif %}
{% if not size_classes %} {% block size_classes %}text-lg pl-8 pr-3 py-4{% endblock %}
text-lg pl-8 pr-3 py-4
{% else %}
{{ size_classes }}
{% endif %}
" "
> >
<span class="group-hover:-translate-x-3 duration-200">{{ button_text }}</span> <span class="group-hover:-translate-x-3 duration-200">{{ button_text }}</span>
......
{% extends 'patterns/atoms/buttons/round_button.html' %}
{% block size_classes %}text-sm pl-7 pr-2 py-2{% endblock %}
context:
button_text: 'Další články'
classes: ''
<a href="#" class="text-sm px-4 py-2 text-black bg-yellow-500 duration-200 hover:bg-yellow-600 hover:no-underline">
{{ text }}
</a>
context:
text: 'lorem ipsum'
<div class="flex gap-3 text-grey-185"> <div class="flex gap-3 text-grey-185 {{ classes }}">
<a href="#" class="underline"> <a href="#" class="underline">
Program {{ first_text }}
</a> </a>
------ ⎯⎯
<a href="#" class="underline"> <a href="#" class="underline">
Stanoviska {{ second_text }}
</a> </a>
</div> </div>
context: context:
first_text: 'Aktuality' first_text: 'Program'
second_text: 'Stanoviska' second_text: 'Stanoviska'
...@@ -2,10 +2,18 @@ ...@@ -2,10 +2,18 @@
class="bg-black flex items-center photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center" class="bg-black flex items-center photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
style="background-image: url('../../../../static/images/background-images/bg-migrace.png')" style="background-image: url('../../../../static/images/background-images/bg-migrace.png')"
> >
<div class="grid-container"> <div class="grid-container pt-20">
<div class="grid-left-side-with-content header-max-width pt-20 sm:pt-0"> <div class="grid-left-side-with-content header-max-width pt-20 sm:pt-0">
<div class="max-w-[600px] text-white"> <div class="max-w-[700px] text-white flex flex-col">
<h1 class="h-9xl">{{ photo_header_text }}</h1> {% include 'patterns/atoms/text/header_navigation.html' with classes='mb-6' %}
<h1 class="head-8xl">{{ photo_header_text|safe }}</h1>
<p class="font-semibold text-lg leading-7 mb-6">
{{ description }}
</p>
{% include 'patterns/molecules/tags/tags.html' %}
</div> </div>
</div> </div>
</div> </div>
......
context: context:
photo_header_text: 'Stanovisko Pirátů k migraci 2020' photo_header_text: 'Stanovisko Pirátů<br>k migraci 2020'
description: 'Téma migrace vyvolává mezi lidmi zcela pochopitelně vlnu strachu, nejistoty i zmatků. Na obavy občanů je nutné reagovat a hledat v jejich zájmu řešení. Problémy ale nezmizí, dokud bude panovat v oblasti migrace chaos a nebudou nastavena srozumitelná, vyvážená a hlavně efektivní opatření na celoevropské úrovni. Právě o se budeme jako Piráti zasazovat. Odmítáme povinné přerozdělovací kvóty, chceme funkční mechanismy.'
<div class="article-box p-7 flex flex-col max-w-xl border border-grey-150 mb-8 {{ classes }}"> <div class="flex flex-col max-w-xl mb-8 bg-grey-100 drop-shadow-lg {{ classes }}">
<a href="#"> <a href="#">
<img src="../../../../static/images/person-table.png" alt="" <img
class="mb-7 w-full"> src="../../../../static/images/person-table.png" alt=""
class="w-full"
>
</a> </a>
<a href="#">
<h2 class="head-2xl mb-4">{{ work_article_title }}</h2> <div class="flex flex-col px-8 pb-6 pt-5">
<div class="text-grey-350 font-condensed mb-2">
{{ work_article_date }}
</div>
<a href="#" class="mb-2">
<h2 class="head-3xl">{{ work_article_title }}</h2>
</a> </a>
<div class="flex font-bold mb-4 text-xs text-white uppercase">
<span class="bg-green-500 mr-1 p-2">{{ work_article_date }}</span> <div class="mb-6">
<span class="bg-violet-600 mr-1 p-2">{{ work_article_topic }}</span> {% include 'patterns/molecules/tags/inline_tags.html' %}
</div> </div>
<p class="mb-8"> <p class="mb-8">
{{ work_article_text }} {{ work_article_text }}
</p> </p>
<div>
{% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %} <div class="flex justify-end">
{% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Zjisti více' %}
</div>
</div> </div>
</div> </div>
context: context:
work_article_title: 'KONEC MEZINÁRODNÍ OSTUDY. EVROPSKÁ KOMISE UZAVŘELA ŘÍZENÍ O STŘETU ZÁJMŮ' work_article_title: 'KONEC MEZINÁRODNÍ OSTUDY. EVROPSKÁ KOMISE UZAVŘELA ŘÍZENÍ O STŘETU ZÁJMŮ'
work_article_date: 'DUBEN 2022' work_article_date: '29. června 2023'
work_article_topic: '#ENERGETIKA' work_article_topic: '#ENERGETIKA'
work_article_text: 'Zachránili jsme 180 miliard korun pro naše občany. Ostuda, kterou Česká republika musela podstupovat, je u konce. work_article_text: 'Zachránili jsme 180 miliard korun pro naše občany. Ostuda, kterou Česká republika musela podstupovat, je u konce.
Babiš, podle závěrů auditu, spoluvytvářel prostředí, ve kterém jeho firmy čerpaly dotace, čímž ohrozil čerpání 180 miliard korun z evropských dotací. Babiš, podle závěrů auditu, spoluvytvářel prostředí, ve kterém jeho firmy čerpaly dotace, čímž ohrozil čerpání 180 miliard korun z evropských dotací.
......
...@@ -9,6 +9,6 @@ ...@@ -9,6 +9,6 @@
<h4 class="leading-5 mb-2"> <h4 class="leading-5 mb-2">
{{ small_article_text }} {{ small_article_text }}
</h4> </h4>
{% include 'patterns/atoms/buttons/round_button.html' with button_text='Číst dále' size_classes='text-sm pl-7 pr-2 py-2' %} {% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Číst dále' %}
</div> </div>
</div> </div>
<article class="min-w-96"> <article class="min-w-96 flex flex-col min-h-[600px] {{ classes }}">
<a href="#"> <a href="#">
<img src="{{ image }}" alt="{{ header }}" draggable="false" class="w-full h-80 object-cover"> <img src="{{ image }}" alt="{{ header }}" draggable="false" class="w-full h-80 object-cover">
</a> </a>
<div class="p-6 bg-white text-black"> <div class="p-6 bg-white text-black {{ description_classes }} h-full flex flex-col justify-between">
<div class="mb-6">
{% if date %}
<div class="text-xl text-grey-350 font-condensed mb-2"> <div class="text-xl text-grey-350 font-condensed mb-2">
{{ date }} {{ date }}
</div> </div>
{% endif %}
<div class="flex flex-col my-3 gap-3"> <div class="flex flex-col mt-3 gap-3 justify-between mt-auto">
<h2 class="font-alt text-4xl"> <h2 class="font-alt text-4xl">
<a href="#" class="hover:no-underline"> <a href="#" class="hover:no-underline">
{{ header }} {{ header }}
...@@ -17,10 +20,11 @@ ...@@ -17,10 +20,11 @@
<p class="text-black text-lg"> <p class="text-black text-lg">
{{ content }} {{ content }}
</p> </p>
</div>
</div>
<div class="flex justify-center my-4"> <div class="flex justify-center">
{% include 'patterns/atoms/buttons/round_button.html' with button_text="Zjisti více" %} {% include 'patterns/atoms/buttons/round_button.html' with button_text="Zjisti více" %}
</div> </div>
</div> </div>
</div>
</article> </article>
...@@ -9,6 +9,6 @@ ...@@ -9,6 +9,6 @@
</div> </div>
<div class="text-center flex justify-center"> <div class="text-center flex justify-center">
{% include 'patterns/atoms/buttons/round_button.html' with size_classes='text-sm pl-7 pr-2 py-2' classes='bg-white text-black' button_text='Zjisti více' %} {% include 'patterns/atoms/buttons/round_button_small.html' with classes='bg-white text-black' button_text='Zjisti více' %}
</div> </div>
</div> </div>
<header
class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pb-24 xl:pt-44 w-full"
>
<div class="grid-container header-max-width">
<div class="grid-content">
<h1 class="head-8xl text-white">
{{ simple_header_title }}
</h1>
<h2 class="head-3xl text-white">
{{ sub_heading }}
</h2>
</div>
</div>
</header>
context:
simple_header_title: 'Vítejte na stránce s ukázkama'
sub_heading: 'Podtitulek'
<div class="flex gap-3 flex-wrap {{ classes }}">
{% for tag in tags %}
{% include 'patterns/atoms/tags/tag.html' with text=tag %}
{% endfor %}
</div>
context:
tags:
- 'legislativa'
- 'sněmovna'
- 'lidská práva'
<div class="flex gap-4 flex-wrap max-w-[520px] {{ classes }}">
{% for tag in tags %}
{% include 'patterns/atoms/tags/tag.html' with text=tag %}
{% endfor %}
</div>
context:
tags:
- 'schvalování zákonů'
- 'legislativa'
- 'lidská práva'
- 'LGBT+'
- 'europarlament'
- 'legalizace'
- 'digitalizace'
- 'volby do Evropy'
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment