Change search result appearance

folkugat_web/assets/templates/fragments/temes/result.html

@@ -0,0 +1,28 @@
+<li class="flex flex-col
+           items-center
+          m-4 rounded-lg
+          bg-white">
+  <div class="py-2 px-4 text-brown font-bold">
+    <a href="/tema/{{ tema.id }}">
+      {{ tema.title }}
+    </a>
+  </div>
+  {% if tema.main_score() and tema.main_score().preview_url %}
+    <a href="/tema/{{ tema.id }}"
+       class="max-w">
+    <img class="p-2 max-w"
+        src="{{ tema.main_score().preview_url }}" />
+    </a>
+  {% endif %}
+  {% if tema.properties %}
+  <ul class="flex flex-wrap text-sm
+            py-2 px-4">
+    {% for property in tema.properties %}
+    <div class="bg-beige text-white rounded
+                m-1 px-2">
+      {{ property.value }}
+    </div>
+    {% endfor %}
+  </ul>
+  {% endif %}
+</li>

folkugat_web/assets/templates/fragments/temes/result_links.html

@@ -1,19 +0,0 @@
-<ul class="flex flex-row items-center">
-  <li class="px-2 text-beige">
-  {% if tema.has_score %}
-    <a href="/tema/{{ tema.id }}" target="_blank">
-      <i class="fa fa-music px-1" aria-hidden="true"></i>
-    </a>
-  {% endif %}
-  {% if tema.has_lyrics %}
-    <a href="/tema/{{ tema.id }}" target="_blank">
-      <i class="fa fa-font px-1" aria-hidden="true"></i>
-    </a>
-  {% endif %}
-  {% if tema.has_audio %}
-    <a href="/tema/{{ tema.id }}" target="_blank">
-      <i class="fa fa-volume-up px-1" aria-hidden="true"></i>
-    </a>
-  {% endif %}
-  </li>
-</ul>

folkugat_web/assets/templates/fragments/temes/results.html

@@ -12,32 +12,9 @@
       <i>{{ query }}</i>
     </button>
   {% endif %}
-  <ul class="text-left min-w-full w-full">
+  <ul class="min-w-full w-full">
     {% for tema in temes %}
-    <li class="flex flex-col
+      {% include "fragments/temes/result.html" %}
-               m-4 rounded-lg
-               bg-white">
-      <div class="py-2 px-4 text-brown font-bold">
-        <a href="/tema/{{ tema.id }}">
-          {{ tema.title }}
-        </a>
-      </div>
-      {% if tema.main_score() and tema.main_score().preview_url %}
-        <img class="p-2 max-w"
-             src="{{ tema.main_score().preview_url }}" />
-      {% endif %}
-      {% if tema.properties %}
-      <ul class="flex flex-wrap text-sm
-                 py-2 px-4">
-        {% for property in tema.properties %}
-        <div class="bg-beige text-white rounded
-                    m-1 px-2">
-          {{ property.value }}
-        </div>
-        {% endfor %}
-      </ul>
-      {% endif %}
-    </li>
     {% endfor %}
   </ul>
   {% if prev_offset is not none or next_offset is not none %}