72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
{# plants/templates/plants/locations.html #}
|
||
{% extends "plants/base.html" %}
|
||
{% block title %}My Garden — BloomBase{% endblock %}
|
||
{% block content %}
|
||
{% load static %}
|
||
|
||
<div class="px-4 pt-8 pb-4">
|
||
|
||
<!-- 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 %}
|
||
<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>
|
||
{% endblock %}
|