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

feat: add location_detail.html — area detail with cover photo header + plant grid

Browse source
This commit is contained in:
Stephan Kerkman 2026-06-01 16:46:24 +02:00
parent c9905851c2
commit 3149206c3e
1 changed files with 66 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
plants/templates/plants/location_detail.html
View file

@ -1,2 +1,67 @@
{# plants/templates/plants/location_detail.html #}
{% extends "plants/base.html" %} {% extends "plants/base.html" %}
{% block content %}{{ location.name }}{% endblock %} {% block title %}{{ location.name }} — BloomBase{% endblock %}
{% block content %}
<!-- Cover photo hero -->
<div class="relative h-[180px] overflow-hidden">
{% if location.cover_photo %}
<img src="{{ location.cover_photo.url }}" alt="{{ location.name }}"
class="w-full h-full object-cover">
{% else %}
<div class="w-full h-full at-placeholder-1"></div>
{% endif %}
<!-- Gradient fade at bottom -->
<div class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white to-transparent"></div>
<!-- Back button -->
<a href="{% url 'location_list' %}" class="btn-pill absolute top-3 left-3 no-underline">← Back</a>
<!-- Edit button -->
<a href="{% url 'location_edit' location.pk %}" class="btn-pill absolute top-3 right-3 no-underline">Edit</a>
</div>
<div class="px-4 pt-3 pb-4">
<!-- Area name + count -->
<h1 class="font-nunito font-black text-[22px] text-[#1A1208] mb-0.5">{{ location.name }}</h1>
<p class="font-nunito text-sm font-semibold text-[#B0A090] mb-5">
{{ plants.count }} plant{{ plants.count|pluralize }}
</p>
<!-- Plant grid -->
{% if plants %}
<div class="grid grid-cols-2 gap-3">
{% for plant in plants %}
<a href="{% url 'plant_detail' plant.pk %}" class="bg-white rounded-2xl overflow-hidden shadow-sm no-underline block">
<!-- Plant image -->
<div class="h-[100px] overflow-hidden">
{% if plant.species and plant.species.api_image_url %}
<img src="{{ plant.species.api_image_url }}" alt="{{ plant.name }}"
class="w-full h-full object-cover">
{% elif plant.thumbnail_url %}
<img src="{{ plant.thumbnail_url }}" alt="{{ plant.name }}"
class="w-full h-full object-cover">
{% else %}
<div class="w-full h-full bg-[#D8F3DC] flex items-center justify-center text-3xl">🌿</div>
{% endif %}
</div>
<!-- Plant info -->
<div class="p-3">
<div class="font-nunito font-extrabold text-[12px] text-[#1A1208] leading-tight">{{ plant.name }}</div>
{% if plant.species %}
<div class="font-nunito text-[9px] font-semibold text-[#B0A090] mt-0.5 italic">{{ plant.species.scientific_name }}</div>
{% endif %}
</div>
</a>
{% endfor %}
</div>
{% else %}
<!-- Empty state -->
<div class="text-center py-12">
<div class="text-5xl mb-3">🪴</div>
<p class="font-nunito font-bold text-[#B0A090] mb-4">No plants here yet.</p>
<a href="{% url 'identify_upload' %}" class="btn-bloom inline-block w-auto px-8">Identify a plant</a>
</div>
{% endif %}
</div>
{% endblock %}