Skip to content
Snippets Groups Projects
Commit 0d42e82a authored by Alexa Valentová's avatar Alexa Valentová
Browse files

semi-finish nakopneme styles

parent 4079c546
No related branches found
No related tags found
No related merge requests found
Pipeline #21100 passed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 446 additions and 1 deletion
majak_uistyleguide/static/images/nakopneme/politicians.png 0 → 100644
+ 0
− 0
View file @ 0d42e82a
majak_uistyleguide/static/images/nakopneme/politicians.png

1.12 MiB

majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.html
+ 1
− 1
View file @ 0d42e82a
......@@ -45,7 +45,7 @@
<div
class="
content-block aspect-video mb-10
content-block {% if not aspect_reverse %}aspect-video{% else %}aspect-[9_/_16]{% endif %} mb-10
{{ classes }}
......
majak_uistyleguide/templates/patterns/molecules/boxes/nakopneme/square_flip_card_box.html 0 → 100644
+ 64
− 0
View file @ 0d42e82a
<div class="flip-card h-[40rem] lg:h-[36rem]" tabindex="0">
<div class="flip-card-inner">
<div
class="flip-card-front nakopneme-gradient-bg-vertical"
>
<div
class="relative h-[40rem] lg:h-[36rem] overflow-hidden bg-cover p-6 text-center flex flex-col gap-6 justify-between"
>
<div>
<span class="font-condensed text-3xl mb-4">{{ title_top }}</span>
<h1
class="
font-alt text-5xl whitespace-pre-line nakopneme-font nakopneme-font-nocolor mb-2
"
>{{ title }}</h1>
<span class="font-condensed text-3xl mb-2">{{ title_bottom }}</span>
</div>
<div class="flex justify-center items-center">
<img
src="{{ image_url }}"
class="w-96 h-96 aspect-square"
width="500"
height="500"
>
</div>
<div
class="
bottom-8 left-8 text-left
absolute block text-white opacity-75 leading-5 font-condensed
md:hidden
"
>
Pro zobrazení detailů
<br>
se dotkni karty.
</div>
</div>
</div>
<div
class="flip-card-back p-10 nakopneme-gradient-bg-vertical"
>
<div class="prose prose-black">
{% comment %}
WARNING: This is generated by the styleguide implementation.
Don't keep the |safe!
{% endcomment %}
{{ content|safe }}
</div>
{% if button_text %}
<div class="flex justify-center items-center my-5">
{% include 'patterns/atoms/buttons/round_button.html' with button_text=button_text %}
</div>
{% endif %}
</div>
</div>
</div>
majak_uistyleguide/templates/patterns/molecules/boxes/nakopneme/square_flip_card_box.yaml 0 → 100644
+ 30
− 0
View file @ 0d42e82a
context:
title_top: 'Chci být'
title: 'Dobrovolník/ce'
title_bottom: 'jako Marcela, 44 let'
image_url: '../../../../../static/images/onboarding/member.png'
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
</h2>
<p>
<u>Jako člen pirátské strany máš právo:</u>
</p>
<ul>
<li>
být informován o činnostech strany
</li>
<li>
podílet se na utváření politiky strany
</li>
<li>
kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
</li>
</ul>
<p>
Ozve se ti koordinátor/ka a provede tě přijímacím procesem
</p>
button_text: 'Chci se zapojit!'
\ No newline at end of file
majak_uistyleguide/templates/patterns/organisms/cards/square_flip_card_list.html 0 → 100644
+ 5
− 0
View file @ 0d42e82a
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
{% for card in cards %}
{% include 'patterns/molecules/boxes/nakopneme/square_flip_card_box.html' with title=card.title image_url=card.image_url background_url=card.background_url title_color=card.title_color content=card.content button_text=card.button_text %}
{% endfor %}
</div>
majak_uistyleguide/templates/patterns/organisms/cards/square_flip_card_list.yaml 0 → 100644
+ 86
− 0
View file @ 0d42e82a
context:
cards:
-
title: Dobrovolník/ce
image_url: '../../../../../static/images/onboarding/regp.webp'
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
</h2>
<p>
<u>Jako člen pirátské strany máš právo:</u>
</p>
<ul>
<li>
být informován o činnostech strany
</li>
<li>
podílet se na utváření politiky strany
</li>
<li>
kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
</li>
</ul>
<p>
Ozve se ti koordinátor/ka a provede tě přijímacím procesem
</p>
button_text: 'Chci se zapojit!'
-
title: Dárce/dárkyně
image_url: '../../../../../static/images/onboarding/volunteer.webp'
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
</h2>
<p>
<u>Jako člen pirátské strany máš právo:</u>
</p>
<ul>
<li>
být informován o činnostech strany
</li>
<li>
podílet se na utváření politiky strany
</li>
<li>
kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
</li>
</ul>
<p>
Ozve se ti koordinátor/ka a provede tě přijímacím procesem
</p>
button_text: 'Chci se zapojit!'
-
title: Vysílač/ka
image_url: '../../../../../static/images/onboarding/newsletter.webp'
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
</h2>
<p>
<u>Jako člen pirátské strany máš právo:</u>
</p>
<ul>
<li>
být informován o činnostech strany
</li>
<li>
podílet se na utváření politiky strany
</li>
<li>
kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
</li>
</ul>
<p>
Ozve se ti koordinátor/ka a provede tě přijímacím procesem
</p>
button_text: 'Chci se zapojit!'
\ No newline at end of file
majak_uistyleguide/templates/patterns/organisms/header/nakopneme/helpus_header.html 0 → 100644
+ 127
− 0
View file @ 0d42e82a
{% block before_header_tag %}{% endblock %}
<header
class="
flex flex-col z-100 relative
{% block header_margin_class %}
mb-20
{% endblock %}
"
>
<div
class="
{% block classes %}
bg-black flex items-center w-full
{% block wrapper_sizing_classes %}pt-28 pb-8 xl:pt-48 xl:pb-24{% endblock %}
{% block extra_classes %}{% endblock %}
{% endblock %}
"
>
{% block content_container %}
<div class="flex justify-start w-full">
<div class="container--wide w-full">
{% block content %}
<div class="flex flex-col lg:grid grid-cols-10 gap-6">
<div class="flex flex-col col-span-5 items-start">
<h1
class="nakopneme-font text-[4rem] lg:text-[8rem] mb-6"
>
{{ title|safe }}
</h1>
<p class="text-white font-condensed text-2xl leading-8 mb-6">
{{ description }}
</p>
<form class="nakopneme-gradient-bg flex flex-col gap-4 p-6 form_control">
<div class="flex flex-col w-full lg:w-auto lg:flex-row gap-4 flex-nowrap">
<input
class="w-full lg:w-auto"
type="text"
name="name"
placeholder="Jméno"
>
<input
class="w-full lg:w-auto"
type="text"
name="surname"
placeholder="Příjmení"
>
</div>
<div class="flex flex-row flex-nowrap">
<input
class="w-full"
type="email"
name="email"
placeholder="E-mail"
>
</div>
<div class="flex flex-row gap-3">
<div class="flex gap-2 justify-center items-center">
<input
type="checkbox"
name="opt_dobrovolnik"
id="opt_dobrovolnik"
>
<label for="opt_dobrovolnik" class="font-bold !mb-0 !pb-0">Dobrovolník</label>
</div>
<div class="flex gap-2 justify-center items-center">
<input
type="checkbox"
name="opt_darce"
id="opt_darce"
>
<label for="opt_darce" class="font-bold !mb-0 !pb-0">Dárce</label>
</div>
<div class="flex gap-2 justify-center items-center">
<input
type="checkbox"
name="opt_vysilac"
id="opt_vysilac"
>
<label for="opt_vysilac" class="font-bold !mb-0 !pb-0">Vysílač</label>
</div>
</div>
<div class="flex flex-nowrap flex-row gap-2">
<input
type="checkbox"
id="personal_data_agreement"
name="personal_data_agreement"
aria-labelledby="personal_data_agreement_label"
required
>
<label for="personal_data_agreement">Souhlasím se zpracováním osobním údajů (povinné)</label>
</div>
<div>
{% include "patterns/atoms/buttons/round_button.html" with type="submit" classes="ml-auto bg-white text-black text-lg" show_arrow_on_hover=True button_text="Mám zájem!" %}
</div>
</form>
</div>
<div class="col-span-2"></div>
<div class="col-span-3">
{% include "patterns/atoms/youtube_video/youtube_video.html" with autoplay=True aspect_reverse=True %}
</div>
</div>
{% endblock %}
</div>
</div>
{% endblock %}
</div>
{% block after_header %}{% endblock %}
</header>
majak_uistyleguide/templates/patterns/organisms/header/nakopneme/helpus_header.yaml 0 → 100644
+ 4
− 0
View file @ 0d42e82a
context:
title: 'Nakopněte to<br>s námi!'
description: 'Potřebujeme každou pomocnou ruku a nohu. Pomoci můžete mnoha způsoby - veřejnou podporou na sociálních sítích, v terénu při kontaktní kampani, nebo přímo v našem týmu.'
\ No newline at end of file
majak_uistyleguide/templates/patterns/organisms/nakopneme/get_program.html 0 → 100644
+ 70
− 0
View file @ 0d42e82a
<div class="bg-black">
<div
class="container--wide pt-32"
id="{{ id }}"
>
<div class="flex flex-col lg:grid grid-cols-6 gap-6">
<div class="col-span-2">
<h4 class="nakopneme-font text-6xl mb-4">
{{ heading }}
</h4>
<h5 class="font-conensed font-bold text-white text-3xl mb-6">
{{ subheading }}
</h5>
<form class="nakopneme-gradient-bg flex flex-col gap-4 p-6 form_control">
<div class="flex flex-row gap-4 flex-nowrap">
<input
type="text"
name="name"
placeholder="Jméno"
>
<input
type="text"
name="surname"
placeholder="Příjmení"
>
</div>
<div class="flex flex-row flex-nowrap">
<input
class="w-full"
type="email"
name="email"
placeholder="E-mail"
>
</div>
<div class="flex flex-nowrap flex-row">
<input
type="checkbox"
id="personal_data_agreement"
name="personal_data_agreement"
aria-labelledby="personal_data_agreement_label"
required
>
<label
class="!text-sm"
for="personal_data_agreement"
>Souhlasím se zpracováním osobním údajů (povinné)</label>
</div>
<div>
{% include "patterns/atoms/buttons/round_button.html" with type="submit" classes="ml-auto bg-white text-black text-lg" show_arrow_on_hover=True button_text="Chci program!" %}
</div>
</form>
<div class="mt-6 mr-6 mb-16 lg:mb-0">
{% include "patterns/atoms/buttons/round_button.html" with classes="ml-auto bg-white text-black text-lg" show_arrow_on_hover=True button_text="Stáhnout v PDF" %}
</div>
</div>
<div class="col-span-4 flex justify-center items-center">
<img
src="{{ image_url }}"
>
</div>
</div>
</div>
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/organisms/nakopneme/get_program.yaml 0 → 100644
+ 4
− 0
View file @ 0d42e82a
context:
heading: 'Podívejte se na celý program'
subheading: 'Poslat celý program na email'
image_url: '../../../../../../../static/images/nakopneme/politicians.png'
\ No newline at end of file
majak_uistyleguide/templates/patterns/organisms/nakopneme/square_flip_cards.html 0 → 100644
+ 8
− 0
View file @ 0d42e82a
<div class="bg-white">
<div
class="container--wide pb-16"
id="{{ id }}"
>
{% include "patterns/organisms/cards/square_flip_card_list.html" %}
</div>
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/templates/nakopneme/helpus/helpus.html 0 → 100644
+ 13
− 0
View file @ 0d42e82a
{% if has_message %}
{% include 'patterns/molecules/blocks/message_block.html' with is_last_child=True %}
{% endif %}
{% include 'patterns/organisms/layout/main/navbar.html' %}
<main role="main">
{% include "patterns/organisms/header/nakopneme/helpus_header.html" %}
{% include "patterns/organisms/nakopneme/square_flip_cards.html" %}
</main>
{% include 'patterns/organisms/layout/footer.html' %}
majak_uistyleguide/templates/patterns/templates/nakopni/program/program.html → majak_uistyleguide/templates/patterns/templates/nakopneme/program/program.html
+ 1
− 0
View file @ 0d42e82a
......@@ -5,4 +5,5 @@
{% endblock %}
{% block newsletter %}
{% include 'patterns/organisms/nakopneme/get_program.html' %}
{% endblock %}
\ No newline at end of file
majak_uistyleguide/templates/patterns/templates/nakopneme/simple/simple_page.html 0 → 100644
+ 27
− 0
View file @ 0d42e82a
{% if has_message %}
{% include 'patterns/molecules/blocks/message_block.html' with is_last_child=True %}
{% endif %}
{% include 'patterns/organisms/layout/main/navbar.html' %}
<main role="main">
{% include "patterns/organisms/header/nakopneme/simple_header.html" %}
<div class="container--wide mb-2 lg:mb-12">
<div class="prose max-w-screen-lg">
{{ placeholder_text }}
</div>
</div>
<div class="container--wide mb-2 lg:mb-12">
<div class="prose max-w-screen-lg">
{{ placeholder_text }}
</div>
</div>
<div class="container--wide mb-2 lg:mb-12">
<div class="prose max-w-screen-lg">
{{ placeholder_text }}
</div>
</div>
</main>
{% include 'patterns/organisms/layout/footer.html' %}
majak_uistyleguide/templates/patterns/templates/nakopneme/simple/simple_page.yaml 0 → 100644
+ 2
− 0
View file @ 0d42e82a
context:
placeholder_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. 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?"'
\ No newline at end of file
src/css/style.pcss
+ 4
− 0
View file @ 0d42e82a
......@@ -149,6 +149,10 @@ a.icon-link:hover {
@apply !bg-gradient-to-r !from-[#CF7BCC] !to-[#FDC801];
}
.nakopneme-gradient-bg-vertical {
@apply !bg-gradient-to-t !from-[#CF7BCC] !to-[#FDC801];
}
.nakopneme-gradient-on-hover {
&:hover {
@apply nakopneme-gradient
......
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