Make search result same style as quiz result

content/search.html.erb

@@ -55,27 +55,25 @@ function ready() {
     function render_results(div, partials) {
         const create_wrapper= document.createElement('div');
         for(let partial of partials) {
-            let html = "";
-            switch (partial.kind) {
-                case "vereniging":
-                    html = `<div class="search__partial" onclick="location.href='${partial.url}';">
-                        <p class="search__partial__titel">${partial.titel}</p>` +
-                        (partial.themas ? `<p class="search__partial__themas"> Themas: ${(partial.themas || []).join(", ")}</p>` : "") +
-                        `</div>`;
-                    break;
-                case "konvent":
-                    html = `<div class="search__partial" onclick="location.href='${partial.url}';">
-                        <p class="search__partial__titel">${partial.titel}</p>
-                    </div>`;
-                    break;
-                default:
-                    break;
-            }
+            const html = `<div class="link" onclick="window.location.href = '${partial.url}'">
+                    <div class="link__img">
+                        <img src="https://dsa.ugent.be/api/verenigingen/${partial.abbrev}/logo?size=small" alt="${partial.titel}">
+                    </div>
+                    <div class="link__content">
+                        <h3 class="link__title">
+                            ${partial.titel} (${partial.kind})
+                        </h3>
+                        <p class="link__text">
+                            ${partial.text}
+                        </p>
+                    </div>
+                </div>`;
 
             if(html) {
                 create_wrapper.innerHTML = html;
-
                 div.appendChild(create_wrapper.firstChild);
+
+                console.log(create_wrapper.firstChild);
             }
         }
     }

content/stylesheets/main.css

@@ -273,15 +273,17 @@ fieldset p label input {
 
 .link {
   display: grid;
-  grid-template-columns: minmax(min-content, 20%) 80%;
+  grid-template-columns: minmax(min-content, 25%) 80%;
 
   background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
 
   margin: 30px auto;
 
   gap: 20px;
+
+  padding: 0.5rem;
 }
 
 .link:hover {
@@ -295,6 +297,10 @@ fieldset p label input {
   min-width: 100px;
 }
 
+.link__content {
+  margin-right: 20px;
+}
+
 @media only screen and (max-width: 400px) {
   .link {
     grid-template-columns: auto;

layouts/partials/pretty_link.erb

@@ -7,7 +7,7 @@
             <%= item[:titel] %>
         </h3>
         <p class="link__text">
-            <%= make_some(truncate(item.compiled_content)) %>
+            <%= text_segment(item.compiled_content) %>
         </p>
     </div>
 </div>

lib/helpers/search.rb

@@ -32,8 +32,9 @@ module SearchHelper
             titel: x[:titel],
             url: x.path,
             konvent: x[:konvent],
-            themas: x[:themas],
-            kind: "vereniging"
+            abbrev: abbreviation(x),
+            kind: "vereniging",
+            text: text_segment(x.compiled_content)
         }
         end
     end
@@ -41,9 +42,11 @@ module SearchHelper
     def partial_konventen
         @items.find_all("**/konventen/*").map do |x|
         {
-            titel: x[:titel],
+            titel: x[:titel] || x[:naam],
             url: x.path,
-            kind: "konvent"
+            abbrev: abbreviation(x),
+            kind: "konvent",
+            text: text_segment(x.compiled_content)
         }
         end
     end

lib/helpers/util.rb

@@ -12,4 +12,8 @@ module UtilHelper
     def make_some(string, backup=" ")
         string.strip().length > 0 ? string : backup
     end
+
+    def text_segment(string, max=20, delim=" ")
+        make_some(truncate(string.gsub(/<\/?[^>]*>/, ""), max, delim))
+    end
 end