Afegir temes coocurrents

folkugat_web/assets/static/css/main.css

@@ -657,6 +657,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }

folkugat_web/assets/templates/fragments/tema/played_with.html

@@ -0,0 +1,40 @@
+<li class="flex flex-col
+           items-center
+           m-4 rounded-lg
+           bg-white">
+  <div class="flex flex-col items-start py-4 text-left w-full max-w-[655px]">
+    <div class="px-4 text-black font-bold">
+      <a href="/tema/{{ tema.id }}">
+        {{ tema.title }}
+      </a>
+    </div>
+    {% if tema.properties %}
+    <ul class="flex flex-wrap text-sm px-3">
+      {% for property in tema.properties %}
+      <a class="bg-beige text-white rounded
+                     m-1 px-2"
+              href="/temes?properties={{ property.value }}">
+        {{ property.value }}
+      </a>
+      {% endfor %}
+    </ul>
+    {% endif %}
+    {% if tema.main_score() and tema.main_score().preview_url %}
+      <a href="/tema/{{ tema.id }}">
+      <img class="px-4 pb-2"
+          src="{{ tema.main_score().preview_url }}" />
+      </a>
+    {% endif %}
+    <div class="flex flex-row w-full">
+      <div class="flex flex-row items-center
+                  row-0 px-4 text-sm text-gray-400">
+        <i class="mx-1">{% include "icons/music-box.svg" %}</i>
+        {% if co_tema.count == 1 %}
+          1 cop
+        {% else %}
+          {{ co_tema.count }} cops
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</li>

folkugat_web/assets/templates/fragments/tema/property.html

@@ -1,11 +1,12 @@
 <div id="tema-property-{{ property.id }}"
-     class="flex flex-row">
+     class="flex flex-row items-center">
   <div class="px-2">
     <i>{{ property.field.value.capitalize() }}:</i>
   </div>
-  <div>
+  <a class="bg-beige text-white rounded m-1 px-2"
+     href="/temes?query=&properties={{ property.value }}">
     {{ property.value }}
-  </div>
+  </a>
 
   {% if logged_in %}
   <div class="grow"></div>

folkugat_web/assets/templates/fragments/tema/stats.html

@@ -1,42 +1,49 @@
+<h4 class="pt-4 text-xl mt-3 text-beige">Estadístiques</h4>
+<hr class="h-px mt-1 mb-3 bg-beige border-0">
 {% if tema.stats %}
-  <h4 class="pt-4 text-xl mt-3 text-beige">Estadístiques</h4>
-  <hr class="h-px mt-1 mb-3 bg-beige border-0">
-  <div>
-    <p>
-      Aquest tema ha sigut tocat en
-      {% if tema.stats.times_played == 1%}
-        una sessió.
-      {% else %}
-        {{ tema.stats.times_played }} sessions.
-      {% endif %}
-    </p>
-    <p class="py-2">
-      S'ha tocat a les sessions següents:
-      <ol class="flex flex-col items-center justify-center">
-        {% for session in tema.stats.sessions_played %}
-        <li class="border rounded border-beige
-                    flex flex-row grow
-                    p-2 m-2 w-full max-w-xl
-                    relative">
-          <a href="/session/{{session.id}}">
-          <div class="flex flex-row grow items-center">
-            <div class="flex-1">
-              <a href="/sessio/{{session.id}}/">
-                {% set dn = date_names(session.date) %}
-                {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
-              </a>
-            </div>
-            <div class="ml-auto">
-              <a title="Més informació"
-                class="text-beige mx-1"
-                href="/sessio/{{session.id}}/">
-                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
-              </a>
-            </div>
-          </div>
-        </li>
-        {% endfor %}
-      </ol>
-    </p>
+  <div class="flex flex-col">
+    {% if tema.played_with %}
+    <div class="my-2 flex flex-row items-center">
+      <i class="mx-2 flex-none">{% include "icons/notes-small.svg" %}</i>
+      <p>
+        S'ha tocat juntament amb:
+      </p>
+    </div>
+    <ol class="ml-4 flex flex-col justify-center">
+      {% for co_tema in tema.played_with %}
+        {% set tema = co_tema.tema %}
+        {% include "fragments/tema/played_with.html" %}
+      {% endfor %}
+    </ol>
+    {% endif %}
+    <div class="my-2 flex flex-row items-center">
+      <i class="mx-2 flex-none">{% include "icons/music-box.svg" %}</i>
+      <p>
+        S'ha tocat en
+        {% if tema.stats.times_played == 1%}
+          una sessió:
+        {% else %}
+          {{ tema.stats.times_played }} sessions:
+        {% endif %}
+      </p>
+    </div>
+    <ol class="ml-4 flex flex-col justify-center">
+      {% for session in tema.stats.sessions_played %}
+      <li class="flex flex-row grow
+                 my-1">
+        <a class="flex flex-row grow items-center"
+           href="/sessio/{{session.id}}">
+          <i class="mx-2 text-beige flex-none">{% include "icons/calendar.svg" %}</i>
+          <p>
+            {% set dn = date_names(session.date) %} {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
+          </p>
+        </a>
+      </li>
+      {% endfor %}
+    </ol>
   </div>
+{% else %}
+<div>
+  <i>No s'ha tocat a cap jam (encara)</i>
+</div>
 {% endif %}

folkugat_web/assets/templates/icons/notes-small.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-music-note-beamed" viewBox="0 0 16 16">
+<path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2m9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2"/>
+<path fill-rule="evenodd" d="M14 11V2h1v9zM6 3v10H5V3z"/>
+<path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4z"/>
+</svg>