in progress

wp-content/plugins/biuro-feedbacks/biuro-feedbacks.php

@@ -115,26 +115,36 @@ class Biuro_Feedbacks extends WP_Widget {
             }
 
             echo '<div class="c-feedbacks--inner">';
+                echo '<div class="swiper-wrapper">';
 
+                for ($i = 1; $i <= 8; $i++):
 
-            for ($i = 1; $i <= 8; $i++):
+                    if ( ${'name' . $i} != "" && ${'feedback' . $i} != ""):
+                        echo '<div class="swiper-slide">';
+                            echo '<div class="c-feedbacks--section">';
+                                echo '<div class="c-feedbacks--section-inner">';
 
-                if ( ${'name' . $i} != "" && ${'feedback' . $i} != ""):
-                    echo '<div class="c-feedbacks--section">';
+                                if ( ${'img' . $i} != "" ) {
+                                    echo '<img src="/wp-content/themes/biuro/i/feedbacks/' . ${'img' . $i} . '" class="c-feedbacks--img" width="84px" height="84px"/>';
+                                }
 
-                    if ( ${'name' . $i} != "" ) {
-                        echo '<h3>' . ${'name' . $i}  . ${'img' . $i} . '</h3>';
-                    }
+                                if ( ${'feedback' . $i} != "" ) {
+                                    echo '<div class="c-feedbacks--feedback">' . ${'feedback' . $i} . '</div>';
+                                }
 
-                    if ( ${'feedback' . $i} != "" ) {
-                        echo '<p>' . ${'feedback' . $i} . '</p>';
-                    }
+                                if ( ${'name' . $i} != "" ) {
+                                    echo '<div class="c-feedbacks--name">' . ${'name' . $i} . '</div>';
+                                }
 
-                    echo '</div>';
-                endif;
+                                echo '</div>';
+                            echo '</div>';
+                        echo '</div>';
+                    endif;
 
-            endfor;
+                endfor;
 
+                echo '</div>';
+                echo '<div class="swiper-pagination"></div>';
             echo '</div>';
         echo '</div>';
 

wp-content/themes/biuro/css/07-components/__components.css

@@ -6,6 +6,7 @@ rich design UI styling. Class names here are more specific. This layer usually h
 c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
 ========================================================================== */
 
+@import 'vendor/swiper.css';
 @import '_component--awesomplete.css';
 @import '_component--breadcrumbs.css';
 @import '_component--cookies-warning.css';
@@ -29,8 +30,3 @@ c-: Signify that something is a Component. This is a concrete, implementation-sp
 @import '_component--social.css';
 @import '_component--trust.css';
 @import '_component--values.css';
-
-/*
-    @import '_component--nav.css';
-*/
-

wp-content/themes/biuro/css/07-components/_component--feedbacks.css

