people, program, cards, etc.

majak_uistyleguide/templates/patterns/atoms/calendar/calendar.html

 <div class="__js-root">
-  <ui-person-calendar events='{{ calendar_data }}'></ui-person-calendar>
+  <ui-full-calendar events='{{ calendar_data }}'></ui-full-calendar>
 </div>

majak_uistyleguide/templates/patterns/atoms/text/header_navigation.html

@@ -5,7 +5,11 @@
 
   ⎯⎯
 
-    <a href="#" class="underline">
+  {% if second_link %}
+    <a href="{{ second_link }}" class="underline">
       {{ second_text }}
     </a>
+  {% else %}
+    <span>{{ second_text }}</span>
+  {% endif %}
 </div>

majak_uistyleguide/templates/patterns/atoms/text/header_navigation.yaml

 context:
   first_text: 'Program'
   second_text: 'Stanoviska'
+  second_link: 'https://example.com'

majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html

-<div class="flex flex-col max-w-xl mb-8 bg-grey-100 drop-shadow-lg {{ classes }}">
+<div class="flex flex-col max-w-xl mb-8 bg-grey-180 drop-shadow {{ classes }}">
   <a href="#">
     <img
       src="../../../../static/images/person-table.png" alt=""
@@ -11,7 +11,7 @@
       {{ work_article_date }}
     </div>
 
-    <a href="#" class="mb-2">
+    <a href="#" class="mb-2 underline-offset-4">
       <h2 class="head-3xl">{{ work_article_title }}</h2>
     </a>
 

majak_uistyleguide/templates/patterns/molecules/boxes/card_box.html

@@ -12,7 +12,7 @@
 
       <div class="flex flex-col mt-3 gap-3 justify-between mt-auto">
         <h2 class="font-alt text-4xl">
-          <a href="#" class="hover:no-underline">
+          <a href="#" class="underline-offset-4">
             {{ header }}
           </a>
         </h2>

majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html

-<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="flex gap-8 flex-col xl:flex-row grow bg-grey-180">
   <div class="xl:shrink-0">
     <a href="#">
       <img
-        class="rounded-full shadow-sm w-30 xl:w-60"
+        class="h-full w-30 xl:w-60 object-cover"
         src="../../../../static/images/person-table.png"
         alt=" {{ name }}"
       >
     </a>
   </div>
-  <div class="flex flex-col justify-between py-4">
-    <div class="flex flex-col mb-8">
+  <div>
+    <div class="flex flex-col justify-between py-4 pr-4 h-full">
+      <div class="flex flex-col">
         <a
-        class="hover:no-underline block font-bold mb-2 text-2xl xl:text-4xl"
+          class="hover:no-underline block font-bold mb-2 text-xl xl:text-3xl"
           href="#"
         ><h4>{{ person_big_name }}</h4></a>
+
         <span class="leading-6 mb-4 xl:mb-6 w-10/12">
           {{ person_big_function }}
         </span>
+      </div>
+
+      <div class="flex flex-col">
         <a
-        class="font-bold mb-2 text-grey-300"
+          class="font-bold mb-2"
           href="tel:{{ person_big_telephone }}"
         >{{ person_big_telephone }}</a>
+
         <a
-        class="text-turquoise-500"
+          class="font-bold"
           href="mailto:{{ person_big_mail }}"
         >{{ person_big_mail }}</a>
