Merge branch 'feature/pirati-cz' into feature/pirati-cz-martin

main/blocks.py

@@ -16,11 +16,20 @@ class CTAMixin(StructBlock):
     button_link = URLBlock(label="Odkaz tlačítka")
     button_text = CharBlock(label="Text tlačítka")
 
+    class Meta:
+        icon = "doc-empty"
+        label = "Výzva s odkazem"
+        template = "main/blocks/article_quote_block.html"
+
 
 class BoxBlock(CTAMixin, StructBlock):
     title = CharBlock(label="Nadpis")
     image = ImageChooserBlock(label="Logo/obrázek")
 
+    class Meta:
+        icon = "form"
+        label = "Box"
+
 
 class BoxesBlock(StructBlock):
     title = CharBlock(label="Nadpis")
@@ -28,6 +37,8 @@ class BoxesBlock(StructBlock):
 
     class Meta:
         template = "main/blocks/boxes_block.html"
+        icon = "grip"
+        label = "Skupina boxů"
 
 
 class HomePageCarouseSlideBlock(CTAMixin, StructBlock):
@@ -35,12 +46,18 @@ class HomePageCarouseSlideBlock(CTAMixin, StructBlock):
     line_1 = CharBlock(label="První řádek")
     line_2 = CharBlock(label="Druhý řádek")
 
+    class Meta:
+        icon = "form"
+        label = "Stránka carouselu"
+
 
 class HomePageCarouselBlock(StructBlock):
     slides = ListBlock(HomePageCarouseSlideBlock, label="Obrázky s nadpisy - carouselu")
 
     class Meta:
         template = "main/blocks/homepage_carousel_block.html"
+        icon = "folder-open-1"
+        label = "Carousel s  obrázky"
 
 
 class NewsBlock(StructBlock):
@@ -51,6 +68,8 @@ class NewsBlock(StructBlock):
 
     class Meta:
         template = "main/blocks/news_block.html"
+        icon = "doc-full-inverse"
+        label = "Novinky"
 
 
 class PeopleGroupBlock(StructBlock):
@@ -65,6 +84,10 @@ class PeopleGroupBlock(StructBlock):
         label="Skupina osob",
     )
 
+    class Meta:
+        icon = "group"
+        label = "Slug skupiny"
+
     def get_prep_value(self, value):
         value = super().get_prep_value(value)
         value["slug"] = slugify(value["title"])
@@ -77,6 +100,8 @@ class PeopleOverviewBlock(StructBlock):
 
     class Meta:
         template = "main/blocks/people_overview_block.html"
+        icon = "group"
+        label = "Skupina osob"
 
 
 class ProgramBlock(StructBlock):
@@ -84,6 +109,10 @@ class ProgramBlock(StructBlock):
     title = CharBlock(label="Titulek článku programu")
     text = TextBlock(label="Obsah")
 
+    class Meta:
+        icon = "date"
+        label = "Program"
+
 
 class ProgramGroupBlock(StructBlock):
     title = CharBlock(label="Titulek části programu")
@@ -94,6 +123,10 @@ class ProgramGroupBlock(StructBlock):
     )
     point_list = ListBlock(ProgramBlock(), label="Jednotlivé články programu")
 
+    class Meta:
+        icon = "date"
+        label = "Skupina programů"
+
     def get_prep_value(self, value):
         value = super().get_prep_value(value)
         value["slug"] = slugify(value["title"])
@@ -108,17 +141,19 @@ class RegionsBlock(StructBlock):
 
     class Meta:
         template = "main/blocks/regions_block.html"
-
+        icon = "view"
+        label = "Články pro regiony"
 
 class TweetsBlock(StructBlock):
     title = CharBlock(
         label="Titulek",
-        help_text="Tweety budou načteny pro všchny profily uvedené v nastavení webu automaticky",
+        help_text="Tweety budou načteny pro všechny profily uvedené v nastavení webu automaticky",
     )
 
     class Meta:
         template = "main/blocks/twitter_block.html"
-
+        icon = "openquote"
+        label = "Tweety"
 
 class PersonContactBlock(StructBlock):
     position = CharBlock(label="Název pozice", required=False)
@@ -138,23 +173,39 @@ class PersonContactBoxBlock(CTAMixin, StructBlock):
     image = ImageChooserBlock(label="Ikona")
     subtitle = CharBlock(label="Podtitulek")
 
+    class Meta:
+        icon = "mail"
+        label = "Kontakty"
 
 # Footer
 class LinkBlock(StructBlock):
     text = CharBlock(
-        label="Titulkek odkazu (text, který se zobrazí místo dlouhého odkazu)"
+        label="Titulek odkazu (text, který se zobrazí místo dlouhého odkazu)"
     )
     link = URLBlock(label="Odkaz")
 