@@ -4,10 +4,25 @@
 
 .c-feedbacks { padding: 50px 0 70px; background: linear-gradient(134.06deg, #FFFFFF 0%, #CBE2EC 100%); }
 
-.c-feedbacks--inner { width: 640px; margin: 0 auto; }
+.c-feedbacks--inner { position: relative; overflow: hidden; width: 640px; height: 300px; margin: 0 auto; }
 
 .c-feedbacks--heading { color: #2A3644; margin: 0 0 40px; padding: 0; font-size: 25px; font-weight: 500; line-height: 29px; text-align: center; }
 
-.c-feedbacks--section   { border: 1px solid #00f; min-height: 300px;}
+/*.c-feedbacks--sections   {  border: 1px solid #f00; }*/
+.c-feedbacks--section    {  padding-top: 40px;}
+.c-feedbacks--section-inner { position: relative; height: 140px; width: 574px; margin: 0 auto; padding: 68px 0 0; border-radius: 23px; background-color: #FFFFFF; }
 
 /* critical:end */
+
+.c-feedbacks--img { position: absolute; top: -32px; left: 50%; border-radius: 50%; margin-left: -42px; background: #fff; overflow: hidden; }
+
+.c-feedbacks--feedback { margin: 0 auto 17px;  max-width: 400px; height: 79px; color: #2A3644; font-family: Georgia; font-size: 21px; line-height: 40px; text-align: center; overflow: hidden;}
+
+.c-feedbacks--name { color: #919191; font-family: Georgia;  font-size: 15px;  line-height: 17px;  text-align: center; }
+
+
+.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0; }
+
+.swiper-pagination-bullet   { width: 9px; height: 9px; background: #D8D8D8; opacity: 1; }
+
+.swiper-pagination-bullet-active { background: #717171; }

wp-content/themes/biuro/css/07-components/_component--nav.css

@@ -23,7 +23,7 @@
 
 .c-nav--sub                    { position: absolute; top: 100%; }
 .c-nav--sub-item            { margin-right: 45px; }
-.c-nav--sub-anchor        { display: block; padding: 17px 0; color: #fff; text-transform: uppercase; white-space: nowrap; text-decoration: none; font-weight: 500;
+.c-nav--sub-anchor        { display: block; padding: 17px 0; color: #fff; text-transform: uppercase; white-space: nowrap; text-decoration: none; font-weight: 500; line-height: 1;
     &:hover { color: var(--color--green); }
 }
 
@@ -34,6 +34,25 @@
 }
 .c-nav--region    {  }
 
-.c-nav--lang        {
-    li                              {  }
+.c-nav--lang-wrap   { position: relative; width: 70px; height: 32px; }
+
+.c-nav--lang        { position: absolute; top: 0; left: 0; width: 100%; background: #fff; border-radius: 3px;
+    &:hover             {
+        .c-nav--lang-item     { display: block; }
+    }
+}
+
+.c-nav--lang-item     { padding: 6px 0;
+    &:nth-child(n+2)    { display: none; }
+}
+.c-nav--lang-anchor     { padding-left: 34px; text-decoration: none; display: block;  color: #2A3644; font-size: 14px;  line-height: 20px; background-repeat: no-repeat; background-position: 6px 0; background-size: 20px 20px;
+    &:hover             { text-decoration: underline; }
+    svg                                 { float: right; margin: 7px 9px 0 0; }
 }
+
+.c-nav--lang-anchor-lt { background-image: url(/wp-content/themes/biuro/i/lang/lt.png); }
+.c-nav--lang-anchor-en { background-image: url(/wp-content/themes/biuro/i/lang/en.png); }
+.c-nav--lang-anchor-de { background-image: url(/wp-content/themes/biuro/i/lang/de.png); }
+.c-nav--lang-anchor-ru { background-image: url(/wp-content/themes/biuro/i/lang/ru.png); }
+.c-nav--lang-anchor-lv { background-image: url(/wp-content/themes/biuro/i/lang/lv.png); }
+.c-nav--lang-anchor-ee { background-image: url(/wp-content/themes/biuro/i/lang/ee.png); }

wp-content/themes/biuro/css/10-trumps/__utils.css

@@ -13,7 +13,7 @@ u-: Signify that this class is a Utility class. It has a very specific role (oft
 
 /* @import '_utils-reset.css'; */
 
-/* @import '_utils-fill.css'; */
+ @import '_utils-fill.css';
 
 /* @import '_utils-position.css'; */
 

wp-content/themes/biuro/css/10-trumps/_utils-fill.css

@@ -11,7 +11,7 @@
 
 /* critical:start */
 
-/*.u-fill--brand  { fill: var(--brand--color); }*/
+.u-fill--inherit  { fill: currentColor; }
 
 /* critical:end */
 

wp-content/themes/biuro/footer.php

@@ -113,7 +113,7 @@ document.querySelectorAll('.js-job-action').forEach(function (node) {
 });
 </script>
 
-    <script src="/wp-content/themes/biuro/js/main-19c9eea4.min.js" async></script>
+    <script src="/wp-content/themes/biuro/js/main-dd8a9e47.min.js" async></script>
 <?php wp_footer(); ?>
 </body>
 </html>

wp-content/themes/biuro/header.php

@@ -32,16 +32,16 @@ define('cityID', $cityID);
 ?>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
 
-    <style><?php include 'css/core-0b19251217.min.css'; ?></style>
+    <style><?php include 'css/core-04bfbb6b61.min.css'; ?></style>
 
-    <link rel="preload" href="/wp-content/themes/biuro/css/main-89d93c655d.min.css" as="style" onload="this.rel='stylesheet'">
+    <link rel="preload" href="/wp-content/themes/biuro/css/main-06e3f22df9.min.css" as="style" onload="this.rel='stylesheet'">
 
     <link rel="preload" href="/wp-content/themes/biuro/fonts/pt_sans_narrow.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/wp-content/themes/biuro/fonts/pt_sans_narrow_bold.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/wp-content/themes/biuro/fonts/bebas-neue.woff2" as="font" type="font/woff2" crossorigin>
 
     <noscript>
-        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-89d93c655d.min.css">
+        <link rel="stylesheet" href="/wp-content/themes/biuro/css/main-06e3f22df9.min.css">
     </noscript>
 
     <?php wp_head(); ?>
@@ -83,9 +83,11 @@ global $post;
 
             <button class="o-btn c-btn--main c-btn--header"><?php _e('Get a job offer', 'biuro'); ?></button>     <!-- Gauk darbo pasiūlymą -->
 
+            <div class="c-nav--lang-wrap">
 <?php
             get_template_part( 'template-parts/menus/menu', 'language' );
 ?>
+            </div>
         </div>
     </header>
 

wp-content/themes/biuro/js/main.js

 import Awesomplete from './vendor/awesomplete';
+import Swiper from './vendor/swiper';
 
 (global => {
     const container = document.getElementById('cookie-warning');
@@ -123,160 +124,83 @@ function initDivisionsMap (node, data) {
     setMarkers(map, divisions.filter((d) => { return d.lat && d.lng; }));
 }
 
-const search = document.getElementById('search');
-const city = document.getElementById('search-city');
-const query = document.getElementById('search-query');
-
-const cityBox = new Awesomplete(city, {
-    minChars: 0,
-    sort: false
-    // data: (item, input) => {
-    //     console.error('----------');
-    //     console.dir(item);
-    //     console.dir(input);
-    //     return { label: item.value, value: item.name };
-    // },
-    // replace: function(text) {
-    //     console.error('text');
-    //     console.dir(text);
-    //     // var hidden = document.querySelector('[name="' + this.input.dataset.name + '"]');
-
-    //     // this.input.value = text.label;
-
-    //     // if (!hidden) {
-    //     //     return;
-    //     // }
-
-    //     // hidden.value = text.value;
-
-    //     // if (hidden.classList.contains('js-trigger-datalist')) {
-    //     //     hidden.dispatchEvent(new Event('change', {
-    //     //         'bubbles': true,
-    //     //         'cancelable': true
-    //     //     }));
-    //     // }
-
-    //     // hidden.dispatchEvent(event);
-    // }
-// });
-});
+(global => {
+    const city = document.getElementById('search-city');
 
-city.addEventListener('focus', () => {
-    cityBox.evaluate();
-});
+    if (!city) {
+        return;
+    }
 
-const queryBox = new Awesomplete(query, {
-    minChars: 0,
-    sort: false
-});
+    const search = document.getElementById('search');
+    const query = document.getElementById('search-query');
+
+    const cityBox = new Awesomplete(city, {
+        minChars: 0,
+        sort: false
+        // data: (item, input) => {
+        //     console.error('----------');
+        //     console.dir(item);
+        //     console.dir(input);
+        //     return { label: item.value, value: item.name };
+        // },
+        // replace: function(text) {
+        //     console.error('text');
+        //     console.dir(text);
+        //     // var hidden = document.querySelector('[name="' + this.input.dataset.name + '"]');
+
+        //     // this.input.value = text.label;
+
+        //     // if (!hidden) {
+        //     //     return;
+        //     // }
+
+        //     // hidden.value = text.value;
+
+        //     // if (hidden.classList.contains('js-trigger-datalist')) {
+        //     //     hidden.dispatchEvent(new Event('change', {
+        //     //         'bubbles': true,
+        //     //         'cancelable': true
+        //     //     }));
+        //     // }
+
+        //     // hidden.dispatchEvent(event);
+        // }
+    // });
+    });
 
-query.addEventListener('focus', () => {
-    queryBox.evaluate();
-});
+    city.addEventListener('focus', () => {
+        cityBox.evaluate();
+    });
 
-if (search) {
-    search.addEventListener('submit', (e) => {
-        if (!city.value && !query.value) {
-            city.focus();
-            e.preventDefault();
-        }
-    }, false);
-}
+    const queryBox = new Awesomplete(query, {
+        minChars: 0,
+        sort: false
+    });
+
+    query.addEventListener('focus', () => {
+        queryBox.evaluate();
+    });
+
+    if (search) {
+        search.addEventListener('submit', (e) => {
+            if (!city.value && !query.value) {
+                city.focus();
+                e.preventDefault();
+            }
+        }, false);
+    }
+
+})(window);
 
-// function initDatalist() {
-
-//     var nodes = document.querySelectorAll('.js-datalist, .js-datalist-ajax'),
-//         node,
-//         getHidden = function(node) {
-//             return document.querySelector('[name="' + node.dataset.name + '"]');
-//         },
-//         event = new Event('input', {
-//             'bubbles': true,
-//             'cancelable': true
-//         });
-
-//     for (var i = 0; i < nodes.length; i++) {
-//         node = nodes[i];
-
-//         if (node.comboplete) {
-//             return;
-//         }
-
-//         node.comboplete = new Awesomplete(node, {
-//             minChars: 0,
-//             maxItems: 50,
-//             replace: function(text) {
-
-//                 var hidden = getHidden(this.input);
-
-//                 this.input.value = text.label;
-
-//                 if (!hidden) {
-//                     return;
-//                 }
-
-//                 hidden.value = text.value;
-
-//                 if (hidden.classList.contains('js-trigger-datalist')) {
-//                     hidden.dispatchEvent(new Event('change', {
-//                         'bubbles': true,
-//                         'cancelable': true
-//                     }));
-//                 }
-
-//                 hidden.dispatchEvent(event);
-
-
-//             }
-//         });
-
-//         node.addEventListener('click', function() {
-//             if (this.comboplete.ul.childNodes.length === 0 || !node.value) {
-//                 this.comboplete.minChars = 0;
-//                 this.comboplete.evaluate();
-//             }
-//             else if (this.comboplete.ul.hasAttribute('hidden')) {
-//                 this.comboplete.open();
-//             }
-//             else {
-//                 this.comboplete.close();
-//             }
-//         });
-
-//         node.addEventListener('keyup', function(e) {
-//             var code = e.keyCode || 0;
-
-//             if (code === 13) {
-//                 if (this.comboplete.ul.childNodes.length === 1) {
-//                     this.comboplete.select(this.comboplete.ul.childNodes[0]);
-//                 }
-//             }
-//         });
-
-//         node.addEventListener('input', function() {
-//             var value = this.value,
-//                 exists = false,
-//                 hidden;
-
-//             this.comboplete.ul.childNodes.forEach(function(n) {
-//                 if (n.innerText === value) {
-//                     exists = true;
-//                 }
-//             });
-
-//             if (exists) {
-//                 return;
-//             }
-
-//             hidden = getHidden(this);
-
-//             if (!hidden) {
-//                 return;
-//             }
-
-//             hidden.value = '';
-
-//             hidden.dispatchEvent(event);
-//         })
-//     }
-// }
+const swiper = new Swiper('.c-feedbacks--inner', {
+    autoplay: {
+        delay: 4000,
+        disableOnInteraction: false
+    },
+    grabCursor: true,
+    loop: true,
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true
+    }
+});

wp-content/themes/biuro/template-parts/menus/menu-language.php

@@ -5,14 +5,30 @@
 ?>
     <ul class="o-nav c-nav--lang">
 <?php
-            $translations = pll_the_languages( array(
-                'raw'=>1,
-                'force_home'=>1
-            ) );
+    $translations = pll_the_languages( array(
+        'raw'=>1,
+        'force_home'=>1
+    ) );
 
-            foreach ($translations as $code => $lang) :
-                $classCSS = $lang['current_lang'] ? 'class="act"' : '';
-                echo '<li><a href="' . $lang['url'] . '" title="' . $lang['name'] . '" ' . $classCSS . '>' . strtoupper($lang['slug']) . '</a></li>';
-            endforeach;
+    usort($translations, function($a, $b) {
+        return $a['current_lang'] < $b['current_lang'];
+    });
+
+
+    foreach ($translations as $code => $lang) :
+
+        // $classCSS = $lang['current_lang'] ? 'c-nav--lang-anchor--current' : '';
+        $classCSS = '';
+
+        echo '<li class="c-nav--lang-item"><a href="' . $lang['url'] . '" title="' . $lang['name'] . '" class="c-nav--lang-anchor c-nav--lang-anchor-' . $lang['slug'] . ' ' . $classCSS . '">' . strtoupper($lang['slug']);
+
+        if ($lang['current_lang']):
+            echo '<svg xmlns="http://www.w3.org/2000/svg" width="8.751px" height="5.213px" viewBox="0 0 8.751 5.213" enable-background="new 0 0 8.751 5.213" xml:space="preserve">
+                <path class="u-fill-inherit" d="M4.143,5.117L0.096,1.103c-0.129-0.129-0.129-0.336,0-0.465l0.541-0.541 c0.129-0.129,0.336-0.129,0.465,0l3.273,3.24l3.273-3.24c0.129-0.129,0.336-0.129,0.465,0l0.541,0.541 c0.129,0.129,0.129,0.336,0,0.465L4.608,5.117C4.48,5.245,4.272,5.245,4.143,5.117z"/>
+            </svg>';
+        endif;
+
+        echo '</a></li>';
+    endforeach;
 ?>
     </ul>