src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/blogs.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. :root {
  5.     --n-cream: #F7F5F0;
  6.     --n-dark:  #1A1D2E;
  7.     --n-amber: #C07D2A;
  8.     --n-sage:  #3D6B52;
  9.     --n-slate: #3D4F72;
  10.     --n-muted: #6B7280;
  11.     --n-border: rgba(26,29,46,.09);
  12. }
  14. /* ── Hero ── */
  15. .n-page-hero {
  16.     background: var(--n-cream);
  17.     padding: 72px 0 48px;
  18.     text-align: center;
  19. }
  20. .n-page-hero .n-eyebrow {
  21.     display: inline-block;
  22.     font-size: .75rem;
  23.     font-weight: 700;
  24.     letter-spacing: .12em;
  25.     text-transform: uppercase;
  26.     color: var(--n-amber);
  27.     margin-bottom: 14px;
  28. }
  29. .n-page-hero h1 {
  30.     font-family: 'Montserrat', sans-serif;
  31.     font-size: clamp(1.9rem, 4vw, 2.6rem);
  32.     font-weight: 700;
  33.     color: var(--n-dark);
  34.     margin: 0 0 20px;
  35. }
  37. /* topic filter */
  38. .n-topic-bar {
  39.     display: flex;
  40.     flex-wrap: wrap;
  41.     gap: 8px;
  42.     justify-content: center;
  43.     max-width: 900px;
  44.     margin: 0 auto 0;
  45. }
  46. .n-topic-btn {
  47.     padding: 7px 18px;
  48.     border: 1.5px solid var(--n-border);
  49.     border-radius: 50px;
  50.     background: #fff;
  51.     font-family: 'DM Sans', sans-serif;
  52.     font-size: .82rem;
  53.     font-weight: 500;
  54.     color: var(--n-muted);
  55.     cursor: pointer;
  56.     transition: all .2s;
  57. }
  58. .n-topic-btn.active,
  59. .n-topic-btn:hover {
  60.     background: var(--n-dark);
  61.     color: #fff;
  62.     border-color: var(--n-dark);
  63. }
  64. .n-search-bar {
  65.     display: flex;
  66.     max-width: 380px;
  67.     margin: 0 auto 0;
  68.     border: 1.5px solid var(--n-border);
  69.     border-radius: 50px;
  70.     overflow: hidden;
  71.     background: #fff;
  72. }
  73. .n-search-bar input {
  74.     flex: 1;
  75.     padding: 10px 18px;
  76.     border: none;
  77.     font-family: 'DM Sans', sans-serif;
  78.     font-size: .88rem;
  79.     color: var(--n-dark);
  80.     background: transparent;
  81.     outline: none;
  82. }
  83. .n-search-bar button {
  84.     padding: 0 18px;
  85.     background: var(--n-amber);
  86.     border: none;
  87.     color: #fff;
  88.     cursor: pointer;
  89.     display: flex;
  90.     align-items: center;
  91.     gap: 6px;
  92.     font-size: .82rem;
  93.     font-weight: 600;
  94.     font-family: 'DM Sans', sans-serif;
  95.     transition: background .2s;
  96. }
  97. .n-search-bar button:hover { background: #a86d24; }
  99. /* filter row */
  100. .n-filter-row {
  101.     max-width: 1100px;
  102.     margin: 0 auto;
  103.     padding: 24px 24px 0;
  104.     display: flex;
  105.     align-items: center;
  106.     justify-content: space-between;
  107.     gap: 16px;
  108.     flex-wrap: wrap;
  109. }
  111. /* ── Blog Body ── */
  112. .n-blog-body {
  113.     background: #fff;
  114.     padding: 56px 0 96px;
  115. }
  116. .n-blog-container {
  117.     max-width: 1100px;
  118.     margin: 0 auto;
  119.     padding: 0 24px;
  120. }
  122. /* Featured + sidebar top row */
  123. .n-blog-top {
  124.     display: grid;
  125.     grid-template-columns: 1fr 1fr;
  126.     gap: 40px;
  127.     margin-bottom: 56px;
  128. }
  129. @media(max-width: 768px) {
  130.     .n-blog-top { grid-template-columns: 1fr; gap: 28px; }
  131.     .n-blog-sidebar { display: none; }
  132. }
  134. /* Featured card */
  135. .n-featured-card {
  136.     border-radius: 16px;
  137.     overflow: hidden;
  138.     border: 1.5px solid var(--n-border);
  139.     background: var(--n-cream);
  140.     display: flex;
  141.     flex-direction: column;
  142.     transition: box-shadow .25s;
  143. }
  144. .n-featured-card:hover { box-shadow: 0 8px 32px rgba(26,29,46,.1); }
  145. .n-featured-card img {
  146.     width: 100%;
  147.     height: 240px;
  148.     object-fit: cover;
  149.     display: block;
  150. }
  151. .n-featured-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
  152. .n-featured-body h5 {
  153.     font-family: 'Montserrat', sans-serif;
  154.     font-size: 1.1rem;
  155.     font-weight: 700;
  156.     color: var(--n-dark);
  157.     margin: 0 0 10px;
  158.     line-height: 1.3;
  159. }
  160. .n-featured-body p {
  161.     font-size: .9rem;
  162.     color: var(--n-muted);
  163.     line-height: 1.65;
  164.     margin: 0 0 18px;
  165.     flex: 1;
  166. }
  167. .n-featured-footer {
  168.     display: flex;
  169.     justify-content: space-between;
  170.     align-items: center;
  171. }
  172. .n-know-more {
  173.     display: inline-flex;
  174.     align-items: center;
  175.     gap: 6px;
  176.     padding: 8px 18px;
  177.     background: var(--n-dark);
  178.     color: #fff;
  179.     border-radius: 6px;
  180.     font-size: .83rem;
  181.     font-weight: 600;
  182.     text-decoration: none;
  183.     transition: background .2s;
  184. }
  185. .n-know-more:hover { background: var(--n-amber); color: #fff; text-decoration: none; }
  186. .n-card-date { font-size: .78rem; color: var(--n-muted); }
  188. /* Sidebar */
  189. .n-blog-sidebar h4 {
  190.     font-family: 'Montserrat', sans-serif;
  191.     font-size: .95rem;
  192.     font-weight: 700;
  193.     color: var(--n-dark);
  194.     margin: 0 0 18px;
  195. }
  196. .n-recent-list { list-style: none; margin: 0; padding: 0; }
  197. .n-recent-list li { padding: 14px 0; border-bottom: 1px solid var(--n-border); }
  198. .n-recent-list li:last-child { border-bottom: none; }
  199. .n-recent-list a {
  200.     font-family: 'DM Sans', sans-serif;
  201.     font-size: .9rem;
  202.     font-weight: 600;
  203.     color: var(--n-dark);
  204.     text-decoration: none;
  205.     line-height: 1.35;
  206.     display: block;
  207.     margin-bottom: 4px;
  208.     transition: color .2s;
  209. }
  210. .n-recent-list a:hover { color: var(--n-amber); }
  211. .n-recent-meta { font-size: .75rem; color: var(--n-muted); }
  212. .n-recent-meta .n-date { margin-left: 6px; }
  214. /* Blog grid */
  215. .n-blog-grid {
  216.     display: grid;
  217.     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  218.     gap: 24px;
  219. }
  220. .n-blog-card {
  221.     border-radius: 14px;
  222.     overflow: hidden;
  223.     border: 1.5px solid var(--n-border);
  224.     background: var(--n-cream);
  225.     display: flex;
  226.     flex-direction: column;
  227.     transition: box-shadow .25s, transform .2s;
  228. }
  229. .n-blog-card:hover { box-shadow: 0 6px 24px rgba(26,29,46,.09); transform: translateY(-2px); }
  230. .n-blog-card img {
  231.     width: 100%;
  232.     height: 180px;
  233.     object-fit: cover;
  234.     display: block;
  235. }
  236. .n-blog-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
  237. .n-blog-card-body h5 {
  238.     font-family: 'Montserrat', sans-serif;
  239.     font-size: .95rem;
  240.     font-weight: 700;
  241.     color: var(--n-dark);
  242.     margin: 0 0 8px;
  243.     line-height: 1.3;
  244. }
  245. .n-blog-card-body p {
  246.     font-size: .85rem;
  247.     color: var(--n-muted);
  248.     line-height: 1.6;
  249.     margin: 0 0 12px;
  250.     flex: 1;
  251. }
  252. .n-blog-card-meta { font-size: .75rem; color: var(--n-muted); margin-bottom: 12px; }
  253. .n-blog-card-meta .n-date { margin-left: 6px; }
  254. .n-blog-card-link {
  255.     font-size: .82rem;
  256.     font-weight: 600;
  257.     color: var(--n-amber);
  258.     text-decoration: none;
  259.     transition: color .2s;
  260. }
  261. .n-blog-card-link:hover { color: var(--n-dark); }
  263. /* Pagination */
  264. .n-pagination {
  265.     display: flex;
  266.     align-items: center;
  267.     justify-content: space-between;
  268.     margin-top: 48px;
  269.     padding-top: 28px;
  270.     border-top: 1.5px solid var(--n-border);
  271.     flex-wrap: wrap;
  272.     gap: 12px;
  273. }
  274. .n-pag-btn {
  275.     display: inline-flex;
  276.     align-items: center;
  277.     gap: 6px;
  278.     padding: 8px 18px;
  279.     border: 1.5px solid var(--n-border);
  280.     border-radius: 8px;
  281.     background: #fff;
  282.     font-family: 'DM Sans', sans-serif;
  283.     font-size: .88rem;
  284.     font-weight: 600;
  285.     color: var(--n-dark);
  286.     text-decoration: none;
  287.     transition: all .2s;
  288. }
  289. .n-pag-btn:hover:not(.disabled) { background: var(--n-dark); color: #fff; border-color: var(--n-dark); text-decoration: none; }
  290. .n-pag-btn.disabled { opacity: .4; pointer-events: none; }
  291. .n-page-nums { display: flex; gap: 4px; align-items: center; }
  292. .n-page-num {
  293.     min-width: 34px;
  294.     height: 34px;
  295.     border-radius: 6px;
  296.     display: flex;
  297.     align-items: center;
  298.     justify-content: center;
  299.     font-size: .85rem;
  300.     font-weight: 500;
  301.     text-decoration: none;
  302.     color: var(--n-muted);
  303.     border: 1.5px solid transparent;
  304.     transition: all .2s;
  305. }
  306. .n-page-num:hover { border-color: var(--n-border); color: var(--n-dark); text-decoration: none; }
  307. .n-page-num.active { background: var(--n-dark); color: #fff; font-weight: 700; }
  308. .n-page-num.dots { cursor: default; color: var(--n-muted); }
  309. </style>
  311. <!-- Hero + Filters -->
  312. <section class="n-page-hero">
  313.     <div class="n-wrap">
  314.         <span class="n-eyebrow">Insights &amp; Ideas</span>
  315.         <h1>Latest Blogs</h1>
  316.     </div>
  317.     <div class="n-filter-row" style="max-width:900px; margin:0 auto; padding:20px 24px 0;">
  318.         <div class="n-topic-bar all-tabs">
  319.             <button class="n-topic-btn topic-btn active" data-topic-id="all">All Topics</button>
  320.             {% for topic in topics %}
  321.                 <button class="n-topic-btn topic-btn" data-topic-id="{{ topic.id }}">{{ topic.topicName }}</button>
  322.             {% else %}
  323.             {% endfor %}
  324.         </div>
  325.         <div class="n-search-bar">
  326.             <input type="text" id="blogSearchInput" placeholder="Search blogs…">
  327.             <button id="blogSearchBtn" type="button"><i class="fas fa-search"></i> Search</button>
  328.         </div>
  329.     </div>
  330. </section>
  332. <!-- Blog Content -->
  333. <section class="n-blog-body">
  334.     <div class="n-blog-container">
  336.         <!-- Featured + Sidebar -->
  337.         <div class="n-blog-top">
  339.             <div id="blogSection">
  340.                 {% if featuredBlog %}
  341.                 <div class="n-featured-card">
  342.                     <img src="{{ featuredBlog.mainImage
  343.                         ? absolute_url(path('dashboard')) ~ '/' ~ featuredBlog.mainImage ~ '?version=' ~ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION')
  344.                         : absolute_url(path('dashboard')) ~ 'honeybee_web_assets/images/Blogs/pic1.png?version=' ~ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  345.                          alt="{{ featuredBlog.title }}">
  346.                     <div class="n-featured-body">
  347.                         <h5>{{ featuredBlog.title }}</h5>
  348.                         <p class="card-text" data-full-text="{{ featuredBlog.content|striptags }}"></p>
  349.                         <div class="n-featured-footer">
  350.                             <a href="{{ path('honeybee_single_blog') }}?id={{ featuredBlog.id }}" class="n-know-more">
  351.                                 <i class="fa fa-arrow-right"></i> Read More
  352.                             </a>
  353.                             <span class="n-card-date">{{ featuredBlog.createdAt ? featuredBlog.createdAt|date('d/m/Y') : 'N/A' }}</span>
  354.                         </div>
  355.                     </div>
  356.                 </div>
  357.                 {% else %}
  358.                 <div class="n-featured-card">
  359.                     <div class="n-featured-body">
  360.                         <h5>No Featured Blog Available</h5>
  361.                         <p>Check back soon for featured content.</p>
  362.                     </div>
  363.                 </div>
  364.                 {% endif %}
  365.             </div>
  367.             <div class="n-blog-sidebar recent-blog-sidebar">
  368.                 <h4>Recent Posts</h4>
  369.                 <ul class="n-recent-list recent-blogs">
  370.                     {% set recentCount = 0 %}
  371.                     {% for blog in blogs %}
  372.                         {% if recentCount < 4 %}
  373.                             <li>
  374.                                 <a href="{{ path('honeybee_single_blog') }}?id={{ blog.id }}">{{ blog.title }}</a>
  375.                                 <p class="n-recent-meta">
  376.                                     By {{ blog.authorName ?? 'Unknown' }}
  377.                                     <span class="n-date">{{ blog.createdAt ? blog.createdAt|date('F d, Y') : 'N/A' }}</span>
  378.                                 </p>
  379.                             </li>
  380.                             {% set recentCount = recentCount + 1 %}
  381.                         {% endif %}
  382.                     {% else %}
  383.                         <li><p>No recent blogs found.</p></li>
  384.                     {% endfor %}
  385.                 </ul>
  386.             </div>
  388.         </div>
  390.         <!-- Blog Grid -->
  391.         <div class="n-blog-grid" id="additionalBlogs">
  392.             {% for blog in blogs %}
  393.                 <div class="n-blog-card filterable-blog-item" data-topic="{{ blog.topicId }}">
  394.                     <img src="{{ blog.mainImage
  395.                         ? absolute_url(path('dashboard')) ~ '/' ~ blog.mainImage
  396.                         : absolute_url(path('dashboard')) ~ 'honeybee_web_assets/images/Blogs/pic4.png?version=' ~ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  397.                          alt="{{ blog.title }}">
  398.                     <div class="n-blog-card-body">
  399.                         <h5 class="searchable-title">{{ blog.title }}</h5>
  400.                         <p>{{ blog.content|striptags|slice(0, 150) }}…</p>
  401.                         <p class="n-blog-card-meta">
  402.                             By {{ blog.authorName ?? 'Unknown' }}
  403.                             <span class="n-date">{{ blog.createdAt ? blog.createdAt|date('d/m/Y') : 'N/A' }}</span>
  404.                         </p>
  405.                         <a href="{{ path('honeybee_single_blog') }}?id={{ blog.id }}" class="n-blog-card-link">Read More →</a>
  406.                     </div>
  407.                 </div>
  408.             {% else %}
  409.                 <div style="grid-column:1/-1; text-align:center; color:var(--n-muted); padding:40px 0;">No blogs available at the moment.</div>
  410.             {% endfor %}
  411.         </div>
  413.         <!-- Pagination -->
  414.         {% if totalPages > 1 %}
  415.         <div class="n-pagination">
  416.             <a href="{{ path('honeybee_blogs', {action: 'create', page: currentPage - 1}) }}"
  417.                class="n-pag-btn btn-pag {{ currentPage <= 1 ? 'disabled' : '' }}">
  418.                 <i class="fa fa-chevron-left"></i> Prev
  419.             </a>
  420.             <div class="n-page-nums">
  421.                 {% for p in 1..totalPages %}
  422.                     {% if p == currentPage %}
  423.                         <span class="n-page-num page-num active">{{ p }}</span>
  424.                     {% elseif p == 1 or p == totalPages or (p >= currentPage - 2 and p <= currentPage + 2) %}
  425.                         <a href="{{ path('honeybee_blogs', {action: 'create', page: p}) }}" class="n-page-num page-num">{{ p }}</a>
  426.                     {% elseif p == currentPage - 3 or p == currentPage + 3 %}
  427.                         <span class="n-page-num dots">…</span>
  428.                     {% endif %}
  429.                 {% endfor %}
  430.             </div>
  431.             <a href="{{ path('honeybee_blogs', {action: 'create', page: currentPage + 1}) }}"
  432.                class="n-pag-btn btn-pag {{ currentPage >= totalPages ? 'disabled' : '' }}">
  433.                 Next <i class="fa fa-chevron-right"></i>
  434.             </a>
  435.         </div>
  436.         {% endif %}
  438.     </div>
  439. </section>
  441. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  443. <script>
  444.     document.addEventListener("DOMContentLoaded", function () {
  446.         // Featured blog truncate
  447.         const cardText = document.querySelector("#blogSection .card-text");
  448.         if (cardText) {
  449.             const fullText = cardText.getAttribute("data-full-text") || '';
  450.             const words = fullText.trim().split(/\s+/);
  451.             cardText.textContent = words.length > 30 ? words.slice(0, 30).join(" ") + "..." : fullText;
  452.         }
  454.         const ITEMS_PER_PAGE = 6;
  455.         let currentPage = 1;
  456.         let activeTopicId = 'all';
  457.         let searchTerm = '';
  459.         const searchInput        = document.getElementById('blogSearchInput');
  460.         const searchBtn          = document.getElementById('blogSearchBtn');
  461.         const topicBtns          = document.querySelectorAll('.topic-btn');
  462.         const allBlogItems       = document.querySelectorAll('.filterable-blog-item');
  463.         const featuredSection    = document.getElementById('blogSection');
  464.         const recentSidebar      = document.querySelector('.recent-blog-sidebar');
  465.         const paginationContainer = document.querySelector('.pagination-container');
  466.         const prevBtn            = document.getElementById('blogPrevPageBtn');
  467.         const nextBtn            = document.getElementById('blogNextPageBtn');
  468.         const currentPageDisplay = document.getElementById('currentPageDisplay');
  469.         const totalPagesDisplay  = document.getElementById('totalPagesDisplay');
  471.         function getFilteredItems() {
  472.             return Array.from(allBlogItems).filter(item => {
  473.                 const itemTopic  = item.getAttribute('data-topic');
  474.                 const titleText  = (item.querySelector('.searchable-title')?.textContent || '').toLowerCase();
  475.                 const matchesTopic  = activeTopicId === 'all' || itemTopic == activeTopicId;
  476.                 const matchesSearch = titleText.includes(searchTerm);
  477.                 return matchesTopic && matchesSearch;
  478.             });
  479.         }
  481.         function renderPage() {
  482.             const isFiltering = activeTopicId !== 'all' || searchTerm !== '';
  483.             if (featuredSection) featuredSection.style.display = isFiltering ? 'none' : '';
  484.             if (recentSidebar)   recentSidebar.style.display   = isFiltering ? 'none' : '';
  486.             const filteredItems = getFilteredItems();
  487.             const totalPages    = Math.max(1, Math.ceil(filteredItems.length / ITEMS_PER_PAGE));
  488.             if (currentPage > totalPages) currentPage = totalPages;
  489.             if (currentPage < 1)          currentPage = 1;
  491.             const start = (currentPage - 1) * ITEMS_PER_PAGE;
  492.             const end   = start + ITEMS_PER_PAGE;
  493.             allBlogItems.forEach(item => item.style.display = 'none');
  494.             filteredItems.forEach((item, index) => {
  495.                 item.style.display = (index >= start && index < end) ? '' : 'none';
  496.             });
  498.             if (currentPageDisplay) currentPageDisplay.textContent = currentPage;
  499.             if (totalPagesDisplay)  totalPagesDisplay.textContent  = totalPages;
  500.             if (prevBtn) prevBtn.disabled = currentPage === 1;
  501.             if (nextBtn) nextBtn.disabled = currentPage === totalPages;
  502.             if (paginationContainer) paginationContainer.style.display = totalPages <= 1 ? 'none' : 'flex';
  503.         }
  505.         topicBtns.forEach(btn => {
  506.             btn.addEventListener('click', function() {
  507.                 topicBtns.forEach(b => b.classList.remove('active'));
  508.                 this.classList.add('active');
  509.                 activeTopicId = this.getAttribute('data-topic-id');
  510.                 currentPage = 1;
  511.                 renderPage();
  512.             });
  513.         });
  515.         function onSearch() {
  516.             searchTerm = searchInput.value.toLowerCase().trim();
  517.             currentPage = 1;
  518.             renderPage();
  519.         }
  520.         if (searchInput) searchInput.addEventListener('input', onSearch);
  521.         if (searchBtn)   searchBtn.addEventListener('click', onSearch);
  523.         if (prevBtn) prevBtn.addEventListener('click', function() {
  524.             if (currentPage > 1) { currentPage--; renderPage(); }
  525.         });
  526.         if (nextBtn) nextBtn.addEventListener('click', function() {
  527.             const totalPages = Math.ceil(getFilteredItems().length / ITEMS_PER_PAGE);
  528.             if (currentPage < totalPages) { currentPage++; renderPage(); }
  529.         });
  531.         renderPage();
  532.     });
  533. </script>