+
+        <div class="flex mt-5">
+          {% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Zjisti více' %}
+        </div>
       </div>
-    <div>
-      {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}
     </div>
   </div>
 </div>

majak_uistyleguide/templates/patterns/organisms/header/people_header.html

+{% extends 'patterns/organisms/header/simple_header_with_ui_switch.html' %}
+
+{% block special_classes %}xl:pt-48 xl:pb-32 xl:h-[47.5rem]{% endblock %}
+
+{% block description %}
+   <div class="grid grid-cols-2 gap-4 py-4 font-bold">
+      <p>
+         {{ description_column_1|safe }}
+      </p>
+
+      <p>
+         {{ description_column_2|safe }}
+      </p>
+   </div>
+{% endblock %}
+
+{% block switch %}
+  <a @click="toggleView('candidates')" class="switch__item"
+     :class="{'switch__item--active': isCurrentView('candidates')}">{{ people_choice_1 }}</a>
+  <a @click="toggleView('program')" class="switch__item"
+     :class="{'switch__item--active': isCurrentView('program')}">{{ people_choice_2 }}</a>
+  <a @click="toggleView('other1')" class="switch__item"
+     :class="{'switch__item--active': isCurrentView('other1')}">{{ people_choice_3 }}</a>
+  <a @click="toggleView('other2')" class="switch__item"
+     :class="{'switch__item--active': isCurrentView('other2')}">{{ people_choice_4 }}</a>
+  <a @click="toggleView('teams')" class="switch__item"
+     :class="{'switch__item--active': isCurrentView('teams')}">{{ people_choice_5 }}</a>
+{% endblock %}

majak_uistyleguide/templates/patterns/organisms/header/people_header.yaml

+context:
+  simple_header_title: 'Lidé'
+  description_column_1: 'Pirátská strana vznikla v České republice v roce 2009. Impulsem bylo odsouzení provozovatelů švédské internetové stránky The Pirate Bay. Soudní kauza vzbudila celosvětovou diskusi o reformě autorského práva. Požadavek na reformu práva pro realitu 21. století se stal prvním politickým cílem Pirátů.
+<br>
+<br>
+Následovala řada dalších témat, která se stala součástí politického programu Pirátů: upozornili na řadu korupčních skandálů, prosadili zveřejňování materiálů ze zastupitelstvech a odmítli omezování svobod v reálném i online prostoru.'
+  description_column_2: 'Piráti dnes vystupují ve všech patrech politiky a pokrývají veškerá politická a společenská témata. Jsou stranou liberálního středu, kladou důraz na diskusi, transparentnost a rozhodování na základě dat a informací. Piráti zastupují občany ČR na všech úrovních politiky. Na komunální úrovni působí od roku 2014, v krajských zastupitelstvech od roku 2016. Ve druhém volebním období působí v Poslanecké sněmovně a od roku 2018 hájí Piráti ČR v Evropském parlamentu. Piráti mají aktuálně 1205 členů.'
+  people_choice_1: 'Poslanecká sněmovna'
+  people_choice_2: 'Vláda'
+  people_choice_3: 'Jiná skupina'
+  people_choice_4: 'Jiná skupina dvě'
+  people_choice_5: 'Týmy'

majak_uistyleguide/templates/patterns/organisms/header/simple_header.html

 <header
-  class="bg-black flex items-center simple-header-height py-32 mb-20 w-full"
+  class="bg-black flex items-center py-32 mb-20 w-full {% block special_classes %}simple-header-height{% endblock %}"
 >
   <div class="grid-container pt-20">
     <div class="grid-left-side-with-content header-max-width pt-20 sm:pt-0">
@@ -12,11 +12,13 @@
 
         {% block after_heading %}{% endblock %}
 
+        {% block description %}
           {% if description %}
             <p class="font-semibold text-lg leading-7">
               {{ description }}
             </p>
           {% endif %}
+        {% endblock %}
 
         {% block after_description %}{% endblock %}
       </div>

majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html

@@ -4,6 +4,7 @@
   <div class="mb-12 container--medium flex justify-start">
     <ui-horizontal-scrollable>
       <div class="switch">
+        {% block switch %}
           {% for switch in ui_switch_iterable %}
             <a
               @click="toggleView('view{{ forloop.counter }}')"
@@ -11,6 +12,7 @@
               :class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}"
             >{{ switch.name }}</a>
           {% endfor %}
+        {% endblock %}
       </div>
     </ui-horizontal-scrollable>
   </div>

majak_uistyleguide/templates/patterns/templates/article/article_search.html

@@ -19,8 +19,6 @@
         </div>
       </div>
     </div>
-    {% include 'patterns/organisms/articles/main_articles_article_list.html' with main_articles_name=none %}
   </div>
 </main>
-{% include 'patterns/organisms/main_section/newsletter_section.html' %}
 {% include 'patterns/organisms/layout/footer.html' %}

