Refactor tool list item templates for improved URL handling

- Updated _tool_categorized_list_item.html, _tool_grid_list_item.html, and _tool_vertical_list_item.html to conditionally render tool URLs, allowing for clickable rows and cards.
- Simplified the display logic for tool names and descriptions, ensuring consistent styling and behavior across different list formats.
- Enhanced accessibility by adding cursor pointer styles for clickable elements.

Author: julioest

templates/libraries/_tool_categorized_list_item.html

@@ -1,11 +1,10 @@
-<tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out">
+{% if tool.url %}
+  <tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out cursor-pointer" onclick="window.open('{{ tool.url }}', '_blank', 'noopener,noreferrer')">
+{% else %}
+  <tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out">
+{% endif %}
   <td class="py-2 align-top md:w-1/5">
-    {% if tool.url %}
-      <a class="mr-1 font-bold capitalize text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
-         href="{{ tool.url }}" target="_blank" rel="noopener noreferrer">{{ tool.name }}</a>
-    {% else %}
-      <span class="mr-1 font-bold capitalize text-sky-600 dark:text-sky-300">{{ tool.name }}</span>
-    {% endif %}
+    <span class="mr-1 font-bold capitalize text-sky-600 dark:text-sky-300">{{ tool.name }}</span>
   </td>
 
   <td class="w-12 align-top pt-2.5 pr-2">
@@ -15,13 +14,9 @@
     {# Empty cell for alignment with library rows #}
   </td>
   <td class="w-8 text-center align-top">
-    {% if tool.url %}
-      <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange text-base block py-3 text-center" href="{{ tool.url }}" target="_blank" rel="noopener noreferrer" title="Website">
-        <i class="fa fa-globe align-top"></i>
-      </a>
-    {% endif %}
+    {# Empty cell for alignment with library rows #}
   </td>
-  <td class="hidden md:block py-2 pl-3 align-top">{{ tool.description }}</td>
+  <td class="hidden md:block py-2 pl-3 align-top" style="min-height: 3rem;">{{ tool.description }}</td>
 </tr>
 <tr class="block md:hidden">
   <td>{{ tool.description }}</td>

templates/libraries/_tool_grid_list_item.html

@@ -1,23 +1,18 @@
 {% load static %}
 
-<div class="relative content-between p-3 bg-white md:rounded-lg md:shadow-lg md:p-5 dark:bg-charcoal hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out">
+{% if tool.url %}
+  <a href="{{ tool.url }}" target="_blank" rel="noopener noreferrer" class="block h-full">
+{% endif %}
+<div class="relative flex flex-col h-full p-3 bg-white md:rounded-lg md:shadow-lg md:p-5 dark:bg-charcoal hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out {% if tool.url %}cursor-pointer{% endif %}">
   <div class="">
     <h3 class="pb-2 text-xl md:text-2xl capitalize border-b border-gray-700">
-      <div class="flex justify-between">
-        {% if tool.url %}
-          <a class="link-header" href="{{ tool.url }}" target="_blank" rel="noopener noreferrer">{{ tool.name }}</a>
-        {% else %}
-          <span class="link-header">{{ tool.name }}</span>
-        {% endif %}
-        {% if tool.url %}
-          <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange text-base block py-3 text-center" href="{{ tool.url }}" target="_blank" rel="noopener noreferrer" title="Website">
-            <i class="fa fa-globe align-top"></i>
-          </a>
-        {% endif %}
-      </div>
+      <span class="link-header">{{ tool.name }}</span>
     </h3>
   </div>
-  <div class="mb-3 pb-3">
+  <div class="mb-3 pb-3 flex-grow">
     <p class="mb-3 text-gray-700 dark:text-gray-300">{{ tool.description }}</p>
   </div>
 </div>
+{% if tool.url %}
+  </a>
+{% endif %}

templates/libraries/_tool_vertical_list_item.html

@@ -1,11 +1,10 @@
-<tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out">
+{% if tool.url %}
+  <tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out cursor-pointer" onclick="window.open('{{ tool.url }}', '_blank', 'noopener,noreferrer')">
+{% else %}
+  <tr class="border-0 md:border border-gray-200/10 border-dotted md:border-t-0 md:border-r-0 md:border-l-0 md:border-b-1 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out">
+{% endif %}
   <td class="align-top md:w-1/5 pt-3">
-    {% if tool.url %}
-      <a class="mr-1 pl-1 font-bold capitalize text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
-         href="{{ tool.url }}" target="_blank" rel="noopener noreferrer">{{ tool.name }}</a>
-    {% else %}
-      <span class="mr-1 pl-1 font-bold capitalize text-sky-600 dark:text-sky-300">{{ tool.name }}</span>
-    {% endif %}
+    <span class="mr-1 pl-1 font-bold capitalize text-sky-600 dark:text-sky-300">{{ tool.name }}</span>
   </td>
   <td class="w-12 align-top pt-3 pr-2">
     {# Empty cell for alignment with library rows #}
@@ -14,13 +13,9 @@
     {# Empty cell for alignment with library rows #}
   </td>
   <td class="w-8 align-top">
-    {% if tool.url %}
-      <a class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange text-base block py-3 text-center" href="{{ tool.url }}" target="_blank" rel="noopener noreferrer" title="Website">
-        <i class="fa fa-globe align-top"></i>
-      </a>
-    {% endif %}
+    {# Empty cell for alignment with library rows #}
   </td>
-  <td class="align-top hidden md:block mt-2 pl-3 md:items-center h-full">{{ tool.description }}</td>
+  <td class="align-top hidden md:block mt-2 pl-3 md:items-center" style="min-height: 3rem;">{{ tool.description }}</td>
 </tr>
 <tr class="block md:hidden pl-1 align-top">
   <td>{{ tool.description }}</td>