diff --git a/district/blocks.py b/district/blocks.py index a1fb75c8175da9d5a20ead1eb4f9429554d2b1cb..d6c0374ceed2acc6a02943d23ca694decaac3c6b 100644 --- a/district/blocks.py +++ b/district/blocks.py @@ -256,6 +256,7 @@ class InteractiveProgramBlock(StructBlock): ("verejne-sluzby", "Veřejné služby"), ("zdravotni-pece", "Zdravotní péče"), ("sport", "Sport"), + ("sport-plavec", "Sport - plavec"), ("socialni-politika", "Sociální politika"), ("aktivni-verejnost", "Aktivní veřejnost"), ("priroda", "Příroda"), diff --git a/district/migrations/0096_districtelectioncampaignpage_show_program_points_inline_and_more.py b/district/migrations/0096_districtelectioncampaignpage_show_program_points_inline_and_more.py new file mode 100644 index 0000000000000000000000000000000000000000..8f3bdf38b1f686ce6b4fa85b651247bb968bdb70 --- /dev/null +++ b/district/migrations/0096_districtelectioncampaignpage_show_program_points_inline_and_more.py @@ -0,0 +1,25 @@ +# Generated by Django 4.0.7 on 2022-08-11 16:38 + +from django.db import migrations, models +import wagtail.blocks +import wagtail.fields + + +class Migration(migrations.Migration): + + dependencies = [ + ('district', '0095_alter_districtpersonpage_options_and_more'), + ] + + operations = [ + migrations.AddField( + model_name='districtelectioncampaignpage', + name='show_program_points_inline', + field=models.BooleanField(default=False, help_text='Hodí se v případě spousty krátkých bodů programu, z nichž si většina nezaslouží vlastní stránku.', verbose_name='Zobrazit obsah celého programu na jedné stránce'), + ), + migrations.AlterField( + model_name='districtinteractiveprogrampage', + name='content', + field=wagtail.fields.StreamField([('interactive_program_block', wagtail.blocks.StructBlock([('name', wagtail.blocks.CharBlock(label='Název části programu', required=True)), ('heading', wagtail.blocks.CharBlock(label='Nadpis', required=True)), ('description', wagtail.blocks.RichTextBlock(blank=True, label='Krátký popis, BEZ BODŮ', required=False)), ('icon', wagtail.blocks.ChoiceBlock(choices=[('verejne-sluzby', 'Veřejné služby'), ('zdravotni-pece', 'Zdravotní péče'), ('sport', 'Sport'), ('sport-plavec', 'Sport - plavec'), ('socialni-politika', 'Sociální politika'), ('aktivni-verejnost', 'Aktivní veřejnost'), ('priroda', 'Příroda'), ('vzdelavani', 'Vzdělávání'), ('kultura', 'Kultura'), ('otevrena-radnice', 'Otevřená radnice'), ('cestovni-ruch', 'Cestovní ruch'), ('doprava', 'Doprava'), ('bydleni', 'Bydlení')], label='Ikona')), ('program_items', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('content', wagtail.blocks.RichTextBlock(label='Obsah', required=True))]), label='Seznam bodů', required=True))]))], use_json_field=None, verbose_name='Části programu'), + ), + ] diff --git a/district/migrations/0097_alter_districtelectioncampaignpage_show_program_points_inline.py b/district/migrations/0097_alter_districtelectioncampaignpage_show_program_points_inline.py new file mode 100644 index 0000000000000000000000000000000000000000..972978cd045635b7e459948ec1e4c73ff3cfaee3 --- /dev/null +++ b/district/migrations/0097_alter_districtelectioncampaignpage_show_program_points_inline.py @@ -0,0 +1,18 @@ +# Generated by Django 4.0.7 on 2022-08-11 16:40 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('district', '0096_districtelectioncampaignpage_show_program_points_inline_and_more'), + ] + + operations = [ + migrations.AlterField( + model_name='districtelectioncampaignpage', + name='show_program_points_inline', + field=models.BooleanField(default=False, help_text='Hodí se v případě spousty krátkých bodů programu, z nichž si většina nezaslouží vlastní stránku.', verbose_name='Zobrazit obsah programu na jedné stránce'), + ), + ] diff --git a/district/migrations/0098_alter_districtelectionprogrampage_guarantor.py b/district/migrations/0098_alter_districtelectionprogrampage_guarantor.py new file mode 100644 index 0000000000000000000000000000000000000000..f154e65e9da7b707a095afa6d5cb71000a5b9bce --- /dev/null +++ b/district/migrations/0098_alter_districtelectionprogrampage_guarantor.py @@ -0,0 +1,19 @@ +# Generated by Django 4.0.7 on 2022-08-11 19:26 + +from django.db import migrations, models +import django.db.models.deletion + + +class Migration(migrations.Migration): + + dependencies = [ + ('district', '0097_alter_districtelectioncampaignpage_show_program_points_inline'), + ] + + operations = [ + migrations.AlterField( + model_name='districtelectionprogrampage', + name='guarantor', + field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.PROTECT, to='district.districtpersonpage', verbose_name='Garant'), + ), + ] diff --git a/district/migrations/0099_alter_districtelectionprogrampage_guarantor.py b/district/migrations/0099_alter_districtelectionprogrampage_guarantor.py new file mode 100644 index 0000000000000000000000000000000000000000..8e544f7b66370d01bd00bd000815b56681c91b2f --- /dev/null +++ b/district/migrations/0099_alter_districtelectionprogrampage_guarantor.py @@ -0,0 +1,19 @@ +# Generated by Django 4.0.7 on 2022-08-11 19:27 + +from django.db import migrations, models +import django.db.models.deletion + + +class Migration(migrations.Migration): + + dependencies = [ + ('district', '0098_alter_districtelectionprogrampage_guarantor'), + ] + + operations = [ + migrations.AlterField( + model_name='districtelectionprogrampage', + name='guarantor', + field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, to='district.districtpersonpage', verbose_name='Garant'), + ), + ] diff --git a/district/models.py b/district/models.py index b3530f5903119b760c34d8971b009c40d7a13491..ba7345ed7dbd23a4b11a82b4f70de698a2c165c7 100644 --- a/district/models.py +++ b/district/models.py @@ -856,7 +856,11 @@ class DistrictElectionProgramPage( ### FIELDS guarantor = models.ForeignKey( - "district.DistrictPersonPage", verbose_name="Garant", on_delete=models.PROTECT + "district.DistrictPersonPage", + verbose_name="Garant", + on_delete=models.PROTECT, + blank=True, + null=True, ) image = models.ForeignKey( "wagtailimages.Image", @@ -917,6 +921,11 @@ class DistrictElectionCampaignPage(DistrictElectionBasePage): max_length=128, help_text="Např. Program pro magistrát.", ) + show_program_points_inline = models.BooleanField( + "Zobrazit obsah programu na jedné stránce", + default=False, + help_text="Hodí se v případě spousty krátkých bodů programu, z nichž si většina nezaslouží vlastní stránku." + ) hero_headline = models.CharField( "Banner headline", max_length=128, @@ -976,6 +985,7 @@ class DistrictElectionCampaignPage(DistrictElectionBasePage): FieldPanel("number"), FieldPanel("candidate_list_title"), FieldPanel("program_point_list_title"), + FieldPanel("show_program_points_inline"), FieldPanel("content"), ], "Personalizace", diff --git a/district/static/district/svg/theme-icons/sport-plavec.svg b/district/static/district/svg/theme-icons/sport-plavec.svg new file mode 100644 index 0000000000000000000000000000000000000000..a729167596af8f2672c3f5806a22880efe4c25bc --- /dev/null +++ b/district/static/district/svg/theme-icons/sport-plavec.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + width="50mm" + height="50mm" + version="1.1" + viewBox="0 0 50 50" + id="svg7"> + <defs + id="defs11" /> + <metadata + id="metadata2"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <path + d="m 33.448763,31.618729 c -5.495869,0 -4.690306,-3.439903 -8.266348,-3.470254 -3.688769,0.03184 -2.758339,3.470254 -8.31664,3.470254 -3.405219,0 -4.831647,-1.596384 -5.394414,-2.153084 L 23.645862,19.39827 c -0.28546,-0.146458 -2.745333,-1.578176 -6.525151,-1.578176 -1.089982,0 -2.183433,0.121139 -3.254338,0.365062 l -3.346254,0.76689 c -0.209151,0.04849 -0.418303,0.07173 -0.6243332,0.07173 -1.3796033,0 -2.7713466,-1.110793 -2.7713466,-2.778283 0,-1.264275 0.8697312,-2.408019 2.1539504,-2.701976 l 3.3462534,-0.766891 c 1.479324,-0.338528 2.988129,-0.506145 4.492599,-0.506145 10.414229,0 15.382881,7.446044 15.443579,7.632476 l 2.041224,2.463498 c 1.820973,2.427964 2.748801,5.246136 2.956912,8.185704 -1.083911,0.66769 -2.540688,1.06657 -4.110194,1.06657 z M 0.18566731,38.295627 c 0,-1.312833 0.93823429,-2.479122 2.27621549,-2.72452 4.2073133,-0.770705 3.9454403,-2.556299 6.0352229,-2.556299 2.1695583,0 2.7045773,2.756607 8.3400533,2.756607 4.213383,0 6.305767,-1.91289 6.362998,-1.961449 0.532504,-0.533892 1.236527,-0.796719 1.944105,-0.796719 2.146147,0 2.739263,2.75834 8.341789,2.75834 4.213381,0 6.303163,-1.910287 6.365597,-1.958846 0.531117,-0.533892 1.239996,-0.801661 1.947574,-0.801661 0.699947,0 1.397812,0.262393 1.940637,0.771832 2.515542,2.276216 6.395082,1.08738 6.395082,4.516012 0,1.394343 -1.107326,2.780884 -2.749669,2.780884 -0.847185,0 -3.43817,-0.636473 -5.572175,-1.89381 -1.696106,0.999974 -4.462251,2.066544 -8.32965,2.066544 -3.867398,0 -6.63354,-1.137674 -8.324444,-2.138344 -1.693504,0.999802 -4.463117,2.132274 -8.324445,2.132274 -3.866532,0 -6.638745,-1.135073 -8.3296481,-2.134875 C 6.3622323,40.375006 3.7582418,41.004542 2.9344685,41.004542 1.2955933,41.079112 0.18566731,39.70905 0.18566731,38.295627 Z M 41.885934,23.294284 c -3.065301,0 -5.54963,-2.484326 -5.54963,-5.54963 0,-3.065303 2.484329,-5.54963 5.54963,-5.54963 3.065304,0 5.549633,2.484327 5.549633,5.54963 0,3.060968 -2.562371,5.54963 -5.549633,5.54963 z" + id="icon" + style="stroke-width:0.0867129" /> +</svg> diff --git a/district/templates/district/district_election_campaign_page.html b/district/templates/district/district_election_campaign_page.html index c0c3d0dca1c7f8231f2b7f6b76ed128b21c18f09..a75fa7a3f1b1a8a7445929e8e5f2223dfe6f3743 100644 --- a/district/templates/district/district_election_campaign_page.html +++ b/district/templates/district/district_election_campaign_page.html @@ -106,28 +106,55 @@ {% if page.program_points %} <template v-if="isCurrentView('program')"> - <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">{{ page.program_point_list_title|default:"Volební program" }}</h1> - - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> + <h1 + class="head-alt-md text-center py-8 lg:pt-24 {% if not page.show_program_points_inline %}lg:pb-8{% else %}pb-0{% endif %}" + >{{ page.program_point_list_title|default:"Volební program" }}</h1> + {% if page.show_program_points_inline %} {% for program_point in page.program_points %} - <div class="card card--hoveractive"> - <a href="{% pageurl program_point %}"> - {% image program_point.image width-357 as list_image %} - <img src="{{ list_image.url }}" alt="{{ program_point.title }}" class="w-full h-48 object-cover"> - </a> - <div class="card__body p-4"> - <h1 class="card-headline mb-2"> - <a href="{% pageurl program_point %}"> - {{ program_point.title }} - </a> - </h1> - <p class="card-body-text"> - {{ program_point.perex }} - </p> - </div> - </div> + <h2 class="head-alt-md mb-2 mt-8"> + {{ program_point.title }} + </h2> + <p + class="font-bold text-lg leading-normal {% if program_point.guarantor is not none %}mb-3{% else %}mb-5{% endif %}" + > + {{ program_point.perex }} + </p> + + {% if program_point.guarantor is not none %} + <p class="mb-5 text-grey-300"> + Garant: + <a + href="{{ program_point.guarantor.url }}" + >{{ program_point.guarantor }}</a> + </p> + {% endif %} + + {% for block in program_point.content %} + {% include_block block %} + {% endfor %} {% endfor %} - </div> + {% else %} + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> + {% for program_point in page.program_points %} + <div class="card card--hoveractive"> + <a href="{% pageurl program_point %}"> + {% image program_point.image width-357 as list_image %} + <img src="{{ list_image.url }}" alt="{{ program_point.title }}" class="w-full h-48 object-cover"> + </a> + <div class="card__body p-4"> + <h1 class="card-headline mb-2"> + <a href="{% pageurl program_point %}"> + {{ program_point.title }} + </a> + </h1> + <p class="card-body-text"> + {{ program_point.perex }} + </p> + </div> + </div> + {% endfor %} + </div> + {% endif %} </template> {% endif %} </section> diff --git a/district/templates/district/district_election_program_page.html b/district/templates/district/district_election_program_page.html index 92306473114ad882cc2a734f7ba09d1d67857644..6a8b035700bcd3e00b6ad473ddc5861bb9fcd318 100644 --- a/district/templates/district/district_election_program_page.html +++ b/district/templates/district/district_election_program_page.html @@ -3,7 +3,11 @@ {% block content %} <div class="lg:flex lg:space-x-8 xl:space-x-16"> - <section class="lg:w-3/5 xl:w-2/3"> + <section + {% if page.guarantor is not none %} + class="lg:w-3/5 xl:w-2/3" + {% endif %} + > <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4"> {{ page.title }} </h1> @@ -16,17 +20,19 @@ {% endfor %} </section> - <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0"> - <div class="lg:card lg:elevation-10"> - <div class="lg:card__body"> - <h2 class="head-heavy-sm mb-4"><a href="{% pageurl page.root_election_page %}">{{ page.root_election_page.title }}</a></h2> + {% if page.guarantor is not none %} + <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0"> + <div class="lg:card lg:elevation-10"> + <div class="lg:card__body"> + <h2 class="head-heavy-sm mb-4"><a href="{% pageurl page.root_election_page %}">{{ page.root_election_page.title }}</a></h2> - {% include "shared/person_badge_snippet.html" with person_page=page.guarantor title="Garant bodu" %} - <hr /> + {% include "shared/person_badge_snippet.html" with person_page=page.guarantor title="Garant bodu" %} + <hr /> - {% include "district/includes/election_subpage_sidebar_content.html" %} + {% include "district/includes/election_subpage_sidebar_content.html" %} + </div> </div> - </div> - </section> + </section> + {% endif %} </div> {% endblock content %} diff --git a/main/menu.py b/main/menu.py new file mode 100644 index 0000000000000000000000000000000000000000..2003749f8f47219e7256782ef8bbb6d9a6b56060 --- /dev/null +++ b/main/menu.py @@ -0,0 +1,29 @@ +from wagtail.core.fields import StreamField + +from shared.blocks import MenuItemBlock as MenuItemBlockBase +from shared.models import MenuMixin as MenuMixinBase + + +class MenuItemBlock(MenuItemBlockBase): + class Meta: + label = "Položka v menu" + template = "main/includes/menu_item.html" + + +# +# +# class MenuParentBlock(MenuParentBlockBase): +# class Meta: +# label = "Podmenu" +# template = "styleguide/2.3.x/menu_parent.html" + + +class MenuMixin(MenuMixinBase): + menu = StreamField( + [("menu_item", MenuItemBlock())], # , ("menu_parent", MenuParentBlock()) + verbose_name="Menu", + blank=True, + ) + + class Meta: + abstract = True diff --git a/main/migrations/0008_alter_mainhomepage_menu.py b/main/migrations/0008_alter_mainhomepage_menu.py new file mode 100644 index 0000000000000000000000000000000000000000..39b876dc6513fb0a3695784fccd3f682843ec0f2 --- /dev/null +++ b/main/migrations/0008_alter_mainhomepage_menu.py @@ -0,0 +1,51 @@ +# Generated by Django 4.0.7 on 2022-08-23 14:46 + +import wagtail.blocks +import wagtail.fields +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ("main", "0007_mainarticlepage_region_and_more"), + ] + + operations = [ + migrations.AlterField( + model_name="mainhomepage", + name="menu", + field=wagtail.fields.StreamField( + [ + ( + "menu_item", + wagtail.blocks.StructBlock( + [ + ( + "title", + wagtail.blocks.CharBlock( + label="Titulek", required=True + ), + ), + ( + "page", + wagtail.blocks.PageChooserBlock( + label="Stránka", required=False + ), + ), + ( + "link", + wagtail.blocks.URLBlock( + label="Odkaz", required=False + ), + ), + ] + ), + ) + ], + blank=True, + use_json_field=None, + verbose_name="Menu", + ), + ), + ] diff --git a/main/migrations/0009_rename_footer_social_links_mainhomepage_social_links.py b/main/migrations/0009_rename_footer_social_links_mainhomepage_social_links.py new file mode 100644 index 0000000000000000000000000000000000000000..44e81ee6a32cdc1ae1601b2919e6f6f540eda85f --- /dev/null +++ b/main/migrations/0009_rename_footer_social_links_mainhomepage_social_links.py @@ -0,0 +1,18 @@ +# Generated by Django 4.0.7 on 2022-08-23 15:15 + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ("main", "0008_alter_mainhomepage_menu"), + ] + + operations = [ + migrations.RenameField( + model_name="mainhomepage", + old_name="footer_social_links", + new_name="social_links", + ), + ] diff --git a/main/models.py b/main/models.py index f547cc8dc316d360858c05d89cc09f9cea36b003..3f57c94e8f3cbe66863389ba795699fe3c8bcc5f 100644 --- a/main/models.py +++ b/main/models.py @@ -20,11 +20,10 @@ from wagtailmetadata.models import MetadataPageMixin from elections2021.constants import REGION_CHOICES # pozor, import ze sousedního modulu from shared.const import RICH_TEXT_DEFAULT_FEATURES from shared.forms import SubscribeForm -from shared.models import ( +from shared.models import ( # MenuMixin, ArticleMixin, ExtendedMetadataHomePageMixin, ExtendedMetadataPageMixin, - MenuMixin, SubpageMixin, ) from shared.utils import make_promote_panels, subscribe_to_newsletter @@ -32,15 +31,11 @@ from tuning import admin_help from twitter_utils.models import Tweet from . import blocks +from .menu import MenuMixin class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page): - # settings - matomo_id = models.IntegerField( - "Matomo ID pro sledování návštěvnosti", blank=True, null=True - ) - # header contact_newcomers = models.URLField( @@ -68,14 +63,6 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, ) # footer - footer_social_links = StreamField( - [ - ("social_links", blocks.SocialLinkBlock()), - ], - verbose_name="Odkazy na sociální sítě v zápatí webu", - blank=True, - ) - footer_other_links = StreamField( [ ("other_links", blocks.OtherLinksBlock()), @@ -91,6 +78,19 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, max_num=6, ) + # settings + matomo_id = models.IntegerField( + "Matomo ID pro sledování návštěvnosti", blank=True, null=True + ) + + social_links = StreamField( + [ + ("social_links", blocks.SocialLinkBlock()), + ], + verbose_name="Odkazy na sociální sítě v zápatí webu", + blank=True, + ) + twitter_usernames = StreamField( [("username", CharBlock(label="Twitter uživatelské jméno"))], verbose_name="Uživatelská jména pro synchronizované twitter účty", @@ -100,7 +100,6 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, content_panels = Page.content_panels + [ FieldPanel("content"), - FieldPanel("footer_social_links"), FieldPanel("footer_other_links"), FieldPanel("footer_person_list"), ] @@ -108,6 +107,7 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, settings_panels = [ FieldPanel("contact_newcomers"), FieldPanel("donation_page"), + FieldPanel("social_links"), FieldPanel("matomo_id"), FieldPanel("twitter_usernames"), ] @@ -212,13 +212,16 @@ class MainWorkPage(ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin, P current_month_data = self.get_empty_month_data(timezone.now().date()) - for idx, article in enumerate(sorted_article_qs): - if article.date.month != current_month_data["month_text"]: + article_counter = 1 + for article in sorted_article_qs: + if article.date.month != current_month_data["month_number"]: article_data_list.append(current_month_data) # append completed month current_month_data = self.get_empty_month_data(article.date) + article_counter = 1 - current_column = "left_column" if idx % 2 else "right_column" + current_column = "left_column" if article_counter % 2 else "right_column" current_month_data[current_column].append(article) + article_counter += 1 article_data_list.append(current_month_data) # last iteration diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css index c86c1433fd8a79ce0b5d79a1f71dc5d6e6b1d1fa..8d97531730f1a3676840d066611b1c9ea5150bce 100644 --- a/main/static/main/css/styles.css +++ b/main/static/main/css/styles.css @@ -1378,7 +1378,9 @@ video { width: 882px; } -.container--medium { +.container--medium{ + padding-left: 1.25rem; + padding-right: 1.25rem; margin: auto; max-width: 1300px; } @@ -1425,24 +1427,17 @@ video { max-width: 1150px; } -@responsive { - @media (min-width: 1200px) { - .grid-container { - grid-template-columns: 240px 1fr 102px; - grid-template-areas: - "left-side content right-side"; - margin-left: 10% +.grid-container.article-section { + max-width: 1400px; } - } -} .grid-content { grid-area: content; } .grid-full { - grid-column-start: left-side;; - grid-column-end: right-side; + grid-column: left-side / right-side; + grid-row: left-side / right-side; } .grid-left-side { @@ -1454,33 +1449,11 @@ video { } .grid-content-with-right-side { - grid-column-start: content; - grid-column-end: right-side; -} - -@responsive { - /* Removes default container padding from the element. */ - /* @note: needs to be kept in sync with tailwind configuration */ - .container-padding--zero { - margin-left: -1rem; - margin-right: -1rem; - } - - @media (min-width: 1200px) { - .container-padding--zero { - margin-left: -2rem; - margin-right: -2rem - } - } - - .container-padding--auto { - margin-left: 0; - margin-right: 0; - } + grid-column: content / right-side; } .footer-section { - height: 981px; + height: 450px; } .person-box-medium { @@ -1502,7 +1475,7 @@ video { } .simple-header-height { - height: 26rem; + height: 13rem; } .flag { @@ -1891,6 +1864,14 @@ video { max-width: 32rem; } +.checkbox label{ + font-size: .875rem; +} + +.checkbox label{ + font-weight: 500; +} + .checkbox label{ text-transform: uppercase; } @@ -1899,6 +1880,13 @@ video { line-height: 1.25; } +@media (min-width: 1200px){ + + .checkbox label{ + font-size: 1rem; + } +} + .checkbox:after{ pointer-events: none; } @@ -2085,191 +2073,6 @@ video { line-height: 1.25; } -@responsive { - .head-alt-xl, - .content-block .head-alt-xl{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 5.3rem; - font-weight: 400; - line-height: 0.96; - } - - .head-alt-lg, - .content-block .head-alt-lg{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 4rem; - font-weight: 400; - line-height: 0.96; - } - - .head-alt-md, - .content-block .head-alt-md{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 2.45rem; - font-weight: 400; - line-height: 0.96; - } - - .head-alt-base, - .content-block .head-alt-base{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 1.875rem; - font-weight: 400; - line-height: 0.96; - } - - .head-alt-sm, - .content-block .head-alt-sm{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 1.6rem; - font-weight: 400; - line-height: 0.96; - } - - .head-alt-xs, - .content-block .head-alt-xs{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 1.3rem; - font-weight: 400; - line-height: 0.96; - } - - .head-alt-2xs, - .content-block .head-alt-2xs{ - font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 1.125rem; - font-weight: 400; - line-height: 0.96; - } - - - - .head-base, - .content-block .head-base{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.875rem; - font-weight: 500; - line-height: 1.25; - } - - .head-sm, - .content-block .head-sm{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.6rem; - font-weight: 500; - line-height: 1.25; - } - - .head-xs, - .content-block .head-xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.3rem; - font-weight: 500; - line-height: 1.25; - } - - .head-2xs, - .content-block .head-2xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.125rem; - font-weight: 500; - line-height: 1.25; - } - - - - .head-heavy-base, - .content-block .head-heavy-base{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.875rem; - font-weight: 700; - line-height: 1.25; - } - - .head-heavy-sm, - .content-block .head-heavy-sm{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.6rem; - font-weight: 700; - line-height: 1.25; - } - - .head-heavy-xs, - .content-block .head-heavy-xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.3rem; - font-weight: 700; - line-height: 1.25; - } - - .head-heavy-2xs, - .content-block .head-heavy-2xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.125rem; - font-weight: 700; - line-height: 1.25; - } - - - - .head-allcaps-2xs, - .content-block .head-allcaps-2xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.125rem; - font-weight: 400; - text-transform: uppercase; - line-height: 1.25; - } - - .head-allcaps-3xs, - .content-block .head-allcaps-3xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: 400; - text-transform: uppercase; - line-height: 1.25; - } - - .head-allcaps-4xs, - .content-block .head-allcaps-4xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: .875rem; - font-weight: 400; - text-transform: uppercase; - line-height: 1.25; - } - - - - - .head-allcaps-heavy-2xs, - .content-block .head-allcaps-heavy-2xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1.125rem; - font-weight: 700; - text-transform: uppercase; - line-height: 1.25; - } - - .head-allcaps-heavy-3xs, - .content-block .head-allcaps-heavy-3xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: 700; - text-transform: uppercase; - line-height: 1.25; - } - - .head-allcaps-heavy-4xs, - .content-block .head-allcaps-heavy-4xs{ - font-family: Roboto Condensed, Helvetica, Arial, sans-serif; - font-size: .875rem; - font-weight: 700; - text-transform: uppercase; - line-height: 1.25; - } -} - .header-clip { -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%); @@ -2333,6 +2136,13 @@ video { } } +@media (min-width: 1200px){ + + .head-4xl{ + font-size: 2.45rem; + } +} + .head-7xl{ font-family: Bebas Neue, Helvetica, Arial, sans-serif; font-size: 1.875rem; @@ -2341,13 +2151,28 @@ video { letter-spacing: -0.025em; } -@media (min-width: 992px){ +@media (min-width: 1200px){ .head-7xl{ font-size: 5.3rem; } } +.head-8xl{ + font-family: Bebas Neue, Helvetica, Arial, sans-serif; + font-size: 2.45rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: -0.025em; +} + +@media (min-width: 1200px){ + + .head-8xl{ + font-size: 6.25rem; + } +} + p{ font-size: .875rem; line-height: 1.5rem; @@ -2382,6 +2207,13 @@ p{ text-transform: uppercase; } +@media (min-width: 576px){ + + .header-carousel .header-carousel--text{ + font-size: 3rem; + } +} + @media (min-width: 992px){ .header-carousel .header-carousel--text{ @@ -2390,21 +2222,28 @@ p{ } .header-carousel .header-carousel--text { - left: 10%; max-width: 1200px; position: absolute; - top: 20%; + top: 35%; + margin-left: 15%; } @media (min-width: 576px) { .header-carousel .header-carousel--text { - top: 35% + margin-left: 10% } } @media (min-width: 992px) { +.header-carousel .header-carousel--text { + top: 30% + } + } + +@media (min-width: 1366px) { + .header-carousel .header-carousel--text { top: 45% } @@ -2425,30 +2264,34 @@ p{ clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%); } +.header-carousel .slick-active { + z-index: 1000; + } + .header-carousel .slick-active img { transform: scale(1, 1); } .header-carousel .slick-active .header-carousel--text { - -webkit-animation: right_to_left 500ms ease; - animation: right_to_left 500ms ease; + -webkit-animation: right_to_left 1s ease; + animation: right_to_left 1s ease; } @-webkit-keyframes right_to_left { from { - left: 15%; + margin-left: 20%; } to { - left: 10%; + margin-left: 10%; } } @keyframes right_to_left { from { - left: 15%; + margin-left: 20%; } to { - left: 10%; + margin-left: 10%; } } @@ -2536,14 +2379,23 @@ p{ } .btn{ - display: inline-block; - height: 2.75rem; + display: inline-flex; + height: 2rem; + align-items: center; + justify-content: center; padding-top: 0.25rem; padding-bottom: 0.25rem; font-family: Bebas Neue, Helvetica, Arial, sans-serif; line-height: 2.25rem; } +@media (min-width: 1200px){ + + .btn{ + height: 2.75rem; + } +} + .btn__slide__wrap { overflow: hidden; position: relative; @@ -2569,21 +2421,24 @@ p{ } .switch{ - display: inline-flex; + display: flex; + flex-wrap: wrap; + justify-content: center; } .switch__item{ margin-right: 0.5rem; + margin-bottom: 0.5rem; cursor: pointer; --tw-bg-opacity: 1; background-color: rgb(236 236 236 / var(--tw-bg-opacity)); - padding-left: 2rem; - padding-right: 2rem; - padding-top: 1rem; - padding-bottom: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; text-align: center; font-family: Bebas Neue, Helvetica, Arial, sans-serif; - font-size: 1.3rem; + font-size: 1.125rem; font-weight: 400; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -2678,10 +2533,6 @@ p{ background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -.main-menu__main .menu-link{ - padding: 0.75rem; -} - .main-menu__main .menu-link{ font-family: Roboto Condensed, Helvetica, Arial, sans-serif; } @@ -2718,10 +2569,25 @@ p{ } } +.navbar-background { + background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%); +} + +.main-menu-grid { + max-width: none; + grid-template-areas: + "content" +} + +.menu-flag { + position: absolute; + left: 0; + width: 110px; +} + .main-menu__external{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - padding: 0.75rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); grid-area: external; @@ -2732,7 +2598,7 @@ p{ display: flex !important; } .main-menu { - grid-template-areas: "logo main social external"; + grid-template-areas: "main social external"; flex-wrap: nowrap; } @@ -2748,6 +2614,10 @@ p{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } + + .menu-flag { + width: 260px; + } } /** @@ -2783,38 +2653,22 @@ p{ grid-column-start: 2; } -.col-start-1{ - grid-column-start: 1; -} - .col-end-13{ grid-column-end: 13; } -.col-end-2{ - grid-column-end: 2; -} - -.col-end-4{ - grid-column-end: 4; -} - .clear-both{ clear: both; } -.m-3{ - margin: 0.75rem; -} - .mx-auto{ margin-left: auto; margin-right: auto; } -.my-4{ - margin-top: 1rem; - margin-bottom: 1rem; +.my-2{ + margin-top: 0.5rem; + margin-bottom: 0.5rem; } .mx-8{ @@ -2886,6 +2740,10 @@ p{ margin-right: 1.5rem; } +.mb-1{ + margin-bottom: 0.25rem; +} + .mb-16{ margin-bottom: 4rem; } @@ -2894,10 +2752,6 @@ p{ margin-right: 1.75rem; } -.mb-1{ - margin-bottom: 0.25rem; -} - .mb-7{ margin-bottom: 1.75rem; } @@ -2906,10 +2760,6 @@ p{ margin-top: 6rem; } -.mb-24{ - margin-bottom: 6rem; -} - .mb-32{ margin-bottom: 8rem; } @@ -2934,6 +2784,10 @@ p{ margin-right: 1.25rem; } +.mt-4{ + margin-top: 1rem; +} + .mb-3{ margin-bottom: 0.75rem; } @@ -2942,6 +2796,10 @@ p{ margin-bottom: 3.5rem; } +.mb-24{ + margin-bottom: 6rem; +} + .mb-40{ margin-bottom: 10rem; } @@ -2954,10 +2812,6 @@ p{ margin-top: 0.25rem; } -.mt-4{ - margin-top: 1rem; -} - .block{ display: block; } @@ -3010,8 +2864,8 @@ p{ width: 100%; } -.w-60{ - width: 15rem; +.w-10\/12{ + width: 83.333333%; } .w-44{ @@ -3038,10 +2892,6 @@ p{ width: 5rem; } -.w-3\/4{ - width: 75%; -} - .w-1\/2{ width: 50%; } @@ -3078,14 +2928,14 @@ p{ max-width: 24rem; } -.max-w-xs{ - max-width: 20rem; -} - .max-w-md{ max-width: 28rem; } +.max-w-xs{ + max-width: 20rem; +} + .shrink-0{ flex-shrink: 0; } @@ -3158,10 +3008,6 @@ p{ justify-content: space-between; } -.justify-around{ - justify-content: space-around; -} - .gap-3{ gap: 0.75rem; } @@ -3172,12 +3018,6 @@ p{ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } -.space-x-6 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(1.5rem * var(--tw-space-x-reverse)); - margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); -} - .space-x-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); @@ -3368,10 +3208,6 @@ p{ padding-top: 10rem; } -.pt-24{ - padding-top: 6rem; -} - .pb-4{ padding-bottom: 1rem; } @@ -3392,14 +3228,6 @@ p{ padding-bottom: 13rem; } -.pt-8{ - padding-top: 2rem; -} - -.pt-14{ - padding-top: 3.5rem; -} - .text-center{ text-align: center; } @@ -3448,10 +3276,6 @@ p{ font-size: 2.45rem; } -.text-8xl{ - font-size: 6.25rem; -} - .text-base{ font-size: 1rem; } @@ -3460,10 +3284,6 @@ p{ font-size: 1.3rem; } -.text-9xl{ - font-size: 7.5rem; -} - .font-bold{ font-weight: 700; } @@ -3488,6 +3308,10 @@ p{ line-height: 1.25rem; } +.leading-4{ + line-height: 1rem; +} + .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -3581,6 +3405,15 @@ p{ /* @note: needs to be kept in sync with tailwind configuration */ +@media (min-width: 1200px) { + .simple-header-height { + height: 26rem; + } + .footer-section { + height: 981px; + } + } + .head-alt-md, .content-block .head-alt-md{ font-family: Bebas Neue, Helvetica, Arial, sans-serif; @@ -3597,6 +3430,16 @@ p{ line-height: 0.96; } +@media (min-width: 1200px) { + .switch__item{ + padding-left: 2rem; + padding-right: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + font-size: 1.3rem; + } + } + .slick-track[data-v-e4caeaf8]{position:relative;top:0;left:0;display:block;transform:translateZ(0)} .slick-track.slick-center[data-v-e4caeaf8]{margin-left:auto;margin-right:auto} @@ -3840,6 +3683,11 @@ a.icon-link:hover span{ grid-column: span 3 / span 3; } + .xl\:my-3{ + margin-top: 0.75rem; + margin-bottom: 0.75rem; + } + .xl\:mb-20{ margin-bottom: 5rem; } @@ -3852,6 +3700,14 @@ a.icon-link:hover span{ margin-bottom: 1.5rem; } + .xl\:mb-16{ + margin-bottom: 4rem; + } + + .xl\:mb-24{ + margin-bottom: 6rem; + } + .xl\:mb-28{ margin-bottom: 7rem; } @@ -3860,10 +3716,18 @@ a.icon-link:hover span{ margin-bottom: 0px; } + .xl\:mr-2{ + margin-right: 0.5rem; + } + .xl\:mb-32{ margin-bottom: 8rem; } + .xl\:mb-12{ + margin-bottom: 3rem; + } + .xl\:block{ display: block; } @@ -3880,10 +3744,26 @@ a.icon-link:hover span{ height: 100vh; } + .xl\:w-60{ + width: 15rem; + } + .xl\:w-full{ width: 100%; } + .xl\:w-1\/4{ + width: 25%; + } + + .xl\:max-w-xl{ + max-width: 36rem; + } + + .xl\:flex-row{ + flex-direction: row; + } + .xl\:justify-end{ justify-content: flex-end; } @@ -3892,19 +3772,81 @@ a.icon-link:hover span{ gap: 1.25rem; } + .xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } + .xl\:bg-transparent{ background-color: transparent; } - .xl\:p-6{ - padding: 1.5rem; + .xl\:py-6{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; } .xl\:pt-0{ padding-top: 0px; } + .xl\:pt-24{ + padding-top: 6rem; + } + + .xl\:pt-8{ + padding-top: 2rem; + } + + .xl\:pt-14{ + padding-top: 3.5rem; + } + + .xl\:text-4xl{ + font-size: 2.45rem; + } + + .xl\:text-9xl{ + font-size: 7.5rem; + } + + .xl\:text-base{ + font-size: 1rem; + } + + .xl\:text-xl{ + font-size: 1.3rem; + } + + .xl\:leading-6{ + line-height: 1.5rem; + } + .xl\:duration-200{ transition-duration: 200ms; } + + .xl\:head-alt-lg, + .content-block .xl\:head-alt-lg{ + font-family: Bebas Neue, Helvetica, Arial, sans-serif; + font-size: 4rem; + font-weight: 400; + line-height: 0.96; + } +} + +@media (min-width: 1366px){ + + .\32xl\:space-x-6 > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(1.5rem * var(--tw-space-x-reverse)); + margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); + } + + .\32xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); + } } diff --git a/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache b/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache index a453bfe25cebc8bce6cb3bb889ebca88d464c58d..ba16df74bb7aee64994a01249f064f016def1dab 100644 --- a/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache +++ b/main/styleguide/source/_patterns/atoms/form-fields/form-checkbox.mustache @@ -1,4 +1,4 @@ <div class="checkbox form-field__control {{ classes }}"> <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}> - <label for="checkbox_1">{{ label }}</label> + <label class="text-xs font-bold" for="checkbox_1">{{ label }}</label> </div> diff --git a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache index 4fad5b1395b2114ec5510b7ad47dbc542b5360ba..3e75ea8f0623eb10afb6f4f0d4732768add1311d 100644 --- a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache +++ b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache @@ -1,7 +1,7 @@ <div class="grid-container mb-2 lg:mb-12"> <div class="grid-left-side h-full bg-grey-150 left-tab"> <div class="p-6"> - <span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br> + <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br> </div> </div> <div class="grid-content leading-6"> diff --git a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache b/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache index daea5bfef2e0e6c086935145acc5f2a0896c80e0..b6154c0fe83b5ed890a9ceb8f991066cc3b719dc 100644 --- a/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache +++ b/main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache @@ -1,13 +1,13 @@ <header - class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full" + class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center" style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')" > <div class="grid-container header-max-width pt-16"> - <div class="col-start-2 col-end-13"> + <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0"> <div class="text-3xl text-green-500 mb-8"> <span>2.3.2022</span> </div> - <h1 class="font-alt text-white text-6xl"> + <h1 class="font-alt text-white text-3xl md:text-5xl lg:text-6xl"> Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině </h1> diff --git a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache index 5ad0f6db7aebd6d7619402634094a657a9930a3c..c331fff40854b87855f8c9e23534ca3dbeb3a667 100644 --- a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache +++ b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache @@ -4,7 +4,7 @@ Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků rozpočtu České republiky. </h2> - <p> + <p class="3xl:text-lg"> 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. id est laborum diff --git a/main/styleguide/source/_patterns/molecules/box-link.mustache b/main/styleguide/source/_patterns/molecules/box-link.mustache new file mode 100644 index 0000000000000000000000000000000000000000..3fe553cba6e76c87d0fa8cd69c41fb3811a5ec57 --- /dev/null +++ b/main/styleguide/source/_patterns/molecules/box-link.mustache @@ -0,0 +1,5 @@ +<div class="mb-1 w-60 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-4xl mb-8">naloď se k pirátům</h5> + {{> atoms-button-animated(btn-text: "Přidat se k nám") }} +</div> diff --git a/main/styleguide/source/_patterns/molecules/photo_header.mustache b/main/styleguide/source/_patterns/molecules/photo_header.mustache index 9869ba92402e84e0ac2cacee7784d8f02b9fe860..1665e37c896cb01e8afcd208be0e1bec363eea0b 100644 --- a/main/styleguide/source/_patterns/molecules/photo_header.mustache +++ b/main/styleguide/source/_patterns/molecules/photo_header.mustache @@ -1,12 +1,14 @@ <header - class="bg-black flex items-center header-clip photo-header mb-20 w-full" + class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center" style="background-image: url('https://cc.cz/wp-content/uploads/2022/04/bartos-otv.jpg')" > - <div class="container--narrow flex items-center pt-40"> + <div class="grid-container header-max-width pt-16"> + <div class="pl-4 pr-2 col-start-1 col-end-3 sm:col-start-2 sm:col-end-13 sm:pr-0"> <h1 class="font-alt text-white"> <span class="text-2xl">Ing.</span><br> <span class="font-alt text-7xl">Ivan Bartoš</span><span class="text-2xl">, PhDr. et PhD</span><br> <span class="font-alt">Prezident České republiky</span> </h1> </div> + </div> </header> diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache index eb2161160568e398cefd182263144b68f5010a8b..9092b4a218be6c5b158e3b23718d8bf263414b38 100644 --- a/main/styleguide/source/_patterns/organisms/articles-section.mustache +++ b/main/styleguide/source/_patterns/organisms/articles-section.mustache @@ -5,10 +5,8 @@ Aktuality z paluby </h2> {{> molecules-main-article-preview }} - <div class="flex w-11/12"> - <div class="__js-root"> + <div class="__js-root"> <ui-article-carousel></ui-article-carousel> - </div> </div> </div> </div> diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache index 0c62595d1bd916dc4f72a0e676a521e19356cc94..3b356b2aa739cbb0b5ca7b41d38480fa0eca38e9 100644 --- a/main/styleguide/source/_patterns/organisms/box-links-section.mustache +++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache @@ -1,51 +1,14 @@ -<div class="bg-cover bg-no-repeat footer-section section-clip py-32" - 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 class="bg-cover bg-no-repeat section-clip py-16 lg:py-36" + style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')"> + <div class="container--medium"> + <h2 class="head-7xl text-center mb-6 xl:mb-28"> + Piráti zastupují občany + </h2> + <div class="flex flex-wrap justify-center items-center"> + {{> molecules-box-link }} + {{> molecules-box-link }} + {{> molecules-box-link }} + {{> molecules-box-link }} </div> </div> +</div> diff --git a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache index 3663fe57dc6a3021e59c76a615e0047a9eb986ca..b7bbc28bd22c96c6fb5f1369a3b19ab2d4a88bbb 100644 --- a/main/styleguide/source/_patterns/organisms/newsletter-section.mustache +++ b/main/styleguide/source/_patterns/organisms/newsletter-section.mustache @@ -1,4 +1,4 @@ -<div class="footer-section section-clip bg-cover bg-no-repeat flex" +<div class="section-clip bg-cover bg-no-repeat flex py-16 lg:py-36" style="background-image: url('https://images.pexels.com/photos/3073681/pexels-photo-3073681.jpeg')"> <div class="grid-container items-center px-4"> <div class="grid-full flex flex-col"> diff --git a/main/styleguide/source/_patterns/organisms/region-section.mustache b/main/styleguide/source/_patterns/organisms/region-section.mustache index 48c0f50176b3c6775507ead9d60184f35aa48cf9..d6fe80cf987b3b21bda5515102d798951008d7d3 100644 --- a/main/styleguide/source/_patterns/organisms/region-section.mustache +++ b/main/styleguide/source/_patterns/organisms/region-section.mustache @@ -1,11 +1,11 @@ -<div class="bg-cover bg-no-repeat section-clip pt-32 pb-52" +<div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36" style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')"> <div class="container--medium mx-auto px-4 "> - <h2 class="head-7xl text-center mb-14 lg:mb-28"> + <h2 class="head-7xl text-center mb-6 xl:mb-28"> Piráti v regionech </h2> <div class="flex flex-wrap"> - <div class="__js-root w-12/12 flex items-center justify-center lg:w-7/12"> + <div class="__js-root flex items-center justify-center h-full mb-4 w-full w-12/12 lg:w-7/12"> <ui-region-map class="w-full"></ui-region-map> </div> <div class="w-12/12 lg:w-5/12"> diff --git a/main/styleguide/source/_patterns/templates/people.mustache b/main/styleguide/source/_patterns/templates/people.mustache index 81d39c9793b9b7bd844ee2c78dfb25de215dbe7c..e187208e211c6e65cf0c44c6e3dea767263175a8 100644 --- a/main/styleguide/source/_patterns/templates/people.mustache +++ b/main/styleguide/source/_patterns/templates/people.mustache @@ -15,14 +15,28 @@ </div> </div> <div class="container--medium"> - <div class="flex justify-center mb-12"> - {{> molecules-multi-state-switch }} - </div> - <div class="flex flex-wrap justify-center mb-12"> - {{> molecules-person-contact-big-block(name: "Ivan Bartoš", function: "předseda Pirátů, poslanec PSP ČR za Ústecký kraj, ministr, vicepremiér") }} - {{> molecules-person-contact-big-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }} - {{> molecules-person-contact-big-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }} - {{> molecules-person-contact-big-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }} + <div class="__js-root"> + <ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" + v-slot="{ isCurrentView, toggleView }"> + <div class="flex justify-center mb-12"> + <div class="switch"> + <a @click="toggleView('candidates')" class="switch__item" + :class="{'switch__item--active': isCurrentView('candidates')}">Poslanecká sněmovna</a> + <a @click="toggleView('program')" class="switch__item" + :class="{'switch__item--active': isCurrentView('program')}">Vláda</a> + </div> + </div> + <div class="flex flex-wrap justify-center mb-12"> + <template v-if="isCurrentView('candidates')"> + {{> molecules-person-contact-big-block(name: "Ivan Bartoš", function: "předseda Pirátů, poslanec PSP ČR za Ústecký kraj, ministr, vicepremiér") }} + </template> + <template v-if="isCurrentView('program')"> + {{> molecules-person-contact-big-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }} + {{> molecules-person-contact-big-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }} + {{> molecules-person-contact-big-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }} + </template> + </div> + </ui-view-provider> </div> </div> {{> organisms-newsletter-section }} diff --git a/main/styleguide/source/_patterns/templates/person.mustache b/main/styleguide/source/_patterns/templates/person.mustache index c7f61ce98b0ab41e3714836a36d02e09f41c893d..ea35aa0a872cc74d2e6d25aa870b931a5dbe6859 100644 --- a/main/styleguide/source/_patterns/templates/person.mustache +++ b/main/styleguide/source/_patterns/templates/person.mustache @@ -3,100 +3,120 @@ {{> molecules-photo_header }} <main role="main"> - <section class="container--narrow flex flex-wrap"> - <div class="leading-6 w-7/12"> - <article class="mb-24"> - <p class="font-alt mb-5"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. - </p> + <div class="grid-container"> + <section class="flex flex-wrap grid-content-with-right-side"> + <div class="leading-6 w-7/12"> + <article class="mb-24"> + <p class="font-alt mb-5"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula + venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, + vel sagittis velit mauris vel metus. + </p> - <p class="mb-5"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada. - </p> + <p class="mb-5"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula + venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, + vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus + id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, + sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, + justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla + vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, + suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce + consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. + Nulla non lectus sed nisl molestie malesuada. + </p> - <p class="mb-5"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nulla non lectus sed nisl molestie malesuada. - </p> - </article> - </div> - <div class="w-1/12"><!-- TODO solve this better --></div> - <div class="w-4/12"> - <div class="bg-grey-100 mb-1 px-7 py-9"> - <div class="flex mb-2"> - <i class="ico--envelope mr-2"></i> - <a href="mailto:ivan.bartos@pirati.cz" class="text-turquoise-500 underline"> - ivan.bartos@pirati.cz - </a> + <p class="mb-5"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula + venenatis, tincidunt ac pede. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, + vel sagittis velit mauris vel metus. Aliquam erat volutpat. Mauris dictum facilisis augue. Aenean id metus + id velit ullamcorper pulvinar. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, + sem. Nullam rhoncus aliquam metus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, + justo. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla + vel leo. Nulla est. Sed ac dolor sit amet purus malesuada congue. Nulla turpis magna, cursus sit amet, + suscipit a, interdum id, felis. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce + consectetuer risus a nunc. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. + Nulla non lectus sed nisl molestie malesuada. + </p> + </article> </div> - <div class="flex mb-2"> - <i class="ico--phone mr-2"></i> - <a href="tel:+420 775 978 550"> - +420 775 978 550 - </a> + <div class="w-auto"> + <div class="bg-grey-100 mb-1 px-7 py-9"> + <div class="flex mb-2"> + <i class="ico--envelope mr-2"></i> + <a href="mailto:ivan.bartos@pirati.cz" class="text-turquoise-500 underline"> + ivan.bartos@pirati.cz + </a> + </div> + <div class="flex mb-2"> + <i class="ico--phone mr-2"></i> + <a href="tel:+420 775 978 550"> + +420 775 978 550 + </a> + </div> + </div> + <div class="bg-grey-100 px-7 py-9"> + <div class="flex mb-2"> + <i class="ico--facebook mr-2"></i> + <a href=""> + Facebook + </a> + </div> + <div class="flex mb-2"> + <i class="ico--twitter mr-2"></i> + <a href=""> + Twitter + </a> + </div> + <div class="flex mb-2"> + <i class="ico--instagram mr-2"></i> + <a href=""> + Instagram + </a> + </div> + </div> </div> - </div> - <div class="bg-grey-100 px-7 py-9"> - <div class="flex mb-2"> - <i class="ico--facebook mr-2"></i> - <a href=""> - Facebook - </a> + </section> + </div> + <section class="container--medium"> + <h2 class="font-alt text-4xl text-center xl:text-left"> + Aktuálně na Twitteru + </h2> + <div class="mb-8 flex flex-wrap"> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> + <div class="md:w-1/3 lg:w-1/4"> + {{> molecules-twitter-box }} + </div> </div> - <div class="flex mb-2"> - <i class="ico--twitter mr-2"></i> - <a href=""> - Twitter - </a> + </section> + <section class="container--medium mb-40 flex flex-wrap justify-center xl:justify-start"> + <div class="leading-6 w-8/12"> + <h2 class="font-alt mb-7 text-4xl"> + Články + </h2> + {{> molecules-person-article-preview }} + {{> molecules-person-article-preview }} </div> - <div class="flex mb-2"> - <i class="ico--instagram mr-2"></i> - <a href=""> - Instagram - </a> + </section> + <section class="container--medium mb-20 flex flex-wrap justify-center xl:justify-start"> + <h2 class="font-alt mb-12 text-4xl"> + Další lidé z poslanecké sněmovny + </h2> + <div class="flex flex-wrap justify-center"> + {{> molecules-person-simple-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }} + {{> molecules-person-simple-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }} + {{> molecules-person-simple-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }} </div> - </div> - </div> - </section> - <section> - <h2 class="font-alt text-4xl"> - Aktuálně na Twitteru - </h2> - <div class="mb-8 flex flex-wrap justify-center"> - <!-- TODO dostylovat--> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - <div class="md:w-1/3 lg:w-1/4"> - {{> molecules-twitter-box }} - </div> - </div> - </section> - <section class="container--medium mb-40"> - <div class="leading-6 w-8/12"> - <h2 class="font-alt mb-7 text-4xl"> - Články - </h2> - {{> molecules-person-article-preview }} - {{> molecules-person-article-preview }} - </div> - </section> - <section class="container--medium mb-20"> - <h2 class="font-alt mb-12 text-4xl"> - Další lidé z poslanecké sněmovny - </h2> - <div class="flex flex-wrap"> - {{> molecules-person-simple-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }} - {{> molecules-person-simple-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }} - {{> molecules-person-simple-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }} - </div> - </section> - + </section> + </div> {{> organisms-newsletter-section }} </main> {{> organisms-footer }} diff --git a/main/styleguide/source/_patterns/templates/program.mustache b/main/styleguide/source/_patterns/templates/program.mustache index 08c77f4506437e944f79cb3ccd2e1f537708b29f..71b8f459a74e6d9e4fdf4026a156cc7c56fa6b6a 100644 --- a/main/styleguide/source/_patterns/templates/program.mustache +++ b/main/styleguide/source/_patterns/templates/program.mustache @@ -13,13 +13,24 @@ </div> </div> <div class="container--medium"> + <div class="__js-root"> + <ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }"> <div class="mb-12"> - {{> molecules-multi-state-switch }} + <div class="switch"> + <a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Komunální volby 2022</a> + <a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Sněmovní volby 2021</a> + </div> </div> <div class="mb-12"> - {{> molecules-icon-title-text-block(icon: "ico--book") }} - {{> molecules-icon-title-text-block(icon: "ico--search") }} - {{> molecules-icon-title-text-block(icon: "ico--eye") }} + <template v-if="isCurrentView('candidates')"> + {{> molecules-icon-title-text-block(icon: "ico--book") }} + {{> molecules-icon-title-text-block(icon: "ico--book") }} + </template> + <template v-if="isCurrentView('program')"> + {{> molecules-icon-title-text-block(icon: "ico--eye") }} + </template> + </div> + </ui-view-provider> </div> </div> {{> organisms-newsletter-section }} diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss index c02379ce6ad8b1a6b73e4ebeb2a92acdaba76acd..7f588b8c4edd1726a88e9736b2f3c274b87a9c71 100644 --- a/main/styleguide/source/css/atoms/container.pcss +++ b/main/styleguide/source/css/atoms/container.pcss @@ -10,7 +10,7 @@ .container--medium { @apply px-5; margin: auto; - max-width: 1300px; + max-width: 1350px; } .container--wide { @@ -19,11 +19,11 @@ } .section-clip { - clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%); + clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%); margin-bottom: -3.2vw; @screen xl { - clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%); + clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%); margin-bottom: -4.2vw; } } @@ -59,6 +59,9 @@ "left-side content right-side"; margin-left: 10%; } + @screen 3xl { + margin-left: 20%; + } } } diff --git a/main/styleguide/source/css/atoms/extra_sizing.pcss b/main/styleguide/source/css/atoms/extra_sizing.pcss index 1d2bf390210733ceb6831bfdb873f0ddbdf37724..07150635a2ad009bfef10688d6d4f49f75650bf0 100644 --- a/main/styleguide/source/css/atoms/extra_sizing.pcss +++ b/main/styleguide/source/css/atoms/extra_sizing.pcss @@ -18,19 +18,23 @@ .photo-header { height: 36rem; -} + @screen xl { + height: 40vw; + } -.simple-header-height { - height: 13rem; -} + .simple-header-height { + height: 13rem; + } -@responsive { - @screen xl { - .simple-header-height { - height: 26rem; - } - .footer-section { - height: 981px; + @responsive { + @screen xl { + .simple-header-height { + height: 26rem; + } + + .footer-section { + height: 981px; + } } } } diff --git a/main/styleguide/source/css/atoms/form-field.pcss b/main/styleguide/source/css/atoms/form-field.pcss index 71840aa6f10ff3a3f271137a53734c92f8441d47..d01851d45e8de23c858aeb7715e7555e867425bd 100644 --- a/main/styleguide/source/css/atoms/form-field.pcss +++ b/main/styleguide/source/css/atoms/form-field.pcss @@ -66,7 +66,7 @@ } .select { - @apply relative flex items-center w-full py-4; + @apply relative flex items-center w-full py-2 xl:py-4; &:after { @apply absolute right-0 text-xl font-bold pr-3 transition duration-200; @@ -77,7 +77,7 @@ } .select__control { - @apply w-full appearance-none outline-none bg-grey-25 py-5 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200; + @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200 xl:py-5; /* Fix FF input not adjusting it's width. * See: https://stackoverflow.com/a/48326796/303184 diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss index ef1bf5aa5e941d22c52a37c4b96e5fcdddc69c73..04499e3405d6d1614354f11a722014f27436b41f 100644 --- a/main/styleguide/source/css/atoms/heading.pcss +++ b/main/styleguide/source/css/atoms/heading.pcss @@ -159,7 +159,11 @@ } .head-4xl { - @apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:text-4xl lg:leading-10 xl:text-4xl; + @apply font-alt text-xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl; +} + +.head-6xl { + @apply font-alt text-2xl font-medium tracking-tight uppercase xl:text-6xl; } .head-7xl { diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss index ffd89a756bd1a214ee80677dc40989e55c36b0f3..4d0f69563eb92fe299307689e66d25d5a9bca845 100644 --- a/main/styleguide/source/css/molecules/carousels.pcss +++ b/main/styleguide/source/css/molecules/carousels.pcss @@ -1,3 +1,29 @@ +.slick-slider .slick-arrow { + font-size: 0; + position: absolute; + top: -.7rem; + z-index: 10; + &:before, &:after { + border-right: 2px solid white; + border-bottom: 2px solid white; + content: ''; + height: .8rem; + position: absolute; + width: .8rem; + @screen lg { + height: 1rem; + width: 1rem; + } + } + &.slick-next { + transform: rotate(-45deg); + } + + &.slick-prev { + transform: rotate(135deg); + } +} + .header-carousel { display: block; margin: 0 auto; @@ -114,3 +140,22 @@ } } } + +.article-carousel { + .slick-arrow { + right: 10%; + @screen lg { + right: 5%; + } + + &:before, &:after { + border-color: black; + } + + &.slick-disabled { + &:before, &:after { + border-color: #B3B3B3; + } + } + } +} diff --git a/main/styleguide/source/js/components/RegionMap.vue b/main/styleguide/source/js/components/RegionMap.vue index 881146bb2105c79b0e20ea94e50f6bbf1b6dd4d6..53fb1228204375cb80a63105afdad13716cce28f 100644 --- a/main/styleguide/source/js/components/RegionMap.vue +++ b/main/styleguide/source/js/components/RegionMap.vue @@ -1,6 +1,6 @@ <template> - <div class="region-map flex justify-start items-center space-x-16 "> - <div class="w-full max-w-xl"> + <div class="region-map flex justify-center items-center space-x-16 "> + <div class="w-full max-w-xl block"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" diff --git a/main/styleguide/source/js/components/articles/ArticleCarousel.vue b/main/styleguide/source/js/components/articles/ArticleCarousel.vue index 997b01a55d1bd3693367068539122470c1505bf0..b2b80c0b77cec5a4c23783dac49d62753c55a917 100644 --- a/main/styleguide/source/js/components/articles/ArticleCarousel.vue +++ b/main/styleguide/source/js/components/articles/ArticleCarousel.vue @@ -1,47 +1,57 @@ <template> - <div> - <vue-slick-carousel v-bind="settings"> - <div> - <div class="flex max-w-md items-start"> - <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" - class="w-16 mr-4"> - <div class="flex flex-col justify-between items-start"> - <span class="text-green-500">23.2.2022</span> - <h4 class="uppercase"> - Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární, - ale skutečná. Jak nenaletět internetovým šmejdům? - </h4> - </div> + <vue-slick-carousel v-bind="settings" class="article-carousel"> + <div> + <div class="flex max-w-md items-start"> + <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" + class="w-16 xl:w-36 mr-4"> + <div class="flex flex-col justify-between items-start"> + <span class="text-green-500 mb-2">23.2.2022</span> + <h4 class="uppercase mb-2"> + Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární, + ale skutečná. Jak nenaletět internetovým šmejdům? + </h4> + <a href="" class="btn btn__slide__wrap "> + <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span> + <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span> + </a> </div> </div> - <div> - <div class="flex max-w-md items-start"> - <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" - class="w-16 mr-4"> - <div class="flex flex-col justify-between items-start"> - <span class="text-green-500">23.2.2022</span> - <h4 class="uppercase"> - Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární, - ale skutečná. Jak nenaletět internetovým šmejdům? - </h4> - </div> + </div> + <div> + <div class="flex max-w-md items-start"> + <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" + class="w-16 xl:w-36 mr-4"> + <div class="flex flex-col justify-between items-start"> + <span class="text-green-500 mb-2">23.2.2022</span> + <h4 class="uppercase mb-2"> + Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární, + ale skutečná. Jak nenaletět internetovým šmejdům? + </h4> + <a href="" class="btn btn__slide__wrap "> + <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span> + <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span> + </a> </div> </div> - <div> - <div class="flex max-w-md items-start"> - <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" - class="w-16 mr-4"> - <div class="flex flex-col justify-between items-start"> - <span class="text-green-500">23.2.2022</span> - <h4 class="uppercase"> - Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární, - ale skutečná. Jak nenaletět internetovým šmejdům? - </h4> - </div> + </div> + <div> + <div class="flex max-w-md items-start"> + <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" + class="w-16 xl:w-36 mr-4"> + <div class="flex flex-col justify-between items-start"> + <span class="text-green-500 mb-2">23.2.2022</span> + <h4 class="uppercase mb-2"> + Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární, + ale skutečná. Jak nenaletět internetovým šmejdům? + </h4> + <a href="" class="btn btn__slide__wrap "> + <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span> + <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span> + </a> </div> </div> - </vue-slick-carousel> - </div> + </div> + </vue-slick-carousel> </template> <script> @@ -54,15 +64,13 @@ export default { settings: { "dots": false, "infinite": false, - "speed": 500, "slidesToShow": 3, "slidesToScroll": 1, "responsive": [ { "breakpoint": 1200, "settings": { - "slidesToShow": 1, - "slidesToScroll": 1 + "slidesToShow": 1 } } ] diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js index 54c49faefd012d3cf522a4ad8c49e3facc705d22..048ccfd1f1fdd098273fe04b3d43f09cbc0415af 100644 --- a/main/styleguide/tailwind.config.js +++ b/main/styleguide/tailwind.config.js @@ -35,6 +35,7 @@ module.exports = { 'lg': '992px', 'xl': '1200px', '2xl': '1366px', + '3xl': '2060px', }, fontFamily: { alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'], diff --git a/main/templates/main/base.html b/main/templates/main/base.html index b1c41ebb7bcb7de40a98ca4522dc5d33c4ad6cef..6809f48227ec80d31b43f45aa5d5085418fdcb53 100644 --- a/main/templates/main/base.html +++ b/main/templates/main/base.html @@ -25,8 +25,11 @@ <body> {% include 'main/includes/layout/header.html' %} -{% block content %} -{% endblock content %} + +{% block content %}{% endblock content %} + +{% include 'main/includes/layout/footer.html' %} + {% block scripts %}{% endblock scripts %} </body> </html> diff --git a/main/templates/main/includes/button_animated.html b/main/templates/main/includes/button_animated.html new file mode 100644 index 0000000000000000000000000000000000000000..34c0802cfefaee5fe5abc215a9843905ab0b9b16 --- /dev/null +++ b/main/templates/main/includes/button_animated.html @@ -0,0 +1,8 @@ +<a href="" class="btn btn__slide__wrap {{ extra_classes }}"> + <span class="btn text-sm bg-black text-white w-32 lg:text-base"> + {{ btn_text | default_if_none:"Číst dále" }} + </span> + <span class="btn text-sm bg-white text-black w-32 lg:text-base"> + {{ btn_text | default_if_none:"Číst dále" }} + </span> +</a> diff --git a/main/templates/main/includes/layout/footer.html b/main/templates/main/includes/layout/footer.html new file mode 100644 index 0000000000000000000000000000000000000000..bce4b7b9fcd569e12001e9657cc9d9f04bde8ff7 --- /dev/null +++ b/main/templates/main/includes/layout/footer.html @@ -0,0 +1,211 @@ +<footer class="bg-black footer-clip text-white pt-12"> + <div class="footer__container"> + <div class="font-alt mb-10 text-right text-2xl"> + Zůstaňte s námi v konaktu + </div> + <div class="flex justify-end mb-16 text-right"> + {% for social_link_block in page.root_page.social_links %} + <div> + <a href="{{ social_link_block.value.link }}" class="ml-8"> + <i class="{{ social_link_block.value.icon }} mr-1"></i> + {{ social_link_block.value.text }} + </a> + </div> + {% endfor %} + </div> + <div class="flex flex-wrap mb-16 w-full"> + <div> + <h6 class="font-alt text-2xl mb-12"> + Navigace + </h6> + <div class="grid grid-flow-col grid-rows-6 max-h-60"> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Jak pracujeme + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Program + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + </div> + </div> + <div> + <h6 class="font-alt text-2xl mb-12"> + Transparance + </h6> + <div class="grid grid-flow-col grid-rows-6 max-h-60"> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Jak pracujeme + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Program + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + </div> + </div> + <div> + <h6 class="font-alt text-2xl mb-12"> + Osobní stránky + </h6> + <div class="grid grid-flow-col grid-rows-6 max-h-60"> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + olgarichterova.cz + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + gregorova.eu + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + mikulas-peksa.eu + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + kolaja.eu + </a> + </div> + </div> + <div> + <h6 class="font-alt text-2xl mb-12"> + Další projekty + </h6> + <div class="grid grid-flow-col grid-rows-6 max-h-60"> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Jak pracujeme + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Program + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + budoucnostresimeted.cz + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Jak pracujeme + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Program + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Jak pracujeme + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Program + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Lidé + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + voda.pirati.cz + </a> + </div> + </div> + <div> + <h6 class="font-alt text-2xl mb-12"> + Média + </h6> + <div class="flex flex-col flex-wrap max-h-60"> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Foto + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Video + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Newsletter + </a> + <a class="cursor-pointer hover:no-underline mb-5 w-48"> + Grafika + </a> + </div> + </div> + </div> + <div class="flex flex-wrap items-end pb-2"> + <div class="text-grey-300 w-full lg:w-1/2"> + © Piráti 2022. Všechna práva vyhlazena.<br> + Sdílejte a nechte ostatní sdílet za stejných podmínek. + </div> + <div class="flex justify-endw-full lg:w-1/2"> + <div class="flex ml-4"> + <div class="mr-5"> + <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image"> + </div> + <div class="flex flex-col"> + <h6 class="font-alt text-2xl text-uppercase"> + Veronika Šmídová + </h6> + <strong class="font-bold mb-1 text-grey-300"> + Tisková mluvčí + </strong> + <span> + +420 778 111 466 + </span> + <span class="text-turquoise-500"> + veronika.smidova@pirati.cz + </span> + </div> + </div> + <div class="flex ml-4"> + <div class="mr-5"> + <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image"> + </div> + <div class="flex flex-col"> + <h6 class="font-alt text-2xl text-uppercase"> + Veronika Šmídová + </h6> + <strong class="font-bold mb-1 text-grey-300"> + Tisková mluvčí + </strong> + <span> + +420 778 111 466 + </span> + <span class="text-turquoise-500"> + veronika.smidova@pirati.cz + </span> + </div> + </div> + </div> + </div> + </div> +</footer> diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html index c65b21ab3e78ab0715e0691b6eb164cc566c7976..755bab967862d69e8a8cf9b314b3bb6941e027aa 100644 --- a/main/templates/main/includes/layout/header.html +++ b/main/templates/main/includes/layout/header.html @@ -1,32 +1,51 @@ -{% load static %} +{% load static wagtailcore_tags %} + <!-- Navbar --> -<nav class="text-white bg-black transition duration-200"> +<nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black"> + <!-- Logo --> + <a href="/" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3"> + <img src="{% static "shared/img/logo-full-black.svg" %}" alt=""> + </a> <!-- Flex container --> - <div class="flex items-center justify-between"> - <!-- Logo --> - <div class="logo flex bg-white px-12 w-80 h-16 my-8"> - <img src="{% static "shared/img/logo-full-black.svg" %}" alt="Pirátská strana" class="w-36"/> - </div> - <!-- Menu --> - <div class="flex space-x-6 uppercase gap-8"> - <a href="#">Jak pracujeme</a> - <a href="#">Program</a> - <a href="#">O nás</a> - <a href="#">Naloď se</a> - <a href="#">Přispěj</a> - <a href="#">Kontakty</a> - </div> - <!-- Social & Related --> - <div> - <a href="">FB</a> - <a href="">TWITTER</a> - <a href="">INSTAGRAM</a> - <a href="#" class="px-12 py-3 bg-lightGreen mr-2"> - Dary - </a> - <a href="#" class="px-12 py-3 text-blue-100 bg-purple mr-2"> - Nalodění - </a> + <div class="grid-container main-menu-grid"> + <div class="main-menu grid-content-with-right-side grid justify-between items-center xl:py-6"> + <!-- Hamburger Icon --> + <input class="hidden" type="checkbox" id="menuToggle"/> + <label class="p-3 hamb text-white col-start-2 xl:hidden" for="menuToggle"> + <i class="ico--menu text-3xl"></i> + </label> + <!-- Menu --> + <div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex"> + {% for block in page.root_page.menu %} + {% include_block block %} + {% endfor %} + </div> + <!-- Buttons & Social--> + <div class="main-menu__external main-menu-items items-center space-x-1 2xl:space-x-3 xl:flex"> + <div class="flex space-x-3 mb-2 xl:mb-0 xl:mr-2"> + {% for social_link_block in page.root_page.social_links %} + <a href="{{ social_link_block.value.link }}" class="text-white hover:no-underline"> + <i class="{{ social_link_block.value.icon }}"></i> + </a> + {% endfor %} + </div> + {% if page.root_page.donation_page %} + <a href="{{ page.root_page.donation_page }}" + class="btn btn--green-500 btn--hoveractive font-condensed uppercase max-w-sm w-full"> + <div class="btn__body-wrap h-full"> + <div class="btn__body ">Dary</div> + </div> + </a> + {% endif %} + {% if page.root_page.contact_newcomers %} + <a href="{{ page.root_page.contact_newcomers }}" + class="btn btn--violet-500 btn--hoveractive font-condensed uppercase max-w-sm w-full"> + <div class="btn__body-wrap h-full"> + <div class="btn__body ">Nalodění</div> + </div> + </a> + {% endif %} + </div> </div> </div> </nav> diff --git a/main/templates/main/includes/layout/photo_page_header.html b/main/templates/main/includes/layout/photo_page_header.html new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/main/templates/main/includes/layout/simple_page_header.html b/main/templates/main/includes/layout/simple_page_header.html new file mode 100644 index 0000000000000000000000000000000000000000..6dc4646e014b33c0ea71f3efc59b937b2d3fbbf3 --- /dev/null +++ b/main/templates/main/includes/layout/simple_page_header.html @@ -0,0 +1,9 @@ +<header class="bg-black flex items-center simple-header-height header-clip mb-8 xl:mb-24 xl:pt-24 w-full"> + <div class="grid-container header-max-width"> + <div class="grid-content"> + <h1 class="head-8xl text-white"> + {{ page.title }} + </h1> + </div> + </div> +</header> diff --git a/main/templates/main/includes/menu_item.html b/main/templates/main/includes/menu_item.html new file mode 100644 index 0000000000000000000000000000000000000000..de4d8a39fb8c394fe976708e9f4f88f32e24cad5 --- /dev/null +++ b/main/templates/main/includes/menu_item.html @@ -0,0 +1,4 @@ +{% firstof self.page.url self.link as target %} +<a href="{{ target }}" class="menu-link"> + {{ self.title }} +</a> diff --git a/main/templates/main/includes/work_article_preview.html b/main/templates/main/includes/work_article_preview.html new file mode 100644 index 0000000000000000000000000000000000000000..90c35f97d516146df4a83c376ed49a7203a82c40 --- /dev/null +++ b/main/templates/main/includes/work_article_preview.html @@ -0,0 +1,20 @@ +<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8"> + <img + src="https://i.picsum.photos/id/689/576/281.jpg?hmac=yIwOFV185zFy4fwVE3lF1UDqLDAm_bpLr9LZprQ26eo" alt="" + class="mb-7" + > + <h2 class="head-2xl mb-4"> + {{ article_page.title }} + </h2> + <div class="flex font-bold mb-4 text-xs text-white uppercase"> + {# TODO tags #} + {# <span class="bg-green-400 mr-1 p-2">Duben 2022</span>#} + {# <span class="bg-violet-400 mr-1 p-2">#ENERGETIKA</span>#} + </div> + <p class="mb-8"> + {{ article_page.perex }} + </p> + <div> + {% include 'main/includes/button_animated.html' with btn_text="Číst dále" %} + </div> +</div> diff --git a/main/templates/main/main_home_page.html b/main/templates/main/main_home_page.html index 98b93b0abbbce3687003d5212d3a4f82a6e6cfb3..7004c81bfa14429e5a4a1b61125cdb63e85a4170 100644 --- a/main/templates/main/main_home_page.html +++ b/main/templates/main/main_home_page.html @@ -1,10 +1,10 @@ {% extends "main/base.html" %} +{% load wagtailcore_tags %} {% block content %} <main role="main"> - <div class="__js-root"> - <ui-header-carousel></ui-header-carousel> - </div> -</main> - + {% for block in page.content %} + {% include_block block %} + {% endfor %} + </main> {% endblock %} diff --git a/main/templates/main/main_work_page.html b/main/templates/main/main_work_page.html index f9ff4d2c489a26b5b4744b26f4ece11f895559d8..436e75c78093cfec8f36a5cb5929c425007794b0 100644 --- a/main/templates/main/main_work_page.html +++ b/main/templates/main/main_work_page.html @@ -2,6 +2,8 @@ {% load wagtailcore_tags wagtailimages_tags shared_filters %} {% block content %} + {% include 'main/includes/layout/simple_page_header.html' %} + <main role="main"> <div class="grid-container mb-2 xl:mb-12"> <div class="grid-left-side"> @@ -19,51 +21,38 @@ <div class="grid-container article-section"> <div class="grid-full mb-8"> - <div class="mb-4"> - <h3 class="head-7xl mb-4 xl:hidden">Červenec</h3> - <div class="flex flex-col justify-between xl:flex-row"> - <div class="xl:pt-8"> - {{> molecules-work-article-preview }} - {{> molecules-work-article-preview }} - </div> - <div class="relative border border-violet-400 mx-8 hidden xl:block"> - <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem"> - Červenec + {% for month_article_data in article_data_list %} + <div class="mb-4"> + <h3 class="head-7xl mb-4 xl:hidden"> + {{ month_article_data.month_text }} + </h3> + <div class="flex flex-col justify-between xl:flex-row"> + <div class="xl:pt-8"> + {% for article_page in month_article_data.left_column %} + {% include 'main/includes/work_article_preview.html' %} + {% empty %} + <div class="p-7 flex flex-col max-w-xl mb-8" /> + {% endfor %} + </div> + <div class="relative border border-violet-400 mx-8 hidden xl:block"> + <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem"> + {{ month_article_data.month_text }} + </div> + </div> + <div class="xl:pt-14"> + {% for article_page in month_article_data.right_column %} + {% include 'main/includes/work_article_preview.html' %} + {% empty %} + <div class="p-7 flex flex-col max-w-xl mb-8" /> + {% endfor %} + </div> </div> </div> - <div class="xl:pt-14"> - {{> molecules-work-article-preview }} - {{> molecules-work-article-preview }} - </div> - </div> - </div> - <div class="mb-4"> - <h3 class="head-7xl mb-4 xl:hidden">Srpen</h3> - <div class="flex flex-col justify-between xl:flex-row"> - <div class="xl:pt-8"> - {{> molecules-work-article-preview }} - {{> molecules-work-article-preview }} - </div> - <div class="relative border border-violet-400 mx-8 hidden xl:block"> - <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem"> - Srpen - </div> - </div> - <div class="xl:pt-14"> - {{> molecules-work-article-preview }} - {{> molecules-work-article-preview }} - </div> - </div> - </div> + {% endfor %} <div class="flex justify-center"> - {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }} + {% include 'main/includes/button_animated.html' with btn_text="Zobrazit další" %} </div> </div> </div> </main> - {% for month_article_data in article_data_list %} - {{ month_article_data.month_text }} - {{ month_article_data.left_column }} - {{ month_article_data.right_column }} - {% endfor %} {% endblock content %} diff --git a/shared/templates/shared/article_preview.html b/shared/templates/shared/article_preview.html index b6a1b7c3ae0e5a2f4846965cde6ee0bb149e54f2..f577fed130a45802ab3b4e66515c230a30af7ff2 100644 --- a/shared/templates/shared/article_preview.html +++ b/shared/templates/shared/article_preview.html @@ -43,7 +43,7 @@ </div> </div> - <div class="article-card-meta" class="c-metadata-block-section__item" > + <div class="article-card-meta c-metadata-block-section__item"> <span itemprop="description" class="article-card-meta__item"> {{ article.date|date:"SHORT_DATE_FORMAT" }} <meta itemprop="datePublished" content="{{ article.last_published_at }}" />