nice visual improvments

js/search.js

@@ -1,23 +1,24 @@
-function paginate_ul_items(page = 1) {
-    const ul = document.querySelector('ul');
-    if (!ul) return;
+function paginate_articles(page = 1) {
+    const articles = Array.from(document.querySelectorAll('article'));
+    if (!articles.length) return;
 
-    const items = Array.from(ul.querySelectorAll('li'));
-    const query = document.getElementById('searchbox').value.toLowerCase();
+    const query = document.getElementById('searchbox')?.value.toLowerCase() || '';
 
-    // Filter items based on search
-    const filteredItems = items.filter(li => li.textContent.toLowerCase().includes(query));
+    // Filter articles based on search
+    const filteredArticles = articles.filter(article =>
+        article.textContent.toLowerCase().includes(query)
+    );
 
-    const itemsPerPage = 10;
-    const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
+    const articlesPerPage = 5; // reduced to 5
+    const totalPages = Math.ceil(filteredArticles.length / articlesPerPage);
 
-    // Hide all items first
-    items.forEach(li => li.style.display = 'none');
+    // Hide all articles first
+    articles.forEach(article => article.style.display = 'none');
 
-    // Show only items for the current page
-    const start = (page - 1) * itemsPerPage;
-    const end = start + itemsPerPage;
-    filteredItems.slice(start, end).forEach(li => li.style.display = 'list-item');
+    // Show only articles for the current page
+    const start = (page - 1) * articlesPerPage;
+    const end = start + articlesPerPage;
+    filteredArticles.slice(start, end).forEach(article => article.style.display = 'block');
 
     // Render pagination controls
     renderPaginationControls(totalPages, page);
@@ -26,6 +27,9 @@ function paginate_ul_items(page = 1) {
 function renderPaginationControls(totalPages, currentPage) {
     let paginationDiv = document.getElementById('pagination-controls');
     let separator = document.getElementById('vertical-seperator');
+    const searchbox = document.getElementById('searchbox');
+    if (!searchbox) return;
+
     if (!paginationDiv) {
         paginationDiv = document.createElement('div');
         paginationDiv.id = 'pagination-controls';
@@ -33,48 +37,43 @@ function renderPaginationControls(totalPages, currentPage) {
         paginationDiv.style.marginLeft = '16px';
         paginationDiv.style.verticalAlign = 'middle';
 
-        const searchDiv = document.getElementById('searchbox').parentNode;
+        const searchDiv = searchbox.parentNode;
 
-        // Create a wrapper so we can put a separator between search and pagination
         const wrapper = document.createElement('div');
         wrapper.style.display = 'flex';
         wrapper.style.alignItems = 'center';
-        wrapper.style.gap = '12px'; // space around separator
+        wrapper.style.gap = '12px';
 
-        // Move searchbox into wrapper
         searchDiv.appendChild(wrapper);
-        wrapper.appendChild(document.getElementById('searchbox'));
+        wrapper.appendChild(searchbox);
 
-        // Separator
         separator = document.createElement('div');
-        separator.id = "vertical-seperator"
+        separator.id = "vertical-seperator";
         separator.style.width = '1px';
         separator.style.height = '28px';
-        separator.style.marginRight = "-15px";
         separator.style.backgroundColor = '#ccc';
         wrapper.appendChild(separator);
 
-        // Add pagination after separator
         wrapper.appendChild(paginationDiv);
     }
+
     paginationDiv.innerHTML = '';
-    if (separator) {
-        separator.style.display = totalPages <= 1 ? 'none' : 'block';
-    }
+    if (separator) separator.style.display = totalPages <= 1 ? 'none' : 'block';
 
     if (totalPages <= 1) {
         paginationDiv.style.display = 'none';
-
         return;
     } else {
-        paginationDiv.style.display = 'inline-block';
+        paginationDiv.style.display = 'inline-flex';
+        paginationDiv.style.alignItems = 'center';
+        paginationDiv.style.gap = '6px';
     }
 
     // Previous button
     const prevBtn = document.createElement('button');
     prevBtn.textContent = '<';
     prevBtn.disabled = currentPage === 1;
-    prevBtn.onclick = () => paginate_ul_items(currentPage - 1);
+    prevBtn.onclick = () => paginate_articles(currentPage - 1);
     paginationDiv.appendChild(prevBtn);
 
     // Page numbers
@@ -82,7 +81,8 @@ function renderPaginationControls(totalPages, currentPage) {
         const btn = document.createElement('button');
         btn.textContent = i;
         btn.disabled = i === currentPage;
-        btn.onclick = () => paginate_ul_items(i);
+        btn.classList.add('page-number');
+        btn.onclick = () => paginate_articles(i);
         paginationDiv.appendChild(btn);
     }
 
@@ -90,47 +90,65 @@ function renderPaginationControls(totalPages, currentPage) {
     const nextBtn = document.createElement('button');
     nextBtn.textContent = '>';
     nextBtn.disabled = currentPage === totalPages;
-    nextBtn.onclick = () => paginate_ul_items(currentPage + 1);
+    nextBtn.onclick = () => paginate_articles(currentPage + 1);
     paginationDiv.appendChild(nextBtn);
+
+    // Mobile current page span
+    let mobilePageSpan = document.getElementById('mobile-page-span');
+    if (!mobilePageSpan) {
+        mobilePageSpan = document.createElement('span');
+        mobilePageSpan.id = 'mobile-page-span';
+        mobilePageSpan.style.fontStyle = "italic"
+        mobilePageSpan.style.margin = '0 6px';
+        paginationDiv.appendChild(mobilePageSpan);
+    }
+    mobilePageSpan.textContent = `${currentPage}/${totalPages}`;
 }
 
 
-// Update search function to use pagination
-function search_ul_items() {
-    paginate_ul_items(1);
+// Search input triggers pagination
+function search_articles() {
+    paginate_articles(1);
 }
 
-// Create search box and insert before the available pages paragraph
+// Setup search box & initial pagination
 window.addEventListener('DOMContentLoaded', function() {
     const searchDiv = document.createElement('div');
     searchDiv.style.marginBottom = '16px';
     searchDiv.style.paddingLeft = '19px';
     searchDiv.innerHTML = `
         <input 
-        type="text" 
-        id="searchbox" 
-        placeholder="Search pages..." 
-        style="
-            padding: 6px 6px 6px 28px; 
-            font-size: 1em; 
-            width: 220px; 
-            background: url('../../css/icons/search.webp') no-repeat 6px center; 
-            background-size: 20px 20px;
-        " 
-        title="Search for pages"
+            type="text" 
+            id="searchbox" 
+            placeholder="Search articles..." 
+            style="
+                padding: 6px 6px 6px 28px; 
+                font-size: 1em; 
+                width: 220px; 
+                background: url('../../css/icons/search.webp') no-repeat 6px center; 
+                background-size: 20px 20px;
+            " 
+            title="Search for articles"
         />
     `;
-    const available = document.getElementById('available');
-    available.parentNode.insertBefore(searchDiv, available);
+    
+    // Insert after the h1 header but before "Available pages"
+    const availablePara = document.getElementById('available');
+    if (availablePara) {
+        availablePara.parentNode.insertBefore(searchDiv, availablePara);
+    } else {
+        // Fallback: insert at the beginning of main
+        const container = document.querySelector('main');
+        if (container && container.firstElementChild) {
+            container.insertBefore(searchDiv, container.firstElementChild);
+        }
+    }
 
     const searchbox = document.getElementById('searchbox');
     if (searchbox) {
-        searchbox.title = "Search for pages";
-        searchbox.style.fontStyle = "bold";
+        searchbox.addEventListener('input', search_articles);
     }
 
-    document.getElementById('searchbox').addEventListener('input', search_ul_items);
-
     // Initial pagination setup
-    paginate_ul_items(1);
-});
+    paginate_articles(1);
+});