+    class Meta:
+        icon = "link"
+        label = "Odkaz"
+
 
 class OtherLinksBlock(StructBlock):
     title = CharBlock(label="Titulek")
     list = ListBlock(LinkBlock, label="Seznam odkazů s titulkem")
 
+    class Meta:
+        icon = "link"
+        label = "Ostatní odkazy"
+        template = "main/blocks/article_quote_block.html"
+
 
 class SocialLinkBlock(LinkBlock):
     icon = CharBlock(label="Ikona", help_text="Seznam ikon - https://styleguide.pirati.cz/latest/?p=viewall-atoms-icons")  # TODO CSS class name or somthing better?
 
+    class Meta:
+        icon = "link"
+        label = "Odkaz"
+
 
 # ARTICLE BLOCKS
 class ArticleQuoteBlock(StructBlock):
@@ -173,7 +224,7 @@ class ArticleImageBlock(StructBlock):
     text = CharBlock(label="Text")
 
     class Meta:
-        icon = "user"
+        icon = "image"
         label = "Obrázek s textem a odkazem"
         template = "main/blocks/article_image_block.html"
 

main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache

 <a href="" class="btn btn__slide__wrap {{ classes }}">
-  <span class="btn text-sm bg-black text-white w-32 lg:text-base">
+  <span class="btn text-lg bg-black text-white w-32 lg:text-base">
     {{ btn-text }}
   </span>
-  <span class="btn text-sm bg-white text-black w-32 lg:text-base">
+  <span class="btn text-lg bg-white text-black w-32 lg:text-base">
     {{ btn-text }}
   </span>
 </a>

main/styleguide/source/_patterns/molecules/articles/article-perex.mustache

 <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 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
+    <div class="p-6 flex flex-wrap justify-between">
+      <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span>
+      <span>
+        <div class="flex flex-row">
+            <a href="" class="flex hover:no-underline">
+              <i class="ico--facebook mr-1"></i>
+            </a>
+            <a href="" class="flex hover:no-underline">
+              <i class="ico--twitter mr-1"></i>
+            </a>
+            <a href="" class="flex hover:no-underline">
+              <i class="ico--instagram mr-1"></i>
+            </a>
+          </div>
+      </span>
     </div>
   </div>
   <div class="grid-content leading-6">

main/styleguide/source/_patterns/molecules/articles/article-photo-header.mustache

@@ -2,12 +2,12 @@
   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="grid-content-with-right-side header-max-width pt-40 sm:pt-0">
     <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">
+      <div class="text-lg sm:text-3xl text-green-500 mb-4 font-medium sm:mb-8">
         <span>2.3.2022</span>
       </div>
-      <h1 class="font-alt text-white text-3xl md:text-5xl lg:text-6xl">
+      <h1 class="font-alt text-white text-3xl md:text-5xl leading-9 sm:leading-none 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>

main/styleguide/source/_patterns/molecules/articles/person-article-preview.mustache

 <div class="flex flex-col justify-between items-start mb-9">
   <div class="flex font-bold mb-4 text-xs text-white uppercase">
-    <span class="bg-green-400 mr-1 px-1">Duben 2022</span>
-    <span class="bg-violet-400 mr-1 px-1">#ENERGETIKA</span>
+    <span class="bg-green-500 mr-1 px-1">Duben 2022</span>
+    <span class="bg-violet-600 mr-1 px-1">#ENERGETIKA</span>
   </div>
   <h4 class="head-3xl mb-4">
     Ukončili jsme povinné přimíchávání biopaliv první generace do pohonných hmot

main/styleguide/source/_patterns/molecules/blocks/contact-block.mustache

 <div class="contact-box">
   <div>
-    <div class="h-16 mx-auto w-16">
+    <div class="h-16 mx-auto w-16 mb-3">
       hm, image...
     </div>
     <h3 class="font-alt mb-3 text-xl">

main/styleguide/source/_patterns/molecules/blocks/contact-person-box.mustache

-<div class="flex person-box mb-4 mr-4">
-  <div class="mr-7">
+<div class="flex person-box">
+  <div class="mr-2 sm:mr-7">
     <img class="rounded-full shadow-sm w-20 sm:w-40" src="https://randomuser.me/api/portraits/women/26.jpg"
          alt="user image">
   </div>

main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache

-<div class="flex mb-6">
-  <i class="{{ icon }} mr-6 text-6xl"></i>
-  <div class="flex flex-col">
+<div class="grid-container mb-12">
+<i class="grid-left-side {{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
+<div class="grid-content flex flex-col">
   <h3 class="font-alt mb-4 text-4xl">
     DOSTUPNÉ A DŮSTOJNÉ BYDLENÍ PRO KVALITNÍ ŽIVOT
   </h3>

main/styleguide/source/_patterns/molecules/blocks/person-contact-big-block.mustache