majak_uistyleguide/templates/patterns/templates/people/people.html

 {% include 'patterns/organisms/layout/navbar.html' %}
-{% include 'patterns/organisms/header/simple_header.html' with simple_header_title='Lidé v pirátské straně' %}
+
+<div class="__js-root">
+  <ui-view-provider
+    :initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
+    v-slot="{ isCurrentView, toggleView }"
+  >
+    {% include 'patterns/organisms/header/people_header.html' %}
+
     <main role="main" class="mb-4 xl:mb-20">
       <div class="grid-container">
-    <div class="grid-content">
-      <div class="prose max-w-none font-condensed text-xl text-black leading-7 mb-12 program-perex">
-        {# BEGIN Cast generovana Majakem #}<div class="content-block">
-          <p>
-            {{ people_text }}
-          </p>
-        </div>{# END Cast generovana Majakem #}
-      </div>
-    </div>
-  </div>
-  <div class="container--medium">
-    <div class="__js-root">
-      <ui-view-provider :initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
-                        v-slot="{ isCurrentView, toggleView }">
-        <div class="flex justify-center mb-12">
-          <ui-horizontal-scrollable>
-            <div class="switch">
-              <a @click="toggleView('candidates')" class="switch__item"
-                 :class="{'switch__item--active': isCurrentView('candidates')}">{{ people_choice_1 }}</a>
-              <a @click="toggleView('program')" class="switch__item"
-                 :class="{'switch__item--active': isCurrentView('program')}">{{ people_choice_2 }}</a>
-              <a @click="toggleView('other1')" class="switch__item"
-                 :class="{'switch__item--active': isCurrentView('other1')}">{{ people_choice_3 }}</a>
-              <a @click="toggleView('other2')" class="switch__item"
-                 :class="{'switch__item--active': isCurrentView('other2')}">{{ people_choice_4 }}</a>
-              <a @click="toggleView('teams')" class="switch__item"
-                 :class="{'switch__item--active': isCurrentView('teams')}">{{ people_choice_5 }}</a>
-            </div>
-          </ui-horizontal-scrollable>
-        </div>
-        <div class="flex flex-wrap gap-4">
+        <div class="flex flex-wrap gap-4 grid-full">
+          <template v-if="!isCurrentView('teams')">
+            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
               <template v-if="isCurrentView('candidates')">
                 {% for content in people_candidates %}
                   {% include 'patterns/molecules/contact/contact_person_large_box.html' with person_big_name=content.name person_big_function=content.function %}
@@ -53,18 +32,21 @@
                   {% include 'patterns/molecules/contact/contact_person_large_box.html' with person_big_name=content.name person_big_function=content.function %}
                 {% endfor %}
               </template>
+            </div>
+          </template>
           <template v-if="isCurrentView('teams')">
             {% for section in teams_sections %}
               {% if section.header %}
-                <h2 class="head-4xl mt-5 mb-5">{{ section.header }}</h2>
+                <h2 class="head-6xl mt-5 mb-5">{{ section.header }}</h2>
               {% endif %}
-              {% include 'patterns/organisms/cards/card_list.html' with cards=section.cards %}
+              {% include 'patterns/organisms/cards/card_list.html' with cards=section.cards description_classes="!bg-grey-180" %}
             {% endfor %}
           </template>
         </div>
-      </ui-view-provider>
-    </div>
       </div>
     </main>
+  </ui-view-provider>
+</div>
+
 {% include 'patterns/organisms/main_section/newsletter_section.html' %}
 {% include 'patterns/organisms/layout/footer.html' %}

majak_uistyleguide/templates/patterns/templates/people/people.yaml

 context:
-  people_text: '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.'
-  people_choice_1: 'Poslanecká sněmovna'
-  people_choice_2: 'Vláda'
-  people_choice_3: 'Jiná skupina'
-  people_choice_4: 'Jiná skupina dvě'
-  people_choice_5: 'Týmy'
-
   people_candidates:
-   - name: 'Ivan Bartoš'
-     function: 'předseda Pirátů, poslanec PSP ČR za Ústecký kraj, ministr, vicepremiér'
-
-
+   -
+    name: 'Ivan Bartoš'
+    function: 'Poslanec PSP ČR za Ústecký kraj'
+   -
+     name: 'Ivan Bartoš'
+     function: 'Poslanec PSP ČR za Ústecký kraj'
+   -
+     name: 'Ivan Bartoš'
+     function: 'Poslanec PSP ČR za Ústecký kraj'
+   -
+     name: 'Ivan Bartoš'
+     function: 'Poslanec PSP ČR za Ústecký kraj'
 
   people_program:
    - name: 'Klára Kocmanová'
@@ -29,7 +28,6 @@ context:
      function: 'předseda poslaneckého klubu Pirátů'
 
 
-
   people_other_1:
    - name: 'Pepa Honzů'
      function: 'předseda poslaneckého klubu Pirátů'
@@ -46,8 +44,6 @@ context:
     - name: 'Václav Bukva'
       function: 'předseda poslaneckého klubu Pirátů'
 
-
-
   teams_sections:
     -
       header: "Rezortní týmy"

majak_uistyleguide/templates/patterns/templates/people/person.html

@@ -18,13 +18,21 @@
         </article>
       </div>
       <div class="grid-right-side mb-8 xl:mb-0">
-        <div class="bg-grey-100 flex flex-col justify-center mb-1 px-7 py-4 xl:py-9">
-          <div class="flex mb-2">
+        <div>
+          <h3 class="head-6xl">Kontakty</h3>
+        </div>
+
+        <div>
           <i class="ico--envelope mr-2"></i>
           <a href="{{ person_mail }}" class="text-turquoise-500 underline">
             {{ person_mail }}
           </a>
         </div>
+
+        <div class="bg-grey-100 flex flex-col justify-center mb-1 px-7 py-4 xl:py-9">
+          <div class="flex mb-2">
+
+          </div>
           <div class="flex">
             <i class="ico--phone mr-2"></i>
             <a href="{{ person_telto }}">
@@ -55,34 +63,8 @@
       </div>
     </section>
   </div>
-  <section class="grid-container no-max mr-0 person-instagram-section mb-4 xl:mb-20">
-    <div class="grid-content-with-right-side">
-      <h2 class="head-4xl text-left">
-        {{ person_instagram_box_title }}
-      </h2>
-      <div class="__js-root instagram-carousel-root xl:max-w-[1145px]">
-        <ui-instagram-carousel>
-          <div class="w-full h-full flex max-w-xs">
-            {% include 'patterns/molecules/boxes/instagram_box.html' %}
-          </div>
-          <div class="w-full h-full flex max-w-xs">
-            {% include 'patterns/molecules/boxes/instagram_box.html' %}
-          </div>
-          <div class="w-full h-full flex max-w-xs">
-            {% include 'patterns/molecules/boxes/instagram_box.html' %}
-          </div>
-          <div class="w-full h-full flex max-w-xs">
-            {% include 'patterns/molecules/boxes/instagram_box.html' %}
-          </div>
-          <div class="w-full h-full flex max-w-xs">
-            {% include 'patterns/molecules/boxes/instagram_box.html' %}
-          </div>
-        </ui-instagram-carousel>
-      </div>
-    </div>
-  </section>
   <section class="grid-container no-max mr-0 mb-4 xl:mb-20">
-    <div class="grid-content-with-right-side">
+    <div class="grid-content">
       <h2 class="head-4xl text-left">
         {{ person_calendar_title }}
       </h2>

majak_uistyleguide/templates/patterns/templates/program/program.html

@@ -42,7 +42,7 @@
             {% elif program.type == 'crossroad' %}
               <div class="grid-container mb-12">
                 <div class="grid-full">
-                  {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-100" classes='drop-shadow-lg' %}
+                  {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
                 </div>
               </div>
             {% endif %}

tailwind.config.js

@@ -77,6 +77,7 @@ module.exports = {
                 '125': '#f0f0f0',
                 '150': '#ececec',
                 '175': '#d0d0d0',
+                '180': '#eee',
                 '185': '#bdbdbd',
                 '200': '#adadad',
                 '300': '#4c4c4c',