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

add article page, mobile UI, UI fixes

parent 6b973124
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
home/templates/home/home_page.html
+ 45
− 109
View file @ d8d1353c
......@@ -2,38 +2,9 @@
{% load static wagtailcore_tags %}
{% block content %}
<nav class="bg-grey-800 py-8 flex justify-center">
<div class="flex gap-7 container text-white items-center">
<a
href="/"
>
<img
class="h-9"
src="{% static 'images/logo.png' %}"
alt="Logo"
>
</a>
<div
class="w-px h-6 bg-white"
></div>
<div class="flex gap-4">
<a class="nav__item" href="#uvod">Úvod</a>
<a class="nav__item" href="#aktualne">Aktuálně</a>
<a class="nav__item" href="#akce">Akce</a>
<a class="nav__item" href="#dokumenty">Dokumenty</a>
<a class="nav__item" href="#dary">Dary</a>
<a class="nav__item" href="#kontakty">Kontakty</a>
<a class="nav__item" href="#lide">Lidé</a>
</div>
</div>
</nav>
<main class="flex flex-col items-center gap-10 pt-14">
<div class="container flex gap-10">
<figure class="w-32 flex flex-col gap-2">
<figure class="w-32 flex-col gap-2 hidden lg:flex">
<img
src="{% static 'images/logo_big.png' %}"
alt="Logo"
......@@ -44,7 +15,7 @@
</small>
</figcaption>
</figure>
<section class="prose font-serif leading-6 text-black" id="uvod">
<section class="prose font-leadingserif -6 text-black w-full max-w-full lg:max-w-prose" id="uvod">
{{ page.heading_text|richtext }}
</section>
</div>
......@@ -53,76 +24,40 @@
<div class="container flex flex-col gap-2">
<h2 class="font-bebas text-white text-3xl uppercase leading-7">Aktuálně</h2>
<ul class="flex gap-4 h-96">
<li class="bg-white p-7 w-80">
<a class="flex flex-col gap-2 h-full">
<small class="text-pii-cyan uppercase font-bold">Společnost</small>
<h3 class="font-serif text-xl leading-6 font-bold">Současný stranický systém v ČR</h3>
<p class="font-serif leading-5 grow">
Prvního března 2023 proběhla
v Pirátském centru v Praze diskuse,
organizovaná Institutem Π
a věnovaná Pirátům na politické
mapě ČR. A to jak ve smyslu
geograficko-demografickém, tak ve
smyslu čistě politickém
</p>
<small class="font-serif">
Přidáno 23. srpna 2022
</small>
</a>
</li>
<li class="bg-white p-7 w-80">
<a class="flex flex-col gap-2 h-full">
<small class="text-pii-cyan uppercase font-bold">Společnost</small>
<h3 class="font-serif text-xl leading-6 font-bold">Současný stranický systém v ČR</h3>
<p class="font-serif leading-5 grow">
Prvního března 2023 proběhla
v Pirátském centru v Praze diskuse,
organizovaná Institutem Π
a věnovaná Pirátům na politické
mapě ČR. A to jak ve smyslu
geograficko-demografickém, tak ve
smyslu čistě politickém
</p>
<small class="font-serif">
Přidáno 23. srpna 2022
<ul class="flex gap-4 lg:h-96 lg:flex-nowrap flex-wrap">
{% for article in page.latest_articles %}
<li class="bg-white p-7 lg:w-80">
<a
class="flex flex-col gap-2 h-full"
href="{{ article.url }}"
>
<small class="text-pii-cyan uppercase font-bold">
{% for tag in article.tags.all %}
{{ tag.name }}
{% endfor %}
</small>
</a>
</li>
<li class="bg-white p-7 w-80">
<a class="flex flex-col gap-2 h-full">
<small class="text-pii-cyan uppercase font-bold">Společnost</small>
<h3 class="font-serif text-xl leading-6 font-bold">Současný stranický systém v ČR</h3>
<h3 class="font-serif text-xl leading-6 font-bold">{{ article.title }}</h3>
<p class="font-serif leading-5 grow">
Prvního března 2023 proběhla
v Pirátském centru v Praze diskuse,
organizovaná Institutem Π
a věnovaná Pirátům na politické
mapě ČR. A to jak ve smyslu
geograficko-demografickém, tak ve
smyslu čistě politickém
{{ article.shortened_perex }}
</p>
<small class="font-serif">
Přidáno 23. srpna 2022
Přidáno {{ article.date }}
</small>
</a>
</li>
{% endfor %}
</ul>
<div class="mt-3">
<button class="flex gap-2 font-bebas text-white text-2xl uppercase">
<a
class="flex gap-2 font-bebas text-white text-2xl uppercase"
href="{{ page.articles_page.url }}"
>
<i class="ico--chevron-right"></i>
<div>Načíst další články</div>
</button>
</a>
</div>
</div>
</section>
......@@ -136,6 +71,7 @@
{% include_block block %}
{% endfor %}
</div>
<div class="hidden lg:block">
{% if page.events|length > 4 %}
<div class="flex flex-col gap-3 border-l-2 pl-14 border-pii-cyan">
{% for block in page.events|slice:"4:8" %}
......@@ -143,14 +79,15 @@
{% endfor %}
</div>
{% endif %}
</div>
</ul>
</section>
<section class="flex justify-center bg-grey-50 p-10 w-full" id="dokumenty">
<section class="flex justify-center bg-grey-50 p-10 w-full lg:flex-nowrap flex-wrap" id="dokumenty">
<div class="container flex flex-col gap-3">
<h2 class="font-bebas text-3xl uppercase leading-7">Dokumenty</h2>
<ul class="grid grid-cols-3 grid-rows-2 gap-y-3 gap-x-6 grid-flow-col">
<ul class="flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-2 gap-y-3 gap-x-6 grid-flow-col">
{% for block in page.documents %}
{% include_block block %}
{% endfor %}
......@@ -174,7 +111,7 @@
<div class="container flex flex-col gap-3">
<h2 class="font-bebas text-3xl uppercase leading-7">Kontakty</h2>
<ul class="grid grid-cols-3 grid-rows-2 gap-y-3 grid-flow-col gap-20">
<ul class="flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-2 lg:grid-flow-col gap-y-3 gap-x-20">
<li>
<h3 class="text-pii-cyan uppercase leading-3 text-sm">Sídlo</h3>
<span class="font-serif">{{ page.address }}</span>
......@@ -207,7 +144,7 @@
<section class="container flex flex-col gap-3" id="lide">
<h2 class="font-bebas text-3xl uppercase leading-7">Lidé</h2>
<div class="grid grid-cols-3 gap-20 min-h-screen">
<div class="flex flex-col lg:grid lg:grid-cols-3 gap-20 min-h-screen">
<div class="flex flex-col gap-5 font-serif">
<section class="flex flex-col gap-4">
<h3 class="text-2xl font-bold">Ředitel</h3>
......@@ -295,7 +232,7 @@
<section class="flex flex-col gap-3 mb-16">
<h3 class="font-bold font-serif text-2xl">Zaměstnanci</h3>
<ul class="grid grid-cols-3 grid-rows-3 gap-y-2 gap-x-4 grid-flow-col font-serif">
<ul class="flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-3 gap-y-2 gap-x-4 grid-flow-col font-serif">
<p class="leading-5">
Zaměstnanci poskytují administrativní,<br>
organizační a expertní podporu pro<br>
......@@ -309,5 +246,4 @@
</section>
</section>
</main>
{% endblock content %}
institut/templates/base.html
+ 28
− 0
View file @ d8d1353c
......@@ -41,6 +41,34 @@
<body>
{% wagtailuserbar %}
<nav class="bg-grey-800 py-8 flex justify-center">
<div class="flex gap-7 container text-white items-center">
<a
href="/"
>
<img
class="h-9"
src="{% static 'images/logo.png' %}"
alt="Logo"
>
</a>
<div
class="w-px h-6 bg-white hidden md:block"
></div>
<div class="gap-4 hidden md:flex">
<a class="nav__item" href="/#uvod">Úvod</a>
<a class="nav__item" href="/#aktualne">Aktuálně</a>
<a class="nav__item" href="/#akce">Akce</a>
<a class="nav__item" href="/#dokumenty">Dokumenty</a>
<a class="nav__item" href="/#dary">Dary</a>
<a class="nav__item" href="/#kontakty">Kontakty</a>
<a class="nav__item" href="/#lide">Lidé</a>
</div>
</div>
</nav>
{% block content %}{% endblock %}
{% block extra_js %}{% endblock %}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft