From 55b72ad4f95ba5f152c2658069e63c15d1f2df76 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Mon, 2 Oct 2023 07:25:41 +0200
Subject: [PATCH] Add unordered list to search results

---
 functions.js  | 24 +++++++++++++++++++-----
 php/Index.php |  3 +--
 styles.css    | 20 ++++++++++++++++++++
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/functions.js b/functions.js
index 01c4625..d024583 100644
--- a/functions.js
+++ b/functions.js
@@ -53,23 +53,37 @@ function displaySearchResults(json) {
 
     searchResults.innerText = "";
 
+    const ul = document.createElement('ul');
+
     json.forEach((news) => {
-        let child = createNewsChild(news);
+        const li = createNewsChild(news);
 
-        searchResults.appendChild(child);
+        ul.appendChild(li);
     });
 
+    console.log(ul);
+
+    searchResults.appendChild(ul);
+
     const display = json.length === 0 ? "none" : "block";;
     searchResults.style.display = display;
 }
 
 function createNewsChild(news) {
-    let a = document.createElement('a');
+    const li = document.createElement('li');
+    const a = document.createElement('a');
     
-    let textNode = document.createTextNode(news['title']);
+    const textNode = document.createTextNode(news['title']);
     a.appendChild(textNode);
 
-    return a;
+    const hrefAttr = document.createAttribute('href');
+    hrefAttr.value = '#';
+
+    a.setAttributeNode(hrefAttr);
+
+    li.appendChild(a);
+
+    return li;
 }
 
 function slideImage() {
diff --git a/php/Index.php b/php/Index.php
index 7d39428..fbe42a0 100644
--- a/php/Index.php
+++ b/php/Index.php
@@ -68,8 +68,7 @@ class Index extends Page {
                 <input id="search-input" name="search-input" type="search" placeholder="Search" />
                 <input id="search-button" type="button" value="" />
             </form>
-            <div id="search-results">
-            </div>
+            <div id="search-results"></div>
         </li>
         <li><img src="../img/share_icon.png" alt="" /></li>
         <li class="admin-button"><a href="Admin.php">Admin</a></li>
diff --git a/styles.css b/styles.css
index 6ddb775..bfcd7b1 100644
--- a/styles.css
+++ b/styles.css
@@ -121,6 +121,26 @@ a {
     border: 0.1rem solid white;
     border-radius: 0.1rem;
     max-width: 20rem;
+    padding: 0;
+    margin: 0;
+}
+
+#search-results > ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#search-results > ul > li {
+    padding: 0.05rem;
+    margin: 0;
+}
+
+#search-results > ul > li > a {
+    display: block;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    background-color: blue;
 }
 
 .admin-button a {
-- 
GitLab