stephan/bloombase
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat: restyle plant_list with Tailwind — search, filter chips, plant cards

Browse source
This commit is contained in:
Stephan Kerkman 2026-06-01 17:26:14 +02:00
parent d7cb9ea25d
commit cbd58fd2dc
3 changed files with 71 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
plants/templates/plants/partials/plant_list_results.html
View file

@ -1,23 +1,26 @@
{# plants/templates/plants/partials/plant_list_results.html #}
{% for plant in plants %} {% for plant in plants %}
<a href="{% url 'plant_detail' plant.pk %}" class="text-decoration-none"> <a href="{% url 'plant_detail' plant.pk %}"
<div class="card mb-2"> class="flex items-center gap-3 bg-white rounded-2xl px-3 py-2.5 shadow-sm mb-2.5 no-underline block">
<div class="card-body d-flex align-items-center gap-3 py-2"> {% if plant.species and plant.species.api_image_url %}
{% if plant.species and plant.species.api_image_url %} <img src="{{ plant.species.api_image_url }}" width="52" height="52"
<img src="{{ plant.species.api_image_url }}" width="48" height="48" class="rounded" style="object-fit:cover; flex-shrink:0;"> class="rounded-xl flex-shrink-0" style="object-fit:cover;">
{% elif plant.thumbnail_url %} {% elif plant.thumbnail_url %}
<img src="{{ plant.thumbnail_url }}" width="48" height="48" class="rounded" style="object-fit:cover; flex-shrink:0;"> <img src="{{ plant.thumbnail_url }}" width="52" height="52"
{% else %} class="rounded-xl flex-shrink-0" style="object-fit:cover;">
<div style="width:48px; height:48px; background:#d8f3dc; border-radius:.375rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;">🌿</div> {% else %}
{% endif %} <div class="w-[52px] h-[52px] bg-[#D8F3DC] rounded-xl flex-shrink-0 flex items-center justify-center text-2xl">🌿</div>
<div> {% endif %}
<div class="fw-semibold" style="color:#1b4332;">{{ plant.name }}</div> <div class="flex-1 min-w-0">
<small class="text-muted"> <div class="font-nunito font-extrabold text-[14px] text-[#1A1208] truncate">{{ plant.name }}</div>
{{ plant.location }} {% if plant.location %}
</small> <span class="inline-block font-nunito text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#FFF3E8] text-[#F07040] mt-0.5">
</div> {{ plant.location.name }}
</div> </span>
</div> {% endif %}
</div>
<span class="text-[#D0C0B0] font-bold text-lg">›</span>
</a> </a>
{% empty %} {% empty %}
<p class="text-muted text-center mt-4">No plants found.</p> <p class="font-nunito text-sm text-[#B0A090] text-center py-8">No plants found.</p>
{% endfor %} {% endfor %}

72
plants/templates/plants/plant_list.html
View file

@ -1,34 +1,58 @@
{# plants/templates/plants/plant_list.html #}
{% extends "plants/base.html" %} {% extends "plants/base.html" %}
{% block title %}Plants — BloomBase{% endblock %} {% block title %}Plants — BloomBase{% endblock %}
{% block content %} {% block content %}
<div class="d-grid mb-3">
<a href="{% url 'plant_add' %}" class="btn btn-success">+ Add a plant</a> <div class="px-4 pt-6">
</div>
<div class="mb-3"> <!-- Header -->
<div class="flex justify-between items-center mb-4">
<h1 class="font-nunito font-black text-[22px] text-[#1A1208]">All Plants</h1>
<a href="{% url 'plant_add' %}"
class="bb-fab w-10 h-10 flex items-center justify-center rounded-full no-underline text-xl font-light">+</a>
</div>
<!-- Search -->
<div class="flex items-center gap-2 bg-[#F5F0EA] rounded-full px-4 py-2.5 mb-3">
<svg width="16" height="16" fill="none" stroke="#B0A090" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
<input <input
type="search" type="search"
name="q" name="q"
value="{{ q }}" value="{{ q }}"
class="form-control" placeholder="Search plants…"
placeholder="🔍 Search plants..." class="flex-1 bg-transparent font-nunito text-sm font-semibold text-[#1A1208]
hx-get="{% url 'plant_list' %}" placeholder-[#C0B0A0] outline-none"
hx-trigger="input changed delay:300ms" hx-get="{% url 'plant_list' %}"
hx-target="#plant-list" hx-trigger="input changed delay:300ms"
hx-swap="innerHTML" hx-target="#plant-list"
hx-swap="innerHTML"
> >
</div> </div>
<div class="d-flex align-items-center gap-2 mb-3"> <!-- Location filter chips -->
<div class="btn-group flex-wrap flex-grow-1" role="group"> <div class="flex gap-2 overflow-x-auto pb-2 mb-4 scrollbar-hide">
<a href="{% url 'plant_list' %}" class="btn btn-sm {% if not location_filter %}btn-success{% else %}btn-outline-success{% endif %}">All</a> <a href="{% url 'plant_list' %}"
{% for loc in locations %} class="flex-shrink-0 px-4 py-1.5 rounded-full font-nunito font-bold text-[12px]
<a href="{% url 'plant_list' %}?location={{ loc.pk }}" class="btn btn-sm {% if location_filter == loc.pk|stringformat:'s' %}btn-success{% else %}btn-outline-success{% endif %}">{{ loc.name }}</a> {% if not location_filter %}bg-[#F07040] text-white{% else %}bg-white text-[#B0A090] border border-[#F0E4D4]{% endif %}
{% endfor %} no-underline">
</div> All
<a href="{% url 'location_list' %}" class="btn btn-sm btn-outline-secondary flex-shrink-0" title="Manage areas">⚙️</a> </a>
</div> {% for loc in locations %}
<a href="{% url 'plant_list' %}?location={{ loc.pk }}"
class="flex-shrink-0 px-4 py-1.5 rounded-full font-nunito font-bold text-[12px]
{% if location_filter == loc.pk|stringformat:'s' %}bg-[#F07040] text-white{% else %}bg-white text-[#B0A090] border border-[#F0E4D4]{% endif %}
no-underline">
{{ loc.name }}
</a>
{% endfor %}
</div>
<div id="plant-list"> <!-- Plant list -->
<div id="plant-list">
{% include "plants/partials/plant_list_results.html" %} {% include "plants/partials/plant_list_results.html" %}
</div>
</div> </div>
{% endblock %} {% endblock %}

1
plants/views/plants.py
View file

@ -27,6 +27,7 @@ def plant_list(request):
'plants': qs, 'q': q, 'plants': qs, 'q': q,
'location_filter': location_filter, 'location_filter': location_filter,
'locations': locations, 'locations': locations,
'active_tab': 'garden',
}) })