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

feat: restyle locations.html as My Garden screen with cover photo thumbnails

Browse source
This commit is contained in:
Stephan Kerkman 2026-06-01 16:45:29 +02:00
parent e699ddb62d
commit c9905851c2
1 changed files with 64 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
plants/templates/plants/locations.html
View file

@ -1,36 +1,72 @@
{# plants/templates/plants/locations.html #}
{% extends "plants/base.html" %}
{% block title %}Areas — BloomBase{% endblock %}
{% block title %}My Garden — BloomBase{% endblock %}
{% block content %}
{% load static %}
<div class="d-flex align-items-center gap-2 mb-3">
<a href="{% url 'plant_list' %}" class="btn btn-sm btn-outline-secondary">←</a>
<h5 class="mb-0 flex-grow-1">Areas</h5>
</div>
<div class="px-4 pt-8 pb-4">
<div class="list-group mb-3">
{% for loc in locations %}
<div class="list-group-item d-flex justify-content-between align-items-center py-2">
<span>{{ loc.name }} <small class="text-muted">{{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}</small></span>
<div class="d-flex gap-1">
<a href="{% url 'location_edit' loc.pk %}" class="btn btn-sm btn-outline-secondary py-0 px-2">✏️</a>
<form method="post" action="{% url 'location_delete' loc.pk %}"
onsubmit="return {% if loc.plant_count %}confirm('{{ loc.name|escapejs }} has {{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}. Their area will be cleared. Delete anyway?'){% else %}true{% endif %}">
<!-- Header row -->
<div class="flex justify-between items-center mb-4">
<h1 class="font-nunito font-black text-[22px] text-[#1A1208]">My Garden</h1>
<a href="#" class="font-nunito font-bold text-sm text-[#F07040]">Edit</a>
</div>
<!-- Search bar -->
<div class="flex items-center gap-2 bg-[#F5F0EA] rounded-full px-4 py-2.5 mb-4">
<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>
<span class="font-nunito text-sm font-semibold text-[#C0B0A0]">Search plants or areas</span>
</div>
<!-- Area rows -->
<div class="flex flex-col gap-3 mb-6">
{% for loc in locations %}
{% with idx=forloop.counter0 %}
<a href="{% url 'location_detail' loc.pk %}"
class="flex items-center bg-white rounded-2xl overflow-hidden shadow-sm no-underline">
<!-- Thumbnail -->
<div class="w-[72px] h-[60px] flex-shrink-0 overflow-hidden">
{% if loc.cover_photo %}
<img src="{{ loc.cover_photo.url }}" alt="{{ loc.name }}"
class="w-full h-full object-cover">
{% else %}
<div class="w-full h-full
{% if idx|divisibleby:5 %}at-placeholder-5
{% elif idx|divisibleby:4 %}at-placeholder-4
{% elif idx|divisibleby:3 %}at-placeholder-3
{% elif idx|divisibleby:2 %}at-placeholder-2
{% else %}at-placeholder-1{% endif %}"></div>
{% endif %}
</div>
<!-- Info -->
<div class="flex-1 px-3">
<div class="font-nunito font-extrabold text-[13px] text-[#1A1208]">{{ loc.name }}</div>
<div class="font-nunito text-[10px] font-semibold text-[#B0A090] mt-0.5">
{{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}
</div>
</div>
<!-- Chevron -->
<span class="text-[#D0C0B0] font-bold text-lg pr-3">›</span>
</a>
{% endwith %}
{% empty %}
<p class="font-nunito text-sm text-[#B0A090] text-center py-8">
No areas yet — add one below!
</p>
{% endfor %}
</div>
<!-- Add area form -->
<form method="post" class="flex gap-2">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-outline-danger py-0 px-2">✕</button>
<input type="text" name="name" placeholder="New area name…" required
class="flex-1 bg-white border border-[#F0E4D4] rounded-full px-4 py-2.5
font-nunito text-sm text-[#1A1208] placeholder-[#C0B0A0]
outline-none focus:border-[#F07040]">
<button type="submit" class="bb-fab text-xl font-light flex-shrink-0">+</button>
</form>
</div>
</div>
{% empty %}
<div class="list-group-item text-muted">No areas yet.</div>
{% endfor %}
</div>
<form method="post">
{% csrf_token %}
<div class="d-flex gap-2">
<input type="text" name="name" class="form-control form-control-sm" placeholder="New area name" required>
<button type="submit" class="btn btn-sm btn-success text-nowrap">+ Add</button>
</div>
</form>
</div>
{% endblock %}