Merge branch 'feature/pirati-cz' of gitlab.pirati.cz:to/majak into feature/pirati-cz

main/static/main/css/pattern-scaffolding.css

+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+  -webkit-box-sizing: border-box !important;
+          box-sizing: border-box !important;
+  max-width: 100%;
+  padding: 0 0.5em;
+}
+
+.demo-animate {
+  background: #ddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.sg-colors {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.sg-colors li {
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+  padding: 0.3em;
+  margin: 0 0.5em 0.5em 0;
+  min-width: 5em;
+  max-width: 14em;
+  border: 1px solid #ddd;
+  border-radius: 0;
+}
+
+.sg-swatch {
+  display: block;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0;
+}
+
+.sg-label {
+  font-size: 1rem;
+}
+
+.sg-pattern-example {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+}
+
+.sg-pattern-head .sg-pattern-title a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+  color: #202020 !important;
+}
+
+.sg-pattern-category-title a {
+  font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 3.5rem !important;
+}

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">
+<nav
+  class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
   <!-- Logo -->
-  <a href="" class="menu-flag flex justify-center flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
+  <a href="" class="menu-flag flex justify-center z-50 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 -->
-  <div class="grid-container main-menu-grid">
-    <div class="main-menu grid-content-with-right-side grid justify-between items-center xl:py-6">
+  <div class="grid-container main-menu-grid m-0 w-full xl:w-auto absolute xl:static">
+    <div
+      class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none 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 class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
+        <div class="container">
+          <div class="bar1"></div>
+          <div class="bar2"></div>
+          <div class="bar3"></div>
+        </div>
       </label>
       <!-- Menu -->
-      <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>
-        <a href="#" class="menu-link">Naloď se</a>
-        <a href="#" class="menu-link">Kontakty</a>
+
+      <div
+        class="main-menu__main main-menu-items justify-center pt-20 xl:pt-0 xl:flex-wrap z-40 space-x-3 overflow-auto bg-white -mt-20 xl:-mt-0 xl:h-auto xl:bg-transparent text-center xl:text-left xl:space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
+        <a href="#" class="text-2xl xl:text-base menu-link">Jak pracujeme</a>
+        <a href="#" class="text-2xl xl:text-base menu-link">Program</a>
+        <a href="#" class="text-2xl xl:text-base menu-link">O nás</a>
+        <a href="#" class="text-2xl xl:text-base menu-link">Naloď se</a>
+        <a href="#" class="text-2xl xl:text-base menu-link">Kontakty</a>
+        <a href="#" class="text-2xl xl:text-base menu-link">Naloď se</a>
       </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">
-          <a href="" class="text-white hover:no-underline">
+      <div
+        class="main-menu__external main-menu-items items-center justify-center xl:justify-start space-x-1 2xl:space-x-3 xl:flex">
+        <div class="flex py-4 space-x-10 xl:space-x-3 mb-2 xl:mb-0 justify-center xl:justify-start xl:mr-2">
+          <a href="" class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
             <i class="ico--facebook"></i>
           </a>
-          <a href="" class="text-white hover:no-underline">
+          <a href="" class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
             <i class="ico--twitter"></i>
           </a>
-          <a href="" class="text-white hover:no-underline">
+          <a href="" class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
             <i class="ico--instagram"></i>
           </a>
         </div>
+        <div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5">
           <a href="#"
-           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>
+             class="btn btn--green-500 btn--hoveractive font-condensed uppercase">
+            <div class="btn__body-wrap w-32 h-11">
+              <div class="btn__body w-32 h-11 xl:w-auto">Dary</div>
             </div>
           </a>
           <a href="#"
-           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>
+             class="btn btn--violet-700 btn--hoveractive font-condensed xl:w-auto uppercase">
+            <div class="btn__body-wrap w-32 h-11">
+              <div class="btn__body w-32 h-11 xl:w-auto">Nalodění</div>
             </div>
           </a>
         </div>
       </div>
     </div>
+  </div>
 </nav>

main/styleguide/source/css/organisms/navbar.pcss

@@ -32,7 +32,7 @@
   grid-area: main;
 
   .menu-link {
-    @apply bg-black text-white font-condensed uppercase leading-loose cursor-pointer hover:no-underline xl:text-lg xl:bg-transparent;
+    @apply bg-white text-black font-condensed uppercase leading-loose cursor-pointer xl:bg-black xl:text-white hover:no-underline xl:text-lg xl:bg-transparent;
   }
 }
 
@@ -53,7 +53,7 @@
 }
 
 .main-menu__external {
-  @apply bg-black text-white;
+  @apply bg-white text-black xl:bg-black xl:text-white;
   grid-area: external;
 }
 
@@ -74,3 +74,29 @@
     width: 260px;
   }
 }
