damm flex box is cool

content/stylesheets/main.css

@@ -315,42 +315,62 @@ fieldset p label input {
 }
 
 .tile-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  grid-gap: 1rem;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .tile {
-  background: black;
-  padding: 1rem;
-  display: grid;
-  place-items: center;
+  min-width: 200px;
+  max-width: 300px;
+  flex: 1 0 calc(25% - 10px);
+  margin: 5px;
+  background: #111;
 
   position: relative;
 }
 
 .tile::before {
   content: "";
-  display: block;
-  padding-bottom: 80%;
-  padding-left: 80%;
-
-  grid-area: 1 / 1 / 2 / 2;
+  float: left;
+  padding-top: 100%;
 }
 
 .tile__image {
-  max-height: 80%;
-  max-width: 80%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   height: 80%;
-  grid-area: 1 / 1 / 2 / 2;
+  width: auto;
 }
 
 .tile__title {
   position: absolute;
   bottom: 0;
-  font-weight: bold;
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+
+  font-size: 1.5rem;
+
   text-align: center;
+  font-weight: bold;
   color: white;
   text-shadow: 2px 2px #333;
-  margin: 5px;
+
+  padding: 5px;
+}
+
+.clickable {
+  transform: scale(1);
+  transition: ease-in 0.2s;
+
+  transition-property: transform;
+}
+
+.clickable:hover {
+  cursor: pointer;
+  transform: scale(1.05);
 }

layouts/partials/question.erb

@@ -3,7 +3,7 @@
   <p>
     Geef je postcode in
   </p>
-  <input id="postcodeField" type=number>
+  <input id="postcodeField" type=number placeholder=9000>
 <%else%>
 <form id="<%= number %>_form">
   <fieldset>
@@ -49,7 +49,7 @@
 
     const handler = () => {
       const selected = postcodes[postcodeField.value] || [];
-      
+
       // Update results
       save_answers(selected);
       del_answers(last_answered);
@@ -77,7 +77,7 @@
       <% end %>
 
       const formElement = document.getElementById("<%= number %>_form");
-  
+
       formElement.addEventListener('change', () => {
           for (let la of last_answered) {
               if (sub_questions[la]) {
@@ -90,12 +90,12 @@
                   if (sub) {
 
                     [...sub.elements].filter(e => e.nodeName == "INPUT").forEach(e => e.checked = false);
-                    
+
                     sub.dispatchEvent(new Event('change'));
                   }
               }
           }
-  
+
           const selected = [...formElement.elements].filter(e => e.nodeName == "INPUT").filter(e => e.checked).map(e => e.value || e.text);
 
           // Update results

layouts/verenigingen.erb

@@ -11,9 +11,9 @@
     <h1> Konventen en projecten </h1>
     <div class="tile-grid">
       <% for item in konventen %>
-        <div class="tile" onclick="window.location.href = '<%= item.path %>'">
+        <div class="tile clickable" onclick="window.location.href = '<%= item.path %>'">
           <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
-          <h3 class="tile__title"> <%= item[:titel] || item[:naam] %> </h3>
+          <p class="tile__title"> <%= item[:titel] || item[:naam] %> </p>
         </div>
       <% end %>
     </div>