section improvements
This commit is contained in:
@@ -21,6 +21,16 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="section_id" class="block text-sm font-medium text-gray-700">Section</label>
|
||||
<select name="section_id" id="section_id" required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">Select a section</option>
|
||||
{% for section in sections %}
|
||||
<option value="{{ section.id }}" {% if plant.section_id == section.id %}selected{% endif %}>{{ section.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="climate_id" class="block text-sm font-medium text-gray-700">Climate</label>
|
||||
<select name="climate_id" id="climate_id" required
|
||||
|
||||
@@ -52,6 +52,12 @@
|
||||
<option value="{{ rate.id }}" {% if selected_growth_rate == rate.id|string %}selected{% endif %}>{{ rate.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select id="section" name="section" class="rounded-lg border border-gray-300 px-3 py-1 text-sm focus:border-[#6b8f71] focus:ring-[#6b8f71]">
|
||||
<option value="">All Sections</option>
|
||||
{% for section in sections %}
|
||||
<option value="{{ section.id }}" {% if selected_section == section.id|string %}selected{% endif %}>{{ section.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<a href="{{ url_for('home') }}" class="btn-secondary px-4 py-1 text-sm font-semibold ml-2 sm:ml-0">Clear</a>
|
||||
</form>
|
||||
</div>
|
||||
@@ -67,7 +73,7 @@
|
||||
}
|
||||
const form = document.getElementById('plant-filter-form');
|
||||
const searchInput = document.getElementById('search');
|
||||
const selects = [document.getElementById('climate'), document.getElementById('environment'), document.getElementById('light'), document.getElementById('toxicity'), document.getElementById('size'), document.getElementById('care_difficulty'), document.getElementById('growth_rate')];
|
||||
const selects = [document.getElementById('climate'), document.getElementById('environment'), document.getElementById('light'), document.getElementById('toxicity'), document.getElementById('size'), document.getElementById('care_difficulty'), document.getElementById('growth_rate'), document.getElementById('section')];
|
||||
|
||||
// Auto-submit on select change
|
||||
selects.forEach(sel => sel.addEventListener('change', () => form.submit()));
|
||||
@@ -103,7 +109,17 @@
|
||||
{% endif %}
|
||||
<div class="w-full flex flex-col gap-2">
|
||||
<h2 class="text-2xl font-bold mb-1 text-[#4e6b50] group-hover:text-[#3e5637] transition">{{ plant.name }}</h2>
|
||||
{% if plant.section %}
|
||||
<div class="text-sm text-[#6b8f71] mb-2">
|
||||
<i class="fas fa-layer-group mr-1"></i>Section: {{ plant.section.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex flex-wrap gap-2 mb-1">
|
||||
<!-- Debug output -->
|
||||
<div class="hidden">
|
||||
Debug - Climate: {{ plant.climate }}
|
||||
Debug - Environment: {{ plant.environment }}
|
||||
</div>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #d0e7d2;" data-type="climate">
|
||||
{% if plant.climate_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.climate_icon) }}" alt="Climate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
|
||||
@@ -126,8 +126,6 @@
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 px-3">Name</th>
|
||||
<th class="py-2 px-3">Climate</th>
|
||||
<th class="py-2 px-3">Environment</th>
|
||||
<th class="py-2 px-3">Added</th>
|
||||
<th class="py-2 px-3">Actions</th>
|
||||
</tr>
|
||||
@@ -136,8 +134,6 @@
|
||||
{% for plant in plants %}
|
||||
<tr class="border-b hover:bg-[#f5f7f2]">
|
||||
<td class="py-2 px-3 font-semibold">{{ plant.name }}</td>
|
||||
<td class="py-2 px-3">{{ climates[plant.climate_id] if plant.climate_id in climates else '' }}</td>
|
||||
<td class="py-2 px-3">{{ environments[plant.environment_id] if plant.environment_id in environments else '' }}</td>
|
||||
<td class="py-2 px-3"><span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></td>
|
||||
<td class="py-2 px-3">
|
||||
<a href="{{ url_for('edit_plant', plant_id=plant.id) }}" class="btn-edit">Edit</a>
|
||||
|
||||
@@ -14,6 +14,11 @@
|
||||
</div>
|
||||
<div class="md:w-1/2 flex flex-col gap-4">
|
||||
<h1 class="text-4xl font-bold text-[#4e6b50] mb-2">{{ plant.name }}</h1>
|
||||
{% if plant.section %}
|
||||
<div class="text-sm text-[#6b8f71] mb-2">
|
||||
<i class="fas fa-layer-group mr-1"></i>Section: {{ plant.section.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex flex-wrap gap-2 mb-2">
|
||||
{% if plant.climate %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold cursor-pointer transition-colors duration-200" style="background-color: #d0e7d2;" data-type="climate">
|
||||
@@ -92,6 +97,12 @@
|
||||
class="inline-block bg-[#6b8f71] text-white hover:bg-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
|
||||
🌱 View Similar Plants
|
||||
</a>
|
||||
{% if plant.section %}
|
||||
<a href="{{ url_for('home', section=plant.section_id) }}"
|
||||
class="inline-block bg-[#6b8f71] text-white hover:bg-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
|
||||
📚 View Plants in this Section
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('home') }}" class="inline-block bg-[#e6ebe0] text-[#3e5637] hover:bg-[#b7c7a3] hover:text-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
|
||||
← Back to Home
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user