+.container {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+  background-color: white;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+#menuToggle:checked + label .bar1 {
+  -webkit-transform: rotate(45deg) translate(-9px, 6px);
+  transform: rotate(-45deg) translate(-9px, 6px);
+  background-color: black;
+}
+
+#menuToggle:checked + label .bar2 {opacity: 0;}
+
+#menuToggle:checked + label .bar3 {
+  -webkit-transform: rotate(-45deg) translate(-8px, -8px);
+  transform: rotate(45deg) translate(-8px, -8px);
+  background-color: black;
+}

main/styleguide/tailwind.config.js

@@ -137,6 +137,7 @@ module.exports = {
                 '400': '#840048',
                 '500': '#670047',
                 '600': '#7D337F',
+                '700': '#7D347D',
             },
         },
         container: {
@@ -221,6 +222,10 @@ module.exports = {
                     text: 'black',
                     background: 'violet.500',
                 },
+              'violet-700': {
+                    text: 'black',
+                    background: 'violet.700',
+                },
                 'red-600': {
                     text: 'white',
                     background: 'red.600',

main/templates/main/includes/layout/header.html

 {% load static wagtailcore_tags %}
 
 <!-- Navbar -->
-<nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
+<nav
+  class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 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 z-50 flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
     <img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
   </a>
   <!-- Flex container -->
-  <div class="grid-container main-menu-grid">
-    <div class="main-menu grid-content-with-right-side grid justify-between items-center xl:py-6">
+  <div class="grid-container main-menu-grid m-0 w-full xl:w-auto absolute xl:static">
+    <div
+      class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none 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 class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
+        <div class="container">
+          <div class="bar1"></div>
+          <div class="bar2"></div>
+          <div class="bar3"></div>
+        </div>
       </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 justify-center pt-20 xl:pt-0 xl:flex-wrap z-40 space-x-3 overflow-auto bg-white -mt-20 xl:-mt-0 xl:h-auto xl:bg-transparent text-center xl:text-left xl:space-x-3 xl:mt-0 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">
+      <div
+        class="main-menu__external main-menu-items items-center justify-center xl:justify-start space-x-1 2xl:space-x-3 xl:flex">
         {% for social_link_block in page.root_page.social_links %}
-            <a href="{{ social_link_block.value.link }}" class="text-white hover:no-underline">
+          <div class="flex py-4 space-x-10 xl:space-x-3 mb-2 xl:mb-0 justify-center xl:justify-start xl:mr-2">
+          <a href="{{ social_link_block.value.link }}"
+             class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
             <i class="{{ social_link_block.value.icon }}"></i>
           </a>
         {% endfor %}
         </div>
+        <div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5">
           {% 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" target="_blank">
-            <div class="btn__body-wrap h-full">
-              <div class="btn__body ">Dary</div>
+               class="btn btn--green-500 btn--hoveractive font-condensed uppercase" target="_blank">
+              <div class="btn__body-wrap w-32 h-11">
+                <div class="btn__body w-32 h-11 xl:w-auto">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" target="_blank">
-            <div class="btn__body-wrap h-full">
-              <div class="btn__body ">Nalodění</div>
+               class="btn btn--violet-700 btn--hoveractive font-condensed xl:w-auto uppercase" target="_blank">
+              <div class="btn__body-wrap w-32 h-11">
+                <div class="btn__body w-32 h-11 xl:w-auto ">Nalodění</div>
               </div>
             </a>
           {% endif %}
         </div>
       </div>
     </div>
+  </div>
 </nav>

main/templates/main/includes/menu_item.html

 {% firstof self.page.url self.link as target %}
-<a href="{{ target }}" class="menu-link">
+<a href="{{ target }}" class="text-2xl xl:text-base menu-link">
   {{ self.title }}
 </a>

main/templates/main/main_articles_page.html

@@ -23,9 +23,9 @@
             <div class="flex justify-center">
               <div class="switch">
                 <a @click="toggleView('timeline')" class="switch__item"
-                                   :class="{'switch__item--active': isCurrentView('timeline')}">Poslanecká sněmovna</a>
+                   :class="{'switch__item--active': isCurrentView('timeline')}">Aktuality</a>
                 <a @click="toggleView('articles')" class="switch__item"
-                                   :class="{'switch__item--active': isCurrentView('articles')}">Vláda</a>
+                   :class="{'switch__item--active': isCurrentView('articles')}">Tiskové zprávy</a>
               </div>
             </div>
           </div>
@@ -110,7 +110,7 @@
     async function showMoreArticles(event, btn) {
       event.preventDefault()
 
-            let searchArticleResultWrapper = document.getElementById('searchArticleResultWrapper');
+      let searchArticleResultWrapper = document.getElementById('searchArticleResultWrapper')
       let url = btn.getAttribute('data-url') + btn.getAttribute('data-page')
 
       const response = await fetch(url, {