vendor/uvdesk/support-center-bundle/Resources/views/Knowledgebase/frequent-topics.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
  3. {% block title %}Base de Conocimientos{% endblock %}
  5. {% block body %}
  6. <div class="frequent-topics-container">
  7.     <div class="frequent-topics-wrapper">
  8.         <!-- Search Bar -->
  9.         <div class="topics-search-container">
  10.             <div class="topics-search-wrapper">
  11.                 <span class="topics-search-icon">🔍</span>
  12.                 <input type="text" 
  13.                        id="topics-search-input" 
  14.                        class="topics-search-input" 
  15.                        placeholder="Quiero saber sobre...."
  16.                        autocomplete="off">
  17.             </div>
  18.         </div>
  20.         <!-- Frequent Topics Title -->
  21.         <h2 class="frequent-topics-title">Temas frecuentes</h2>
  23.         <!-- Topics Cards Grid -->
  24.         <div class="topics-cards-grid">
  25.             {% for topic in frequentTopics %}
  26.             <div class="topic-card" data-topic-id="{{ topic.id }}" data-topic-name="{{ topic.name }}">
  27.                 <div class="topic-card-image">
  28.                     {% if topic.image %}
  29.                         <img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ topic.image }}" 
  30.                              alt="{{ topic.name }}">
  31.                     {% else %}
  32.                         <div class="topic-card-placeholder">
  33.                             {{ topic.name|slice(0, 2)|upper }}
  34.                         </div>
  35.                     {% endif %}
  36.                 </div>
  37.                 <div class="topic-card-label">{{ topic.name }}</div>
  38.             </div>
  39.             {% endfor %}
  40.         </div>
  41.     </div>
  42. </div>
  44. <style>
  45. .frequent-topics-container {
  46.     width: 100%;
  47.     min-height: calc(100vh - 200px);
  48.     background: #f5f5f5;
  49.     padding: 40px 20px;
  50.     display: flex;
  51.     justify-content: center;
  52.     align-items: flex-start;
  53. }
  55. .frequent-topics-wrapper {
  56.     max-width: 1200px;
  57.     width: 100%;
  58.     display: flex;
  59.     flex-direction: column;
  60.     align-items: center;
  61. }
  63. /* Search Bar Styles */
  64. .topics-search-container {
  65.     width: 100%;
  66.     max-width: 900px;
  67.     margin-bottom: 40px;
  68. }
  70. .topics-search-wrapper {
  71.     position: relative;
  72.     width: 100%;
  73. }
  75. .topics-search-icon {
  76.     position: absolute;
  77.     left: 16px;
  78.     top: 50%;
  79.     transform: translateY(-50%);
  80.     color: #7f8c8d;
  81.     font-size: 18px;
  82.     pointer-events: none;
  83.     z-index: 1;
  84. }
  86. .topics-search-input {
  87.     width: 100%;
  88.     padding: 14px 20px 14px 50px;
  89.     background: #ffffff;
  90.     border: 2px solid #e0e0e0;
  91.     border-radius: 8px;
  92.     font-size: 16px;
  93.     color: #2c3e50;
  94.     box-sizing: border-box;
  95.     transition: border-color 0.2s, box-shadow 0.2s;
  96. }
  98. .topics-search-input:focus {
  99.     outline: none;
  100.     border-color: #3498db;
  101.     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  102. }
  104. .topics-search-input::placeholder {
  105.     color: #95a5a6;
  106. }
  108. /* Frequent Topics Title */
  109. .frequent-topics-title {
  110.     font-size: 28px;
  111.     font-weight: 700;
  112.     color: #2c3e50;
  113.     margin: 0 0 30px 0;
  114.     text-align: center;
  115. }
  117. /* Topics Cards Grid */
  118. .topics-cards-grid {
  119.     display: grid;
  120.     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  121.     gap: 24px;
  122.     width: 100%;
  123.     max-width: 1200px;
  124. }
  126. .topic-card {
  127.     background: #ffffff;
  128.     border-radius: 12px;
  129.     padding: 20px;
  130.     text-align: center;
  131.     cursor: pointer;
  132.     transition: transform 0.2s, box-shadow 0.2s;
  133.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  134.     display: flex;
  135.     flex-direction: column;
  136.     align-items: center;
  137.     gap: 12px;
  138. }
  140. .topic-card:hover {
  141.     transform: translateY(-4px);
  142.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  143. }
  145. .topic-card-image {
  146.     width: 100%;
  147.     height: 140px;
  148.     display: flex;
  149.     align-items: center;
  150.     justify-content: center;
  151.     border-radius: 8px;
  152.     overflow: hidden;
  153.     background: #f8f9fa;
  154. }
  156. .topic-card-image img {
  157.     width: 100%;
  158.     height: 100%;
  159.     object-fit: cover;
  160. }
  162. .topic-card-placeholder {
  163.     width: 100%;
  164.     height: 100%;
  165.     background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  166.     display: flex;
  167.     align-items: center;
  168.     justify-content: center;
  169.     font-size: 32px;
  170.     font-weight: bold;
  171.     color: #ffffff;
  172. }
  174. .topic-card-label {
  175.     font-size: 16px;
  176.     font-weight: 600;
  177.     color: #2c3e50;
  178.     margin-top: 8px;
  179. }
  181. /* Responsive */
  182. @media (max-width: 768px) {
  183.     .topics-cards-grid {
  184.         grid-template-columns: repeat(2, 1fr);
  185.         gap: 16px;
  186.     }
  187.     
  188.     .topic-card-image {
  189.         height: 120px;
  190.     }
  191.     
  192.     .frequent-topics-title {
  193.         font-size: 24px;
  194.     }
  195. }
  197. @media (max-width: 480px) {
  198.     .topics-cards-grid {
  199.         grid-template-columns: 1fr;
  200.     }
  201.     
  202.     .frequent-topics-container {
  203.         padding: 20px 15px;
  204.     }
  205. }
  206. </style>
  208. <script>
  209. (function() {
  210.     'use strict';
  211.     
  212.     // Initialize when DOM is ready
  213.     function initializeTopics() {
  214.         // Handle topic card clicks
  215.         const topicCards = document.querySelectorAll('.topic-card');
  216.         
  217.         topicCards.forEach(function(card) {
  218.             card.addEventListener('click', function(e) {
  219.                 e.preventDefault();
  220.                 
  221.                 const topicId = this.dataset.topicId;
  222.                 const topicName = this.dataset.topicName;
  223.                 
  224.                 // Navigate to knowledgebase view with topic filter
  225.                 const baseUrl = window.location.origin + window.location.pathname;
  226.                 const url = new URL(baseUrl);
  227.                 url.searchParams.set('view', 'categories');
  228.                 if (topicId && topicId !== 'undefined') {
  229.                     url.searchParams.set('topic', topicId);
  230.                 }
  231.                 
  232.                 window.location.href = url.toString();
  233.             });
  234.         });
  235.         
  236.         // Handle search functionality
  237.         const searchInput = document.getElementById('topics-search-input');
  238.         
  239.         if (searchInput) {
  240.             searchInput.addEventListener('keydown', function(e) {
  241.                 if (e.key === 'Enter') {
  242.                     e.preventDefault();
  243.                     const searchTerm = this.value.trim();
  244.                     
  245.                     if (searchTerm) {
  246.                         // Navigate to knowledgebase with search
  247.                         const baseUrl = window.location.origin + window.location.pathname;
  248.                         const url = new URL(baseUrl);
  249.                         url.searchParams.set('view', 'categories');
  250.                         url.searchParams.set('search', searchTerm);
  251.                         window.location.href = url.toString();
  252.                     } else {
  253.                         // If no search term, just go to categories view
  254.                         const baseUrl = window.location.origin + window.location.pathname;
  255.                         const url = new URL(baseUrl);
  256.                         url.searchParams.set('view', 'categories');
  257.                         window.location.href = url.toString();
  258.                     }
  259.                 }
  260.             });
  261.         }
  262.     }
  263.     
  264.     if (document.readyState === 'loading') {
  265.         document.addEventListener('DOMContentLoaded', initializeTopics);
  266.     } else {
  267.         initializeTopics();
  268.     }
  269. })();
  270. </script>
  271. {% endblock %}