src/PortalBundle/Resources/views/About/blog/blog.html.twig line 1

Open in your IDE?
  1. {% extends '@Portal/template.html.twig' %}
  3. {% block head %}
  4.     <title>{{ 'seo.blog.title'|trans({}, 'portal_base') }}</title>
  5.     <meta name="description" content="{{ 'seo.blog.desc'|trans({}, 'portal_base') }}">
  6.     <link rel="stylesheet" type="text/css" href="/dist/{{ MODE }}/portal/css/portalAboutBlog.css?{{ VERSION }}">
  7. {% endblock head %}
  9. {% block ogtagDynamic %}
  10.     <meta property="og:type" content="website" />
  11.     <meta property="og:url" content="{{ app.request.uri }}" />
  12.     <meta property="og:title" content="{{ 'seo.blog.title'|trans({}, 'portal_base') }}" />
  13.     <meta property="og:description" content="{{ 'seo.blog.desc'|trans({}, 'portal_base') }}" />
  14.     <meta property="og:site_name" content="VIDI.UA" />
  15. {% endblock ogtagDynamic %}
  18. {% block content %}
  20.     <div id="blog">
  21.         <section class="breadcrumbs__new">
  22.             <div class="container">
  23.                 <ol class="vidi_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
  24.                     <li class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  25.                         <a itemprop="item" href="{{ path('portal_homepage') }}">
  26.                             <span class="breadcrumbs__link" itemprop="name">VIDI.UA</span>
  27.                         </a>
  28.                         <meta itemprop="position" content="1"/>
  29.                     </li>
  31.                     <div class="arrow-bc"></div>
  32.                     <li class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  33.                         <span style="color: #ABABAB" class="breadcrumbs__link" itemprop="name">{{ 'blog.h1'|trans({}, 'portal_base') }}</span>
  34.                         <meta itemprop="position" content="2"/>
  35.                     </li>
  36.                 </ol>
  37.             </div>
  38.         </section>
  40.         <section class="section_head_blog">
  41.             <div class="container">
  42.                 <div class="blog_head_wrapper">
  43.                     <h1 class="blog_head_title" v-html="pageH1 ? pageH1 : 'Автоблог'"></h1>
  44.                     <div class="search-container">
  45.                         <input type="text" placeholder="{{ 'header.search_bar'|trans({}, 'portal_base') }}" v-model="userInputLabel" class="search-input" @keyup.enter="findPostByTitle">
  46.                         <button class="search-button" aria-label="{{ 'header.search_bar'|trans({}, 'portal_base') }}" @click="findPostByTitle" >
  47.                             <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  48.                                 <path d="M13.8989 13.4243L10.5551 10.0618C11.3825 9.11929 11.8109 7.89196 11.7498 6.6393C11.6887 5.38664 11.1428 4.20684 10.2277 3.34931C9.31252 2.49177 8.09975 2.02372 6.84577 2.0441C5.59179 2.06447 4.39487 2.57168 3.50806 3.4585C2.62124 4.34531 2.11403 5.54223 2.09366 6.79621C2.07328 8.05019 2.54133 9.26296 3.39887 10.1781C4.2564 11.0933 5.4362 11.6391 6.68886 11.7002C7.94152 11.7613 9.16885 11.3329 10.1114 10.5056L13.4739 13.8618C13.5019 13.8917 13.5358 13.9156 13.5735 13.9318C13.6111 13.9481 13.6516 13.9565 13.6926 13.9565C13.7336 13.9565 13.7742 13.9481 13.8118 13.9318C13.8494 13.9156 13.8833 13.8917 13.9114 13.8618C13.9405 13.8329 13.9634 13.7984 13.9786 13.7603C13.9938 13.7222 14.0011 13.6814 13.9999 13.6404C13.9987 13.5994 13.9892 13.559 13.9718 13.5219C13.9544 13.4847 13.9296 13.4515 13.8989 13.4243ZM6.93014 11.0806C6.10193 11.0806 5.29232 10.835 4.60369 10.3749C3.91506 9.91473 3.37834 9.26073 3.06139 8.49557C2.74445 7.7304 2.66153 6.88843 2.8231 6.07614C2.98468 5.26384 3.3835 4.5177 3.96913 3.93207C4.55476 3.34644 5.3009 2.94762 6.1132 2.78604C6.92549 2.62447 7.76746 2.70739 8.53263 3.02433C9.29779 3.34128 9.95179 3.878 10.4119 4.56663C10.872 5.25526 11.1176 6.06487 11.1176 6.89308C11.116 8.00317 10.6743 9.06731 9.88932 9.85226C9.10437 10.6372 8.04023 11.0789 6.93014 11.0806Z" fill="#181716"/>
  49.                             </svg>
  50.                         </button>
  51.                     </div>
  52.                 </div>
  53.             </div>
  54.         </section>
  56.         <section class="section_category_blog">
  57.             <div class="container">
  58.                 <div class="categories" id="categoryContainer">
  59.                     <button v-for="category in categories.slice(0, categoryCountLimit)"
  60.                             :key="category.id"
  61.                             :value="category.id"
  62.                             v-html="category.title"
  63.                             class="category-btn"
  64.                             :class="{ active: activeCategory && activeCategory.url === category.url }"
  65.                             @click="changeActiveCategory(category)">
  66.                     </button>
  67.                     <button v-html="options.moreCategoriesTranslate"
  68.                             v-if="categoryCountLimit === 11"
  69.                             @click="categoryCountLimit = 999"
  70.                             class="more-cat">
  71.                     </button>
  72.                 </div>
  73.             </div>
  74.         </section>
  76.         <section class="section_blog">
  77.             <div class="container">
  78.                 <div class="blog_wrapper">
  79.                     <div class="blog_box" v-for="post in posts"
  80.                          :value="post.id" v-if="post.categories">
  81.                         <a class="blog_img_link" :href="post.url">
  82.                             <img class="blog_img" :src="post.image" :alt="post.title" alt=""></a>
  83.                         <span class="blog_label" v-for="category in post.categories" :value="category.id" v-html="category.title"></span>
  84.                         <div class="blog_info_wrap">
  85.                             <div class="blog_info_view_box">
  86.                                 <svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  87.                                     <path d="M12.7193 7.85794H13.8353C14.0877 7.85794 14.2929 7.65266 14.2929 7.40034V6.28428C14.2929 6.03197 14.0877 5.82669 13.8353 5.82669H12.7193C12.467 5.82669 12.2617 6.03197 12.2617 6.28428V7.40034C12.2617 7.65266 12.467 7.85794 12.7193 7.85794ZM12.7304 6.29544H13.8242V7.38919H12.7304V6.29544ZM12.7193 10.8267H13.8353C14.0877 10.8267 14.2929 10.6214 14.2929 10.3691V9.25303C14.2929 9.00072 14.0877 8.79544 13.8353 8.79544H12.7193C12.467 8.79544 12.2617 9.00072 12.2617 9.25303V10.3691C12.2617 10.6214 12.467 10.8267 12.7193 10.8267ZM12.7304 9.26419H13.8242V10.3579H12.7304V9.26419ZM9.5344 7.85794H10.6505C10.9028 7.85794 11.1081 7.65266 11.1081 7.40034V6.28428C11.1081 6.03197 10.9028 5.82669 10.6505 5.82669H9.5344C9.28209 5.82669 9.07681 6.03197 9.07681 6.28428V7.40034C9.07681 7.65266 9.28209 7.85794 9.5344 7.85794ZM9.54556 6.29544H10.6393V7.38919H9.54556V6.29544ZM4.28072 11.625H3.16465C2.91234 11.625 2.70706 11.8303 2.70706 12.0826V13.1987C2.70706 13.451 2.91234 13.6562 3.16465 13.6562H4.28072C4.53303 13.6562 4.73831 13.451 4.73831 13.1987V12.0826C4.73831 11.8303 4.53303 11.625 4.28072 11.625ZM4.26956 13.1875H3.17581V12.0938H4.26956V13.1875ZM4.28072 5.82669H3.16465C2.91234 5.82669 2.70706 6.03197 2.70706 6.28428V7.40034C2.70706 7.65266 2.91234 7.85794 3.16465 7.85794H4.28072C4.53303 7.85794 4.73831 7.65266 4.73831 7.40034V6.28428C4.73831 6.03194 4.53303 5.82669 4.28072 5.82669ZM4.26956 7.38919H3.17581V6.29544H4.26956V7.38919ZM9.5344 10.7571H10.6505C10.9028 10.7571 11.1081 10.5518 11.1081 10.2995V9.18344C11.1081 8.93112 10.9028 8.72584 10.6505 8.72584H9.5344C9.28209 8.72584 9.07681 8.93112 9.07681 9.18344V10.2995C9.07681 10.5518 9.28209 10.7571 9.5344 10.7571ZM9.54556 9.19459H10.6393V10.2883H9.54556V9.19459ZM14.5257 1.07106H13.5237V0.712719C13.5237 0.319719 13.2039 0 12.8109 0H12.7033C12.3103 0 11.9906 0.319719 11.9906 0.712719V1.07106H5.00937V0.712719C5.00937 0.319719 4.68965 0 4.29665 0H4.18903C3.79603 0 3.47631 0.319719 3.47631 0.712719V1.07106H2.47428C1.82725 1.07106 1.30084 1.59747 1.30084 2.2445V14.8281C1.30084 15.4743 1.82653 16 2.47272 16H14.5273C15.1735 16 15.6992 15.4743 15.6992 14.8281V2.2445C15.6992 1.59747 15.1728 1.07106 14.5257 1.07106ZM12.4594 0.712719C12.4594 0.578187 12.5688 0.46875 12.7033 0.46875H12.811C12.9455 0.46875 13.0549 0.578187 13.0549 0.712719V1.07106H12.4594V0.712719ZM3.94509 0.712719C3.94509 0.578187 4.05453 0.46875 4.18906 0.46875H4.29669C4.43122 0.46875 4.54065 0.578187 4.54065 0.712719V1.07106H3.94512V0.712719H3.94509ZM15.2304 14.8281C15.2304 15.2158 14.915 15.5312 14.5273 15.5312H2.47269C2.08497 15.5312 1.76956 15.2158 1.76956 14.8281V14.8267C1.96594 14.9746 2.21003 15.0625 2.47428 15.0625H11.9769C12.2903 15.0625 12.585 14.9404 12.8066 14.7188L15.2304 12.295V14.8281ZM12.5675 14.295C12.5858 14.2192 12.5958 14.1401 12.5958 14.0587V12.4942C12.5958 12.1992 12.8359 11.9592 13.1309 11.9592H14.6954C14.7768 11.9592 14.8559 11.9492 14.9317 11.9308L12.5675 14.295ZM15.2304 4.42044H5.24375C5.11431 4.42044 5.00937 4.52537 5.00937 4.65481C5.00937 4.78425 5.11431 4.88919 5.24375 4.88919H15.2304V10.9554C15.2304 11.2504 14.9904 11.4904 14.6954 11.4904H13.1309C12.5774 11.4904 12.1271 11.9408 12.1271 12.4942V14.0587C12.1271 14.3538 11.8871 14.5938 11.5921 14.5938H2.47428C2.08572 14.5938 1.76959 14.2777 1.76959 13.8891V4.88919H4.30625C4.43569 4.88919 4.54062 4.78425 4.54062 4.65481C4.54062 4.52537 4.43569 4.42044 4.30625 4.42044H1.76956V2.2445C1.76956 1.85594 2.08569 1.53981 2.47425 1.53981H3.47631V2.22894C3.47631 2.62194 3.79603 2.94166 4.18903 2.94166C4.31847 2.94166 4.4234 2.83672 4.4234 2.70728C4.4234 2.57784 4.31847 2.47291 4.18903 2.47291C4.0545 2.47291 3.94506 2.36347 3.94506 2.22894V1.53981H11.9906V2.22894C11.9906 2.62194 12.3103 2.94166 12.7033 2.94166C12.8328 2.94166 12.9377 2.83672 12.9377 2.70728C12.9377 2.57784 12.8328 2.47291 12.7033 2.47291C12.5688 2.47291 12.4594 2.36347 12.4594 2.22894V1.53981H14.5257C14.9143 1.53981 15.2304 1.85594 15.2304 2.2445V4.42044ZM4.28072 8.72584H3.16465C2.91234 8.72584 2.70706 8.93112 2.70706 9.18344V10.2995C2.70706 10.5518 2.91234 10.7571 3.16465 10.7571H4.28072C4.53303 10.7571 4.73831 10.5518 4.73831 10.2995V9.18344C4.73831 8.93109 4.53303 8.72584 4.28072 8.72584ZM4.26956 10.2883H3.17581V9.19459H4.26956V10.2883ZM6.34953 7.85794H7.46559C7.71791 7.85794 7.92319 7.65266 7.92319 7.40034V6.28428C7.92319 6.03197 7.71791 5.82669 7.46559 5.82669H6.34953C6.09722 5.82669 5.89194 6.03197 5.89194 6.28428V7.40034C5.89194 7.65266 6.09722 7.85794 6.34953 7.85794ZM6.36069 6.29544H7.45444V7.38919H6.36069V6.29544ZM9.54528 13.1875C9.53947 13.0632 9.43687 12.9643 9.31115 12.9643C9.18172 12.9643 9.07678 13.0692 9.07678 13.1987C9.07678 13.451 9.28206 13.6562 9.53437 13.6562H10.6504C10.9027 13.6562 11.108 13.451 11.108 13.1987V12.0826C11.108 11.8303 10.9027 11.625 10.6504 11.625H9.53437C9.28206 11.625 9.07678 11.8303 9.07678 12.0826V12.4045C9.07678 12.5339 9.18172 12.6388 9.31115 12.6388C9.44059 12.6388 9.54553 12.5339 9.54553 12.4045V12.0938H10.6393V13.1875H9.54528ZM6.34953 10.7571H7.46559C7.71791 10.7571 7.92319 10.5518 7.92319 10.2995V9.18344C7.92319 8.93112 7.71791 8.72584 7.46559 8.72584H6.34953C6.09722 8.72584 5.89194 8.93112 5.89194 9.18344V10.2995C5.89194 10.5518 6.09722 10.7571 6.34953 10.7571ZM6.36069 9.19459H7.45444V10.2883H6.36069V9.19459ZM6.34953 13.6562H7.46559C7.71791 13.6562 7.92319 13.451 7.92319 13.1987V12.0826C7.92319 11.8303 7.71791 11.625 7.46559 11.625H6.34953C6.09722 11.625 5.89194 11.8303 5.89194 12.0826V13.1987C5.89194 13.451 6.09722 13.6562 6.34953 13.6562ZM6.36069 12.0938H7.45444V13.1875H6.36069V12.0938Z" fill="#E40C25"/>
  88.                                 </svg>
  89.                                 <span v-html="post.date"></span>
  90.                             </div>
  91.                             <div class="blog_info_view_box">
  92.                                 <svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  93.                                     <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8895 8.27508C13.5984 10.5936 11.1499 12.0339 8.50084 12.0339C5.85002 12.0339 3.40155 10.5936 2.11043 8.27508C2.01099 8.09505 2.01099 7.90473 2.11043 7.72486C3.40155 5.40636 5.85002 3.96623 8.50084 3.96623C11.1499 3.96623 13.5984 5.40636 14.8895 7.72486C14.9907 7.90473 14.9907 8.09505 14.8895 8.27508ZM15.7143 7.26517C14.2568 4.64745 11.4929 3.02148 8.50084 3.02148C5.50709 3.02148 2.74312 4.64745 1.28568 7.26517C1.02505 7.73223 1.02505 8.2677 1.28568 8.73442C2.74312 11.3521 5.50709 12.9785 8.50084 12.9785C11.4929 12.9785 14.2568 11.3521 15.7143 8.73442C15.9749 8.26773 15.9749 7.73223 15.7143 7.26517ZM8.50084 9.93792C9.56905 9.93792 10.4384 9.06861 10.4384 7.99989C10.4384 6.93117 9.56905 6.06186 8.50084 6.06186C7.4309 6.06186 6.56158 6.93117 6.56158 7.99989C6.56158 9.06861 7.43093 9.93792 8.50084 9.93792ZM8.50084 5.11711C6.90965 5.11711 5.61684 6.41045 5.61684 7.99992C5.61684 9.58973 6.90968 10.8825 8.50084 10.8825C10.0903 10.8825 11.3831 9.5897 11.3831 7.99992C11.3831 6.41045 10.0903 5.11711 8.50084 5.11711Z" fill="#E40C25"/>
  94.                                 </svg>
  95.                                 <span v-html="post.views"></span>
  96.                             </div>
  97.                         </div>
  98.                         <a :href="post.url" class="blog_info_text" v-html="post.title"></a>
  99.                     </div>
  100.                 </div>
  102.                 {% include '@Portal/About/blog/pagination.html.twig' %}
  104.             </div>
  105.         </section>
  107.         <section class="section_brand">
  108.             <div class="container">
  109.                 <p class="brand_title">{{ 'blog.news_official_dealers'|trans({}, 'portal_base') }}</p>
  110.                 <div class="brand_choice_wrapepr">
  111.                     {% for dealer in dealers %}
  112.                         <a class="brand_choice_box" href="{{ path('news_by_dealer', {dealer:dealer.seoUrl}) }}">
  113.                             <div class="brand_choice_img" style="background-image: url('{{ sonata_path(dealer.brand.logo, 'reference') }}')"></div>
  114.                             <p class="brand_choice_name">{{ dealer.brand.name }}</p>
  115.                         </a>
  116.                     {% endfor %}
  117.                 </div>
  118.             </div>
  119.         </section>
  120.     </div>
  121. {% endblock %}
  123. {% block script %}
  124.     <script src="/dist/{{ MODE }}/portal/js/portalAboutBlog.js?{{ VERSION }}"></script>
  126.     <script>
  127.         $(() => {
  128.             window.blogPage({
  129.                 getPosts: '{{ path('portal_get_blog') }}',
  130.                 getCategories: '{{ path('portal_get_categories') }}',
  131.                 category: '{{ category|json_encode|raw }}',
  132.                 search: '{{ search }}',
  133.                 page: '{{ page }}',
  134.                 moreCategoriesTranslate: '{{ 'blog.more_cat'|trans({}, 'portal_base') }}',
  135.             });
  136.         });
  137.     </script>
  139. {% endblock script %}