diff --git a/elections2021/forms.py b/elections2021/forms.py index cf14770f6c2ff65e3191a197a92b8a4ec1fbba44..2743ffd0a8e1b2d58295c307830ee886498b3599 100644 --- a/elections2021/forms.py +++ b/elections2021/forms.py @@ -87,9 +87,3 @@ class ProgramAppForm(forms.Form): choices=OCCUPATION_CHOICES, initial=OCCUPATION_WORKING ) topics = forms.MultipleChoiceField(required=False, choices=TOPIC_CHOICES) - - -class SubscribeForm(forms.Form): - email = forms.EmailField() - confirmed = forms.BooleanField() - return_page_id = forms.IntegerField() diff --git a/elections2021/models.py b/elections2021/models.py index a0ba744b934d9b32806940279293161d5077c571..99c7da69feda02154b170aaf0c928f65456fa63d 100644 --- a/elections2021/models.py +++ b/elections2021/models.py @@ -35,6 +35,7 @@ from wagtail.search import index from wagtailmetadata.models import MetadataPageMixin from calendar_utils.models import CalendarMixin +from shared.forms import SubscribeForm from shared.models import ArticleMixin, SubpageMixin from shared.utils import get_subpage_url, subscribe_to_newsletter from tuning import admin_help @@ -110,7 +111,7 @@ from .constants import ( WHITE, WORKING_SENIORS, ) -from .forms import ProgramAppForm, ProgramPointPageForm, SubscribeForm +from .forms import ProgramAppForm, ProgramPointPageForm from .utils import get_archetype NO_SEARCH_IMAGE_USE_PHOTO = ( diff --git a/main/models.py b/main/models.py index 53870ff7248e9eca379f9e0465e28dc756f8c617..3e3b98eb5c5fd02fbff8d4b6331deeedeb2ea813 100644 --- a/main/models.py +++ b/main/models.py @@ -1,5 +1,9 @@ +from functools import cached_property + +from django.conf import settings from django.core.paginator import Paginator from django.db import models +from django.http import HttpResponseRedirect from django.shortcuts import render from modelcluster.contrib.taggit import ClusterTaggableManager from modelcluster.fields import ParentalKey @@ -12,6 +16,7 @@ from wagtail.core.models import Page from wagtailmetadata.models import MetadataPageMixin from shared.const import RICH_TEXT_DEFAULT_FEATURES +from shared.forms import SubscribeForm from shared.models import ( ArticleMixin, ExtendedMetadataHomePageMixin, @@ -19,7 +24,7 @@ from shared.models import ( MenuMixin, SubpageMixin, ) -from shared.utils import make_promote_panels +from shared.utils import make_promote_panels, subscribe_to_newsletter from tuning import admin_help from . import blocks @@ -133,10 +138,35 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, def get_404_response(request): return render(request, "main/404.html", status=404) + @cached_property + def newsletter_subscribe_url(self): + return self.url + self.reverse_subpage("newsletter_subscribe") + @property def root_page(self): return self + @route(r"^prihlaseni-k-newsletteru/$") + def newsletter_subscribe(self, request): + if request.method == "POST": + form = SubscribeForm(request.POST) + if form.is_valid(): + subscribe_to_newsletter( + form.cleaned_data["email"], + settings.PIRATICZ_NEWSLETTER_ID, + settings.PIRATICZ_NEWSLETTER_SOURCE, + ) + try: + page = ( + Page.objects.filter(id=form.cleaned_data["return_page_id"]) + .live() + .first() + ) + return HttpResponseRedirect(page.full_url) + except Page.DoesNotExist: + return HttpResponseRedirect(self.url) + return HttpResponseRedirect(self.url) + class MainWorkPage(ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin, Page): perex = models.TextField() diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache new file mode 100644 index 0000000000000000000000000000000000000000..42a9e7b079020ece7c0c30150a53b87bd896be75 --- /dev/null +++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache @@ -0,0 +1,51 @@ +<div class="section-clip py-32 bg-no-repeat" + style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')"> + <div class="container--wide mx-auto px-4 pt-16"> + <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16"> + Buď v tom s námi + </h2> + <div class="flex flex-col justify-center items-center mb-32 md:flex-row"> + <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> + <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> + <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> + {{> atoms-button-animated(btn-text: "Přidat se k nám") }} + </div> + <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> + <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> + <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> + <a href="" class="btn btn__slide__wrap w-32 mt-"> + <span class="btn bg-black text-white w-32"> + Poslanecký klub + </span> + <span class="btn bg-white text-black w-32"> + Poslanecký klub + </span> + </a> + </div> + <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> + <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> + <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> + <a href="" class="btn btn__slide__wrap w-32 mt-"> + <span class="btn bg-black text-white w-32"> + Poslanecký klub + </span> + <span class="btn bg-white text-black w-32"> + Poslanecký klub + </span> + </a> + </div> + <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> + <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> + <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> + <a href="" class="btn btn__slide__wrap w-32 mt-"> + <span class="btn bg-black text-white w-32"> + Poslanecký klub + </span> + <span class="btn bg-white text-black w-32"> + Poslanecký klub + </span> + </a> + </div> + </div> + </div> + </div> diff --git a/main/styleguide/source/_patterns/templates/contact.mustache b/main/styleguide/source/_patterns/templates/contact.mustache index 58cb0736ea2a62eca90b2729fcc9bb087f741357..b43816d65004ca13d0dd55d5a248b681f84bb787 100644 --- a/main/styleguide/source/_patterns/templates/contact.mustache +++ b/main/styleguide/source/_patterns/templates/contact.mustache @@ -3,179 +3,181 @@ {{> molecules-simple_header(title: "Kontakty") }} <main role="main"> - <section class="container--medium flex flex-wrap mb-16 pl-44"> - <div class="w-1/2"> - <h2 class="font-alt text-4xl mb-5"> - Kontakty pro veřejnost - </h2> - <div class="flex flex-wrap justify-between"> - <div class="leading-5 w-1/2"> - <span class="font-bold">Informační linka:</span><br/> - +420 703 681 682<br/> - +420 608 963 111<br/> - <br/> - <span class="font-bold">Provozní doba:</span><br/> - Po, St, Pá: 8-16:30<br/> - Út, Čt: 11-19:30<br/> - <br/> - <span class="font-bold">E-mail:</span><br> - <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline"> - info@pirati.cz - </a><br> - <br> - <span class="font-bold">International Department</span><br> - <a href="mailto:international@pirati.cz" class="text-turquoise-500 underline"> - international@pirati.cz - </a><br> - <br> - </div> - <div class="leading-5 w-5/12"> - <span class="font-bold">Informační linka:</span><br/> - +420 703 681 682<br/> - +420 608 963 111<br/> - <br/> - <span class="font-bold">Provozní doba:</span><br/> - Po, St, Pá: 8-16:30<br/> - Út, Čt: 11-19:30<br/> - <br/> - <span class="font-bold">E-mail:</span><br> - <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline"> - info@pirati.cz - </a><br> - <br> - <span class="font-bold">Transparentní účet</span><br> - 24190421219/3190 (Fio banka)<br> - <a href="" class="text-turquoise-500 underline"> - další transparentní účty - </a><br> + <div class="grid-container"> + <section class="grid-content-with-right-side flex flex-wrap mb-16"> + <div> + <h2 class="font-alt text-4xl mb-5"> + Kontakty pro veřejnost + </h2> + <div class="flex flex-wrap justify-between"> + <div class="leading-5 w-1/2"> + <span class="font-bold">Informační linka:</span><br/> + +420 703 681 682<br/> + +420 608 963 111<br/> + <br/> + <span class="font-bold">Provozní doba:</span><br/> + Po, St, Pá: 8-16:30<br/> + Út, Čt: 11-19:30<br/> + <br/> + <span class="font-bold">E-mail:</span><br> + <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline"> + info@pirati.cz + </a><br> + <br> + <span class="font-bold">International Department</span><br> + <a href="mailto:international@pirati.cz" class="text-turquoise-500 underline"> + international@pirati.cz + </a><br> + <br> + </div> + <div class="leading-5 w-5/12"> + <span class="font-bold">Informační linka:</span><br/> + +420 703 681 682<br/> + +420 608 963 111<br/> + <br/> + <span class="font-bold">Provozní doba:</span><br/> + Po, St, Pá: 8-16:30<br/> + Út, Čt: 11-19:30<br/> + <br/> + <span class="font-bold">E-mail:</span><br> + <a href="mailto:info@pirati.cz" class="text-turquoise-500 underline"> + info@pirati.cz + </a><br> + <br> + <span class="font-bold">Transparentní účet</span><br> + 24190421219/3190 (Fio banka)<br> + <a href="" class="text-turquoise-500 underline"> + další transparentní účty + </a><br> + </div> </div> </div> - </div> - <div class="w-1/2"> + <div> + <h2 class="font-alt text-4xl mb-5"> + Regionální kontakty + </h2> + </div> + </section> + + <section class="grid-content-with-right-side mb-20"> <h2 class="font-alt text-4xl mb-5"> - Regionální kontakty + Další kontakty </h2> - </div> - </section> - - <section class="container--narrow mb-20"> - <h2 class="font-alt text-4xl mb-5"> - Další kontakty - </h2> - <div class="flex flex-wrap"> - <div class="contact-box"> - <div> - <div class="h-16 mx-auto w-16"> - hm, image... + <div class="flex flex-wrap"> + <div class="contact-box"> + <div> + <div class="h-16 mx-auto w-16"> + hm, image... + </div> + <h3 class="font-alt mb-3 text-xl"> + Adresář + </h3> + <p> + Další osoby naleznete na stránce pirati.cz + </p> </div> - <h3 class="font-alt mb-3 text-xl"> - Adresář - </h3> - <p> - Další osoby naleznete na stránce pirati.cz - </p> + <a href="" class="btn btn__slide__wrap"> + <span class="btn bg-black text-white w-32"> + Lidé + </span> + <span class="btn bg-blue-300 text-white w-32"> + Lidé + </span> + </a> </div> - <a href="" class="btn btn__slide__wrap"> - <span class="btn bg-black text-white w-32"> - Lidé - </span> - <span class="btn bg-blue-300 text-white w-32"> - Lidé - </span> - </a> - </div> - <div class="contact-box"> - <div> - <div class="h-16 mx-auto w-16"> - hm, image... + <div class="contact-box"> + <div> + <div class="h-16 mx-auto w-16"> + hm, image... + </div> + <h3 class="font-alt mb-3 text-xl"> + Adresář + </h3> + <p> + Další osoby naleznete na stránce pirati.cz + </p> </div> - <h3 class="font-alt mb-3 text-xl"> - Adresář - </h3> - <p> - Další osoby naleznete na stránce pirati.cz - </p> + <a href="" class="btn btn__slide__wrap"> + <span class="btn bg-black text-white w-32"> + Lidé + </span> + <span class="btn bg-blue-300 text-white w-32"> + Lidé + </span> + </a> </div> - <a href="" class="btn btn__slide__wrap"> - <span class="btn bg-black text-white w-32"> - Lidé - </span> - <span class="btn bg-blue-300 text-white w-32"> - Lidé - </span> - </a> - </div> - <div class="contact-box"> - <div> - <div class="h-16 mx-auto w-16"> - hm, image... + <div class="contact-box"> + <div> + <div class="h-16 mx-auto w-16"> + hm, image... + </div> + <h3 class="font-alt mb-3 text-xl"> + Adresář + </h3> + <p> + Další osoby naleznete na stránce pirati.cz + </p> </div> - <h3 class="font-alt mb-3 text-xl"> - Adresář - </h3> - <p> - Další osoby naleznete na stránce pirati.cz - </p> - </div> - <a href="" class="btn btn__slide__wrap"> - <span class="btn bg-black text-white w-32"> - Lidé - </span> - <span class="btn bg-blue-300 text-white w-32"> - Lidé - </span> - </a> - </div> - </div> - </section> - - <section class="container--medium mb-20 pl-44"> - <h2 class="font-alt text-4xl mb-5"> - Kontakty pro média - </h2> - <div class="flex flex-wrap"> - <div class="flex mr-4 person-box"> - <div class="mr-7"> - <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" - alt="user image"> - </div> - <div class="flex flex-col py-4"> - <h6 class="font-bold text-3xl"> - Veronika Šmídová - </h6> - <span class="mb-6 text-grey-300"> - Tisková mluvčí - </span> - <span> - +420 778 111 466 + <a href="" class="btn btn__slide__wrap"> + <span class="btn bg-black text-white w-32"> + Lidé </span> - <span class="text-turquoise-500"> - veronika.smidova@pirati.cz + <span class="btn bg-blue-300 text-white w-32"> + Lidé </span> + </a> </div> </div> - <div class="flex mr-4 person-box"> - <div class="mr-7"> - <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" - alt="user image"> - </div> - <div class="flex flex-col py-4"> - <h6 class="font-bold text-3xl"> - Veronika Šmídová - </h6> - <span class="mb-6 text-grey-300"> - Tisková mluvčí - </span> - <span> - +420 778 111 466 + </section> + + <section class="grid-content-with-right-side mb-20"> + <h2 class="font-alt text-4xl mb-5"> + Kontakty pro média + </h2> + <div class="flex flex-wrap"> + <div class="flex mr-4 person-box"> + <div class="mr-7"> + <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" + alt="user image"> + </div> + <div class="flex flex-col py-4"> + <h6 class="font-bold text-3xl"> + Veronika Šmídová + </h6> + <span class="mb-6 text-grey-300"> + Tisková mluvčí </span> - <span class="text-turquoise-500"> - veronika.smidova@pirati.cz + <span> + +420 778 111 466 + </span> + <span class="text-turquoise-500"> + veronika.smidova@pirati.cz + </span> + </div> + </div> + <div class="flex mr-4 person-box"> + <div class="mr-7"> + <img class="rounded-full shadow-sm w-40 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" + alt="user image"> + </div> + <div class="flex flex-col py-4"> + <h6 class="font-bold text-3xl"> + Veronika Šmídová + </h6> + <span class="mb-6 text-grey-300"> + Tisková mluvčí </span> + <span> + +420 778 111 466 + </span> + <span class="text-turquoise-500"> + veronika.smidova@pirati.cz + </span> + </div> </div> </div> - </div> - </section> + </section> + </div> </main> {{> organisms-footer }} diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache index 0f5c453681efbd641d6206305e876f738db1ae5a..398d05afa4559ef71ebf1d713a4a6b92ef0362bc 100644 --- a/main/styleguide/source/_patterns/templates/homepage.mustache +++ b/main/styleguide/source/_patterns/templates/homepage.mustache @@ -9,65 +9,7 @@ {{> organisms-representatives-section }} {{> organisms-region-section }} {{> organisms-newsletter-section }} - - <div class="section-clip py-32 bg-no-repeat" - style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')"> - <div class="container--wide mx-auto px-4 pt-16"> - <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16"> - Buď v tom s námi - </h2> - <div class="flex flex-col justify-center items-center mb-32 md:flex-row"> - <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> - <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> - <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> - <a href="" class="btn btn__slide__wrap w-32 mt-"> - <span class="btn bg-black text-white w-32"> - Poslanecký klub - </span> - <span class="btn bg-white text-black w-32"> - Poslanecký klub - </span> - </a> - </div> - <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> - <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> - <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> - <a href="" class="btn btn__slide__wrap w-32 mt-"> - <span class="btn bg-black text-white w-32"> - Poslanecký klub - </span> - <span class="btn bg-white text-black w-32"> - Poslanecký klub - </span> - </a> - </div> - <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> - <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> - <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> - <a href="" class="btn btn__slide__wrap w-32 mt-"> - <span class="btn bg-black text-white w-32"> - Poslanecký klub - </span> - <span class="btn bg-white text-black w-32"> - Poslanecký klub - </span> - </a> - </div> - <div class="mb-1 w-80 h-80 flex bg-white flex-col items-center justify-center md:mr-1"> - <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8"> - <h5 class="head-alt-md mb-8">naloď se k pirátům</h5> - <a href="" class="btn btn__slide__wrap w-32 mt-"> - <span class="btn bg-black text-white w-32"> - Poslanecký klub - </span> - <span class="btn bg-white text-black w-32"> - Poslanecký klub - </span> - </a> - </div> - </div> - </div> - </div> + {{> organisms-box-links-section }} </main> {{> organisms-footer }} diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss index 97bfa548ea36f0e7d6913f32d401eee6023e702c..43917918b0fe98a59fe26909a292131388879c2c 100644 --- a/main/styleguide/source/css/atoms/heading.pcss +++ b/main/styleguide/source/css/atoms/heading.pcss @@ -146,23 +146,24 @@ .head-xl { - @apply text-base lg:text-xl font-bold leading-7 uppercase; + @apply font-alt text-base lg:text-xl font-medium leading-7 uppercase; } .head-2xl { - @apply text-2xl font-bold leading-8 uppercase + @apply font-alt text-2xl font-medium leading-8 uppercase; + letter-spacing: -0.01em; } .head-3xl { - @apply text-lg leading-4 uppercase xl:text-3xl xl:leading-8; + @apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8; } .head-4xl { - @apply text-xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10 lg:text-4xl; + @apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:text-4xl lg:leading-10 lg:text-4xl; } .head-7xl { - @apply text-3xl font-medium uppercase lg:text-7xl; + @apply font-alt text-3xl font-medium tracking-tight uppercase lg:text-7xl; } diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss index f16101df67646c2a15edd367cb11b40ee60b6998..ceb3598a895a1a3179ca1765b8f9009ba268c5cd 100644 --- a/main/styleguide/source/css/molecules/carousels.pcss +++ b/main/styleguide/source/css/molecules/carousels.pcss @@ -4,7 +4,7 @@ position: relative; .header-carousel--text { - @apply text-2xl uppercase font-medium lg:text-7xl; + @apply font-alt text-2xl uppercase lg:text-7xl; left: 10%; max-width: 1200px; position: absolute; diff --git a/majak/settings/base.py b/majak/settings/base.py index 7e52665f1fda2389fb129046c5a8f266036230d0..fcd7d96e0d8e475fe8344229e55ab06f17d8a4af 100644 --- a/majak/settings/base.py +++ b/majak/settings/base.py @@ -298,6 +298,9 @@ ELECTIONS2021_NEWSLETTER_SOURCE = env.str( "ELECTIONS2021_NEWSLETTER_SOURCE", "Koalice 2021" ) +PIRATICZ_NEWSLETTER_ID = env.int("PIRATICZ_NEWSLETTER_ID", default=0) +PIRATICZ_NEWSLETTER_SOURCE = env.str("PIRATICZ_NEWSLETTER_SOURCE", "Piráti.cz") + # URL pointing to MapProxy instance to use. # MapProxy is used to serve map tiles to hide client details from the tile provider. # @see: https://mapproxy.org/ diff --git a/shared/forms.py b/shared/forms.py new file mode 100644 index 0000000000000000000000000000000000000000..98a3256a7470721a9ddf5a28b3fa03ff34190498 --- /dev/null +++ b/shared/forms.py @@ -0,0 +1,7 @@ +from django import forms + + +class SubscribeForm(forms.Form): + email = forms.EmailField() + confirmed = forms.BooleanField() + return_page_id = forms.IntegerField()