give Quiz result some styling

content/stylesheets/main.css

@@ -97,7 +97,6 @@ h2 {
   color: var(--darkblue);
 }
 
-
 .beforeTheFold h2 {
   max-width: 30rem;
 }
@@ -246,11 +245,11 @@ h2 {
 }
 
 fieldset {
-    max-height: 60vh;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-    overflow-y: auto;
-    margin: auto;
+  max-height: 60vh;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  overflow-y: auto;
+  margin: auto;
 }
 
 fieldset p label {
@@ -258,16 +257,46 @@ fieldset p label {
 }
 
 fieldset p {
-    margin: 15px 10px;
+  margin: 15px 10px;
 }
 
 fieldset p label input {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
-.buttons { 
-    width: 70%; 
-    margin: 20px auto; 
-    display: flex; 
-    justify-content: space-between;
-}
+.buttons {
+  width: 70%;
+  margin: 20px auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.link {
+  display: grid;
+  grid-template-columns: minmax(min-content, 20%) 80%;
+
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+
+  margin: 30px auto;
+
+  gap: 20px;
+}
+
+.link:hover {
+  cursor: pointer;
+}
+
+.link__img {
+  justify-self: center;
+  align-self: center;
+
+  min-width: 100px;
+}
+
+@media only screen and (max-width: 400px) {
+  .link {
+    grid-template-columns: auto;
+  }
+}

layouts/partials/pretty_link.erb

@@ -0,0 +1,13 @@
+<div class="link" onclick="window.location.href = '<%= item.path %>'">
+    <div class="link__img">
+        <img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=small" alt="<%= item[:naam] %>">
+    </div>
+    <div class="link__content">
+        <h3 class="link__title">
+            <%= item[:titel] %>
+        </h3>
+        <p class="link__text">
+            <%= make_some(truncate(item.compiled_content)) %>
+        </p>
+    </div>
+</div>

layouts/quiz.erb

@@ -8,7 +8,7 @@
 <div id="resultWrapper" class="hidden">
   <% all_groups().each do |group| %>
     <div id="d_<%= group[:id] %>" style="display: none;">
-      <%= render '/partials/group_small.*', group: group %>
+      <%= render '/partials/pretty_link.*', :item => group %>
     </div>
   <% end %>
 </div>
@@ -29,7 +29,7 @@
       <% end %>
     return groups;
   })();
-  
+
   // This keeps the state of the current question/result
   // So navigating between questions works without reload
   const state = {
@@ -41,25 +41,25 @@
     'answers': {},
     'allQuestions': document.getElementsByClassName("question"),
   };
-  
+
   var depth = 0;
   const previousButton = document.getElementById("previousButton");
   const nextButton = document.getElementById("nextButton");
   const resultWrapper = document.getElementById("resultWrapper");
-  
+
   function reset() {
     const params = getParams();
-  
+
     state.question.index = 'vraag' in params ? parseInt(params['vraag']) : 1;
     state.question.id = "question_"+state.question.index;
     state.question.element = document.getElementById(state.question.id);
-  
+
     state.answers = {};
-  
+
     save_state();
     showCorrectElements();
   }
-  
+
   function getParams() {
     const url = window.location.search;
     if(!url) return {};
@@ -68,50 +68,50 @@
       var pair = currentVar.split('=');
       paramsBuilder[pair[0]] = decodeURIComponent(pair[1]);
     }
-  
+
     return paramsBuilder;
   }
-  
+
   function createRelativeUrl(newQuestionIndex) {
     return window.location.pathname + "?vraag="+newQuestionIndex;
   }
-  
+
   function showCorrectElements() {
     // This part resets to the original state;
     for(let question of state.allQuestions) {
       question.classList.add("hidden");
     }
     resultWrapper.classList.add("hidden");
-  
+
     if(state.question.index == 1) {
       previousButton.disabled = true;
     } else {
       previousButton.disabled = false;
     }
-  
+
     if(!state.question.element) {
       nextButton.disabled = true;
       resultWrapper.classList.remove("hidden");
-  
+
       const result = {};
       for(let question of state.allQuestions) {
         const div = window.sessionStorage[question.id];
         if(!div) continue;
-  
+
         const resultObj = JSON.parse(div);
         for (let key in resultObj) {
           if (!(key in result)) result[key] = 0;
           result[key] += resultObj[key];
         }
       }
-  
+
       show_result(result);
     } else {
       nextButton.disabled = false;
       state.question.element.classList.remove("hidden");
     }
   };
-  
+
   function save_answers(vers) {
     for (let ver of vers) {
       if (state.answers[ver]) {
@@ -121,13 +121,13 @@
       }
     }
   }
-  
+
   function del_answers(vers) {
       for (let ver of vers) {
           state.answers[ver] -= 1;
       }
   }
-  
+
   function show_result(result) {
       for (let ver in result) {
           if (result[ver] == 0) {
@@ -138,47 +138,47 @@
           }
       }
   }
-  
+
   function save_state() {
     window.sessionStorage.setItem(state.question.id, JSON.stringify(state.answers));
   }
-  
+
   function getSelectValues(select) {
     var result = [];
     var options = select && select.options;
     var opt;
-  
+
     for (var i=0, iLen=options.length; i<iLen; i++) {
         opt = options[i];
-  
+
         if (opt.selected) {
             result.push(opt.value || opt.text);
         }
     }
     return result;
   }
-  
+
   function goNext() {
     window.history.pushState("object or string", "", createRelativeUrl(state.question.index + 1));
     depth += 1;
-  
+
     reset();
   }
-  
+
   function goPrevious() {
     if(depth > 1) {
       depth -= 1;
       window.history.replaceState("", "", createRelativeUrl(state.question.index - 1));
     }
-  
+
     reset();
   }
-  
+
   window.addEventListener("popstate", e => {
     e.preventDefault();
     goPrevious();
   });
-  
+
   reset();
 </script>
 <%= yield %>

lib/helpers/util.rb

@@ -0,0 +1,15 @@
+module UtilHelper
+    # def truncate(string, max=30)
+    #     string.length > max ? "#{string[0...max]}..."  : string
+    # end
+
+    def truncate(string, max=20, delim=" ")
+        parts = string.split(delim)
+        parts.length > max ?
+            parts[0..max].join(delim) + "..." : string
+    end
+
+    def make_some(string, backup=" ")
+        string.strip().length > 0 ? string : backup
+    end
+end

lib/helpers_.rb

@@ -6,3 +6,4 @@ use_helper NavigationHelper
 use_helper VerenigingenHelper
 use_helper FontAwesomeHelper
 use_helper SearchHelper
+use_helper UtilHelper