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

feat: restyle location_edit.html with cover photo upload field

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

56
plants/templates/plants/location_edit.html
View file

@ -1,21 +1,59 @@
{# plants/templates/plants/location_edit.html #}
{% extends "plants/base.html" %}
{% block title %}Edit Area — BloomBase{% endblock %}
{% block content %}
<div class="d-flex align-items-center gap-2 mb-3">
<a href="{% url 'location_list' %}" class="btn btn-sm btn-outline-secondary">←</a>
<h5 class="mb-0 flex-grow-1">Edit area</h5>
<div class="px-4 pt-6 pb-4">
<div class="flex items-center gap-3 mb-6">
<a href="{% url 'location_list' %}" class="btn-pill no-underline text-sm">←</a>
<h1 class="font-nunito font-black text-[20px] text-[#1A1208]">Edit area</h1>
</div>
<form method="post">
<form method="post" enctype="multipart/form-data" class="flex flex-col gap-4">
{% csrf_token %}
<div class="mb-3">
<input type="text" name="name" value="{{ location.name }}" class="form-control" required autofocus>
<!-- Area name -->
<div>
<label class="block font-nunito font-bold text-[11px] text-[#B0A090] uppercase tracking-wider mb-1.5">
Area name
</label>
<input type="text" name="name" value="{{ location.name }}" required autofocus
class="w-full bg-white border border-[#F0E4D4] rounded-2xl px-4 py-3
font-nunito text-[15px] text-[#1A1208] outline-none focus:border-[#F07040]">
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-success">Save</button>
<a href="{% url 'location_list' %}" class="btn btn-outline-secondary">Cancel</a>
<!-- Cover photo -->
<div>
<label class="block font-nunito font-bold text-[11px] text-[#B0A090] uppercase tracking-wider mb-1.5">
Cover photo
</label>
{% if location.cover_photo %}
<div class="mb-2 rounded-2xl overflow-hidden h-[100px]">
<img src="{{ location.cover_photo.url }}" alt="Current cover"
class="w-full h-full object-cover">
</div>
{% endif %}
<label class="flex items-center gap-3 bg-white border border-[#F0E4D4] rounded-2xl px-4 py-3 cursor-pointer">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F07040" stroke-width="2">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
<circle cx="12" cy="13" r="4"/>
</svg>
<span class="font-nunito font-semibold text-sm text-[#B0A090]">
{% if location.cover_photo %}Replace photo{% else %}Add cover photo{% endif %}
</span>
<input type="file" name="cover_photo" accept="image/*" class="hidden" id="cover-input"
onchange="document.getElementById('cover-label').textContent = this.files[0]?.name || ''">
</label>
<span id="cover-label" class="block mt-1 font-nunito text-[10px] text-[#B0A090] px-1"></span>
</div>
<!-- Actions -->
<div class="flex flex-col gap-2 mt-2">
<button type="submit" class="btn-bloom">Save</button>
<a href="{% url 'location_list' %}" class="btn-bloom-outline text-center no-underline">Cancel</a>
</div>
</form>
</div>
{% endblock %}