diff --git a/main/models.py b/main/models.py
index 01849262bceb5e31134b1cab3e51f9a8fab46b25..3565a1017bfc739a5c75ec4120c23e35333a4ba3 100644
--- a/main/models.py
+++ b/main/models.py
@@ -18,7 +18,7 @@ from wagtail.admin.edit_handlers import (
ObjectList,
TabbedInterface,
)
-from wagtail.contrib.routable_page.models import route
+from wagtail.contrib.routable_page.models import RoutablePageMixin, route
from wagtail.core.blocks import CharBlock, PageChooserBlock, RichTextBlock
from wagtail.core.fields import RichTextField, StreamField
from wagtail.core.models import Page
@@ -48,7 +48,9 @@ class ARTICLE_TYPES(models.IntegerChoices):
PRESS_RELEASE = 2, "Tisková zpráva"
-class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page):
+class MainHomePage(
+ MenuMixin, RoutablePageMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page
+):
# header
contact_newcomers = models.URLField(
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 1df39cbcb5573c6c996829c60785c147b88f9095..2e3f994e459ceab9d5433241f5248dd028a4f6e5 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -2679,6 +2679,7 @@ p{
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
+ min-height: 20rem;
width: 280px;
}
@@ -3347,6 +3348,10 @@ p{
margin-bottom: 2.25rem;
}
+.mb-1{
+ margin-bottom: 0.25rem;
+}
+
.mr-1{
margin-right: 0.25rem;
}
@@ -3403,18 +3408,14 @@ p{
margin-top: 5rem;
}
-.mb-1{
- margin-bottom: 0.25rem;
+.mt-8{
+ margin-top: 2rem;
}
.mr-0{
margin-right: 0px;
}
-.mt-8{
- margin-top: 2rem;
-}
-
.mt-1{
margin-top: 0.25rem;
}
@@ -4355,8 +4356,8 @@ a.icon-link:hover span{
margin-bottom: 0px;
}
- .lg\:mb-24{
- margin-bottom: 6rem;
+ .lg\:mt-24{
+ margin-top: 6rem;
}
.lg\:flex{
diff --git a/main/styleguide/source/_patterns/atoms/buttons/from-button-animated.mustache b/main/styleguide/source/_patterns/atoms/buttons/from-button-animated.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..99773ad98f40b550ddaf4a2eb4d92bef765db1fd
--- /dev/null
+++ b/main/styleguide/source/_patterns/atoms/buttons/from-button-animated.mustache
@@ -0,0 +1,8 @@
+<button type="submit" class="btn btn__slide__wrap {{ classes }}">
+ <span class="btn text-lg bg-black px-1 text-white lg:text-base">
+ {{ btn-text }}
+ </span>
+ <span class="btn text-lg bg-white px-1 text-black lg:text-base">
+ {{ btn-text }}
+ </span>
+</button>
diff --git a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
index afad100b8dcb9b53f1b57f88147a3e32a49e9695..0a4ddaf75afda3b1bd536ab219baf408748f4cda 100644
--- a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache
@@ -8,9 +8,11 @@
</span>
<h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">Odebírej náš newsletter</h5>
<div class="newsletter-grid__input flex flex-col items-start">
- {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3 w-full") }}
- {{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
- {{> atoms-button-animated(btn-text: "Odebírat") }}
+ <form method="post" action=".">
+ {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3 w-full") }}
+ {{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
+ {{> atoms-form-button-animated(btn-text: "Odebírat") }}
+ </form>
</div>
</div>
</div>
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index a4cef8c7b83dd5a86fdf53e30ae3b3a242189f5e..dc645e909ab855182be58426ecab37b543a35edc 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -4,7 +4,7 @@
Co právě děláme
</h2>
</div>
- <div class="flex flex-wrap justify-center mb-8 lg:mb-24">
+ <div class="flex flex-wrap justify-center">
<div class="w-full flex max-w-sm sm:max-w-xs">
{{> molecules-twitter-box }}
</div>
@@ -18,7 +18,7 @@
{{> molecules-twitter-box }}
</div>
</div>
- <div class="flex justify-center">
+ <div class="flex justify-center mt-8 lg:mt-24">
{{> atoms-button-animate(btn-text: "Zobrazit další") }}
</div>
</div>
diff --git a/main/styleguide/source/css/molecules/contact_box.pcss b/main/styleguide/source/css/molecules/contact_box.pcss
index 0ace8621e134db116f404fa4ad19a57513c2c303..ce651b56ba95ffc68471956b2df998a15b544d69 100644
--- a/main/styleguide/source/css/molecules/contact_box.pcss
+++ b/main/styleguide/source/css/molecules/contact_box.pcss
@@ -1,4 +1,5 @@
.contact-box {
- @apply border border-grey-100 flex flex-col h-auto min-h-80 items-center justify-between px-16 py-8 text-center;
+ @apply border border-grey-100 flex flex-col h-auto items-center justify-between px-16 py-8 text-center;
+ min-height: 20rem;
width: 280px;
}
diff --git a/main/templates/main/blocks/twitter_block.html b/main/templates/main/blocks/twitter_block.html
index f6fdd44832e43239481c61efc8401c9abe64f67f..acd9f668abca5d609e750d80eecf32cb99243ffe 100644
--- a/main/templates/main/blocks/twitter_block.html
+++ b/main/templates/main/blocks/twitter_block.html
@@ -1,49 +1,50 @@
<div class="container--wide mx-auto mb-8 lg:mb-16">
<div class="flex flex-wrap justify-center items-center">
- <h2 class="w-full head-7xl xl:text-center mb-6 xl:mb-28">
- {{ self.title }}
- </h2>
+ <h2 class="w-full head-7xl xl:text-center mb-6 xl:mb-28">
+ {{ self.title }}
+ </h2>
</div>
- <div id="tweetsList">
- {% include 'main/includes/twitter_widget.html' with tweet_list=tweet_list %}
+ <div id="tweetsList">
+ {% include 'main/includes/twitter_widget.html' with tweet_list=tweet_list %}
+ </div>
+ {% if show_next_tweet %}
+ <div class="flex justify-center mt-8 lg:mt-24">
+ <a
+ onclick="showMoreTweets(event, this)"
+ href="#"
+ data-url="{{ page_url }}?page="
+ data-page="2"
+ class="btn btn__slide__wrap"
+ >
+ <span class="btn text-sm bg-black text-white px-1 lg:text-base">
+ Zobrazit starší
+ </span>
+ <span class="btn text-sm bg-white text-black px1 lg:text-base">
+ Zobrazit starší
+ </span>
+ </a>
</div>
- {% if show_next_tweet %}
- <div class="text-center">
- <a
- onclick="showMoreTweets(event, this)"
- href="#"
- data-url="{{ page_url }}?page="
- data-page="2"
- class="btn btn__slide__wrap">
- <span class="btn text-sm bg-black text-white px-1 lg:text-base">
- Zobrazit starší
- </span>
- <span class="btn text-sm bg-white text-black px1 lg:text-base">
- Zobrazit starší
- </span>
- </a>
- </div>
- {% endif %}
+ {% endif %}
</div>
+
<script type="text/javascript">
- function showMoreTweets(event, tweet) {
- event.preventDefault()
- let btn = tweet;
- let tweetsList = document.getElementById('tweetsList');
+ async function showMoreTweets(event, btn) {
+ event.preventDefault()
+ const tweetsList = document.getElementById('tweetsList');
+
+ const url = btn.getAttribute('data-url') + btn.getAttribute('data-page')
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "X-Requested-With": "XMLHttpRequest",
+ },
+ })
+ const data = await response.json()
+
+ tweetsList.innerHTML += data.html;
+ if (btn.getAttribute('data-page') === data.last_page) { btn.hide() }
- let url = tweet.getAttribute('data-url') + tweet.getAttribute('data-page')
- fetch(url, {
- method: "GET",
- headers: {
- "X-Requested-With": "XMLHttpRequest",
- },
- }).then((response) => response.json())
- .then((data) => {
- tweetsList.innerHTML += data.html;
- if (tweet.getAttribute('data-page') === data.last_page)
- btn.hide();
- let dataPage = parseInt(tweet.getAttribute('data-page')) + 1
- tweet.setAttribute('data-page', dataPage)
- });
- }
+ const dataPage = parseInt(btn.getAttribute('data-page')) + 1
+ btn.setAttribute('data-page', dataPage)
+ }
</script>
diff --git a/main/templates/main/includes/form_button_animated.html b/main/templates/main/includes/form_button_animated.html
new file mode 100644
index 0000000000000000000000000000000000000000..b71a80dbcacd13df5bcfc766b7142d8fa05e8b18
--- /dev/null
+++ b/main/templates/main/includes/form_button_animated.html
@@ -0,0 +1,8 @@
+<button type="submit" class="btn btn__slide__wrap {{ extra_classes }}">
+ <span class="btn text-lg bg-black text-white px-1 lg:text-base">
+ {{ btn_text | default_if_none:"Číst dále" }}
+ </span>
+ <span class="btn text-lg bg-white text-black px-1 lg:text-base">
+ {{ btn_text | default_if_none:"Číst dále" }}
+ </span>
+</button>
diff --git a/main/templates/main/includes/newsletter_section.html b/main/templates/main/includes/newsletter_section.html
index 5dd71146d63595e0a4bfaf6fc7cc48618225f31a..2ab5357795d7416bd35e479cdb0c68ef3852e0b3 100644
--- a/main/templates/main/includes/newsletter_section.html
+++ b/main/templates/main/includes/newsletter_section.html
@@ -1,7 +1,8 @@
{% load static %}
<div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:min-h-screen relative z-10">
- <img src="{% static 'main/images/background-images/bg-bartos-newsletter.jpg' %}" alt="" class="absolute h-full w-full object-cover">
+ <img src="{% static 'main/images/background-images/bg-bartos-newsletter.jpg' %}" alt=""
+ class="absolute h-full w-full object-cover">
<div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
<div class="grid-full newsletter-grid">
<i class="newsletter-grid__icon ico--anchor text-7xl xl:text-9xl xl:w-full"></i>
@@ -10,13 +11,18 @@
</span>
<h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">Odebírej náš newsletter</h5>
<div class="newsletter-grid__input flex flex-col items-start">
- <input type="text" class="text-input bg-white form-field__control mb-3 w-full" value=""
- placeholder="Tvůj email"/>
- <div class="checkbox form-field__control flex items-center mb-3">
- <input type="checkbox" id="checkbox_1">
- <label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních údajů"</label>
- </div>
- {% include 'main/includes/button_animated.html' with btn_text="Odebírat" %}
+ <form method="post" action="{{ page.root_page.newsletter_subscribe_url }}">
+ {% csrf_token %}
+ <input type="hidden" name="return_page_id" value="{{ page.id }}">
+ <input type="email" name="email" class="text-input bg-white form-field__control mb-3 w-full" value="" required=""
+ placeholder="Tvůj email"/>
+ <div class="checkbox form-field__control flex items-center mb-3">
+ <input type="checkbox" id="checkbox_1" name="confirmed" required="">
+ <label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních
+ údajů"</label>
+ </div>
+ {% include 'main/includes/form_button_animated.html' with btn_text="Odebírat" %}
+ </form>
</div>
</div>
</div>
diff --git a/main/templates/main/includes/twitter_widget.html b/main/templates/main/includes/twitter_widget.html
index 78d1b6ecef7f9cc1c50b5d3b5ea3ffb76eb1ceac..99d46e5f39a8e9ae003400464304d25937d92382 100644
--- a/main/templates/main/includes/twitter_widget.html
+++ b/main/templates/main/includes/twitter_widget.html
@@ -1,29 +1,29 @@
-<div class="flex flex-wrap justify-center mb-8 lg:mb-24">
-{% for tweet in tweet_list %}
- <div class="w-full flex max-w-sm sm:max-w-xs">
- <div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
- <div class="flex flex-row sm:flex-col items-center">
- <img
- class="rounded-full shadow-sm w-12 mb-2"
- src="{{ tweet.author_img_url }}"
- alt="user image"
- />
- <div class="flex flex-col sm:flex-col">
- <h5 class="font-alt text-xl mb-2 sm:text-base">
- {{ tweet.author_name }}
- </h5>
- <small class="mb-4 text-turquoise-400">
- {{ tweet.author_username }}
- </small>
- </div>
+<div class="flex flex-wrap justify-center">
+ {% for tweet in tweet_list %}
+ <div class="w-full flex max-w-sm sm:max-w-xs">
+ <div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
+ <div class="flex flex-row sm:flex-col items-center">
+ <img
+ class="rounded-full shadow-sm w-12 mb-2"
+ src="{{ tweet.author_img_url }}"
+ alt="user image"
+ />
+ <div class="flex flex-col sm:flex-col">
+ <h5 class="font-alt text-xl mb-2 sm:text-base">
+ {{ tweet.author_name }}
+ </h5>
+ <small class="mb-4 text-turquoise-400">
+ {{ tweet.author_username }}
+ </small>
</div>
- <p class="text-small sm:text-base leading-6 mb-2">
- {{ tweet.text }}
- </p>
- <a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline">
- <i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
- </a>
+ </div>
+ <p class="text-small sm:text-base leading-6 mb-2">
+ {{ tweet.text }}
+ </p>
+ <a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline">
+ <i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
+ </a>
+ </div>
</div>
- </div>
-{% endfor %}
+ {% endfor %}
</div>