-<div class="flex mb-8 person-box-big max-w-md xl:max-w-xl flex-col xl:flex-row xl:mb-16">
-  <div class="shrink-0 mr-2">
+<div class="flex mb-8 person-box-big max-w-sm gap-6 xl:max-w-xl flex-col xl:flex-row xl:mb-16">
+  <div class="xl:shrink-0">
     <img
-      class="rounded-full shadow-sm w-30 xl:w-60 mb-2"
+      class="rounded-full shadow-sm w-30 xl:w-60"
       src="https://randomuser.me/api/portraits/women/26.jpg"
       alt=" {{ name }}"
     >
   </div>
   <div class="flex flex-col justify-between py-4">
-    <div class="flex flex-col mb-4">
+    <div class="flex flex-col mb-8">
       <h4 class="font-bold mb-2 text-2xl xl:text-4xl">
         {{ name }}
       </h4>
-      <span class="leading-6 mb-6 w-10/12">
+      <span class="leading-6 mb-4 xl:mb-6 w-10/12">
         {{ function }}
       </span>
-      <span class="font-bold mb-1 text-grey-300">
+      <span class="font-bold mb-2 text-grey-300">
         +420 778 111 466
       </span>
       <span class="text-turquoise-500 underline">

main/styleguide/source/_patterns/molecules/blocks/person-simple-block.mustache

-<div class="flex mb-16 person-box-medium">
+<div class="flex person-box-medium mb-4 xl:mb-12">
   <div class="shrink-0 mr-4">
     <img
       class="rounded-full shadow-sm w-20 mb-2 xl:w-44"

main/styleguide/source/_patterns/molecules/box-link.mustache

-<div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center mr-1">
-  <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+<div class="m-1 w-96 h-72 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80">
+  <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8 max-w-20 max-h-20">
   <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>

main/styleguide/source/_patterns/molecules/photo_header.mustache

 <header
-  class="bg-black flex items-center header-clip photo-header py-32 mb-20 w-full bg-no-repeat bg-cover bg-center"
+  class="bg-black flex items-center header-clip photo-header py-32 mb-4 xl: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">

main/styleguide/source/_patterns/molecules/twitter-box.mustache

-<div class="p-4 flex flex-col items-center text-center border border-grey-100">
-  <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
+  <div class="flex flex-row sm:flex-col items-center">
+    <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
          alt="user image"/>
-  <h5 class="font-alt mb-2">Tomáš Marný</h5>
+    <div class="flex flex-col sm:sm:flex-col">
+      <h5 class="font-alt text-xl mb-2 sm:text-base">Tomáš Marný</h5>
       <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
-  <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-    eirmod
-    tempor invidunt ut labore
-    et
-    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+    </div>
+  </div>
+  <p class="text-small sm:text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+    justo duo dolores et ea rebum.</p>
   <a href="" class="hover:no-underline">
-    <i class="ico--twitter text-turquoise-400 text-xl"></i>
+    <i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
   </a>
 </div>

main/styleguide/source/_patterns/organisms/box-links-section.mustache

 <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">
+  <div class="container--wide mx-auto">
     <h2 class="head-7xl text-center mb-6 xl:mb-28">
       Piráti zastupují občany
     </h2>
-    <div class="flex flex-wrap flex-col justify-center items-center md:flex-row">
+    <div class="flex flex-wrap justify-center items-center md:flex-row">
       {{> molecules-box-link }}
       {{> molecules-box-link }}
       {{> molecules-box-link }}

main/styleguide/source/_patterns/organisms/header.mustache

 <!-- Navbar -->
 <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">
+  <a href="" class="menu-flag flex justify-center flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
     <img src="../../images/logo-full-black.svg" alt="">
   </a>
   <!-- Flex container -->
@@ -13,7 +13,7 @@
         <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">
+      <div class="main-menu__main main-menu-items mt-4 space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
         <a href="#" class="menu-link">Jak pracujeme</a>
         <a href="#" class="menu-link">Program</a>
         <a href="#" class="menu-link">O nás</a>

main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache

 <section class="grid-container mb-4 justify-start xl:mb-14">
   <div class="grid-content-with-right-side">
     <div class="leading-6">
-      <h2 class="head-6xl mb-8">
+      <h2 class="head-4xl mb-5 xl:hidden">
         Články
       </h2>
       {{> molecules-person-article-preview }}

main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache

 <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>
+      <h2 class="head-4xl mb-5 xl:hidden">
+        Červenec
+      </h2>
       <div class="flex flex-col justify-between xl:flex-row">
         <div class="xl:pt-8">
           {{> molecules-work-article-preview }}
@@ -19,7 +21,9 @@
       </div>
     </div>
     <div class="mb-4">
-      <h3 class="head-7xl mb-4 xl:hidden">Srpen</h3>
+      <h2 class="head-4xl mb-5 xl:hidden">
+        Srpen
+      </h2>
       <div class="flex flex-col justify-between xl:flex-row">
         <div class="xl:pt-8">
           {{> molecules-work-article-preview }}