Search by properties

folkugat_web/assets/static/css/main.css

@@ -649,6 +649,11 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -944,11 +949,6 @@ video {
   padding: 1rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;

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

@@ -11,6 +11,7 @@
          hx-get="/api/temes/busca"
          hx-trigger="revealed, keyup delay:500ms changed"
          hx-target="#search-results"
+         hx-vars="properties:{{ properties_str }}"
          hx-swap="outerHTML">
   <div id="search-results" class="flex-col"></div>
 </div>

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

@@ -18,10 +18,16 @@
   <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">
+    <button class="bg-beige text-white rounded
+                   m-1 px-2"
+            hx-get="/api/content/temes"
+            hx-target="#content"
+            hx-include="[name=query]"
+            hx-vars="properties:{{ add_property_str(property.value) }}"
+            hx-swap="innerHTML"
+            >
       {{ property.value }}
-    </div>
+    </button>
     {% endfor %}
   </ul>
   {% endif %}

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

@@ -12,6 +12,38 @@
       <i>{{ query }}</i>
     </button>
   {% endif %}
+  <ul class="flex flex-wrap justify-center my-4">
+    {% for property in properties %}
+      <li>
+        <button class="bg-beige rounded
+                       text-white
+                       m-1 px-2"
+                 hx-get="/api/content/temes"
+                 hx-target="#content"
+                 hx-include="[name=query]"
+                 hx-vars="properties:{{ remove_property_str(property) }}"
+                 hx-swap="innerHTML"
+                 >
+          {{ property }}
+        </button>
+      </li>
+    {% endfor %}
+    {% for property in property_results %}
+      <li>
+        <button class="border border-beige  rounded
+                       text-white
+                       m-1 px-2"
+                 hx-get="/api/content/temes"
+                 hx-target="#content"
+                 hx-vars="properties:{{ add_property_str(property) }}"
+                 hx-swap="innerHTML"
+                 >
+          {{ property }}
+        </button>
+      </li>
+    {% endfor %}
+  </ul>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
   <ul class="min-w-full w-full">
     {% for tema in temes %}
       {% include "fragments/temes/result.html" %}