gsf
This commit is contained in:
@@ -2,6 +2,42 @@
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Climate tag hover */
|
||||
.tag-tooltip[data-type="climate"]:hover {
|
||||
background-color: #b7d9b9 !important;
|
||||
}
|
||||
|
||||
/* Environment tag hover */
|
||||
.tag-tooltip[data-type="environment"]:hover {
|
||||
background-color: #c7e0db !important;
|
||||
}
|
||||
|
||||
/* Light tag hover */
|
||||
.tag-tooltip[data-type="light"]:hover {
|
||||
background-color: #d0d7cc !important;
|
||||
}
|
||||
|
||||
/* Toxicity tag hover */
|
||||
.tag-tooltip[data-type="toxicity"]:hover {
|
||||
background-color: #ffe4cc !important;
|
||||
}
|
||||
|
||||
/* Size tag hover */
|
||||
.tag-tooltip[data-type="size"]:hover {
|
||||
background-color: #d0e7e4 !important;
|
||||
}
|
||||
|
||||
/* Care difficulty tag hover */
|
||||
.tag-tooltip[data-type="care-difficulty"]:hover {
|
||||
background-color: #e6d0ff !important;
|
||||
}
|
||||
|
||||
/* Growth rate tag hover */
|
||||
.tag-tooltip[data-type="growth-rate"]:hover {
|
||||
background-color: #e6f0cc !important;
|
||||
}
|
||||
|
||||
.tag-tooltip .tooltip-text {
|
||||
@@ -50,4 +86,56 @@
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
border-color: transparent transparent #4e6b50 transparent;
|
||||
}
|
||||
|
||||
/* Tooltip background for each tag type */
|
||||
.tag-tooltip[data-type="climate"] .tooltip-text {
|
||||
background-color: #d0e7d2;
|
||||
color: #3e5637;
|
||||
}
|
||||
.tag-tooltip[data-type="environment"] .tooltip-text {
|
||||
background-color: #e0f0eb;
|
||||
color: #3e5637;
|
||||
}
|
||||
.tag-tooltip[data-type="light"] .tooltip-text {
|
||||
background-color: #e6ebe0;
|
||||
color: #3e5637;
|
||||
}
|
||||
.tag-tooltip[data-type="toxicity"] .tooltip-text {
|
||||
background-color: #fff4e6;
|
||||
color: #3e5637;
|
||||
}
|
||||
.tag-tooltip[data-type="size"] .tooltip-text {
|
||||
background-color: #e6f7f5;
|
||||
color: #3e5637;
|
||||
}
|
||||
.tag-tooltip[data-type="care-difficulty"] .tooltip-text {
|
||||
background-color: #f3e6ff;
|
||||
color: #3e5637;
|
||||
}
|
||||
.tag-tooltip[data-type="growth-rate"] .tooltip-text {
|
||||
background-color: #f7fae6;
|
||||
color: #3e5637;
|
||||
}
|
||||
|
||||
.tag-tooltip[data-type="climate"] .tooltip-text::after {
|
||||
border-color: #d0e7d2 transparent transparent transparent;
|
||||
}
|
||||
.tag-tooltip[data-type="environment"] .tooltip-text::after {
|
||||
border-color: #e0f0eb transparent transparent transparent;
|
||||
}
|
||||
.tag-tooltip[data-type="light"] .tooltip-text::after {
|
||||
border-color: #e6ebe0 transparent transparent transparent;
|
||||
}
|
||||
.tag-tooltip[data-type="toxicity"] .tooltip-text::after {
|
||||
border-color: #fff4e6 transparent transparent transparent;
|
||||
}
|
||||
.tag-tooltip[data-type="size"] .tooltip-text::after {
|
||||
border-color: #e6f7f5 transparent transparent transparent;
|
||||
}
|
||||
.tag-tooltip[data-type="care-difficulty"] .tooltip-text::after {
|
||||
border-color: #f3e6ff transparent transparent transparent;
|
||||
}
|
||||
.tag-tooltip[data-type="growth-rate"] .tooltip-text::after {
|
||||
border-color: #f7fae6 transparent transparent transparent;
|
||||
}
|
||||
@@ -104,71 +104,55 @@
|
||||
<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>
|
||||
<div class="flex flex-wrap gap-2 mb-1">
|
||||
{% if plant.climate %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
|
||||
{% 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" />
|
||||
{% endif %}
|
||||
{{ plant.climate }}
|
||||
<span class="tooltip-text">{{ plant.climate_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.environment %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
|
||||
{% if plant.environment_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.environment_icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.environment }}
|
||||
<span class="tooltip-text">{{ plant.environment_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.light %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
|
||||
{% if plant.light_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.light_icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.light }}
|
||||
<span class="tooltip-text">{{ plant.light_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.toxicity %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold">
|
||||
{% if plant.toxicity_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.toxicity_icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.toxicity }}
|
||||
<span class="tooltip-text">{{ plant.toxicity_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 text-xs mb-1">
|
||||
{% if plant.size %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
|
||||
{% if plant.size_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.size_icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.size }}
|
||||
<span class="tooltip-text">{{ plant.size_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.care_difficulty %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
|
||||
{% if plant.care_difficulty_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty_icon) }}" alt="Care difficulty icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.care_difficulty }}
|
||||
<span class="tooltip-text">{{ plant.care_difficulty_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.growth_rate %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] font-semibold">
|
||||
{% if plant.growth_rate_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate_icon) }}" alt="Growth rate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.growth_rate }}
|
||||
<span class="tooltip-text">{{ plant.growth_rate_description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
<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" />
|
||||
{% endif %}
|
||||
{{ plant.climate if plant.climate else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.climate_description if plant.climate_description else 'No description' }}</span>
|
||||
</span>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #e0f0eb;" data-type="environment">
|
||||
{% if plant.environment_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.environment_icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.environment if plant.environment else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.environment_description if plant.environment_description else 'No description' }}</span>
|
||||
</span>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #e6ebe0;" data-type="light">
|
||||
{% if plant.light_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.light_icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.light if plant.light else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.light_description if plant.light_description else 'No description' }}</span>
|
||||
</span>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #fff4e6;" data-type="toxicity">
|
||||
{% if plant.toxicity_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.toxicity_icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.toxicity if plant.toxicity else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.toxicity_description if plant.toxicity_description else 'No description' }}</span>
|
||||
</span>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #e6f7f5;" data-type="size">
|
||||
{% if plant.size_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.size_icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.size if plant.size else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.size_description if plant.size_description else 'No description' }}</span>
|
||||
</span>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #f3e6ff;" data-type="care-difficulty">
|
||||
{% if plant.care_difficulty_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty_icon) }}" alt="Care difficulty icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.care_difficulty if plant.care_difficulty else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.care_difficulty_description if plant.care_difficulty_description else 'No description' }}</span>
|
||||
</span>
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded text-[#3e5637] text-xs font-semibold" style="background-color: #f7fae6;" data-type="growth-rate">
|
||||
{% if plant.growth_rate_icon %}
|
||||
<img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate_icon) }}" alt="Growth rate icon" class="w-4 h-4 mr-1 inline-block align-middle" />
|
||||
{% endif %}
|
||||
{{ plant.growth_rate if plant.growth_rate else 'None' }}
|
||||
<span class="tooltip-text">{{ plant.growth_rate_description if plant.growth_rate_description else 'No description' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[#4e6b50] mt-2 text-sm">{{ plant.description[:120] }}{% if plant.description and plant.description|length > 120 %}...{% endif %}</p>
|
||||
<div class="text-xs text-[#6b8f71] mt-2">Added on <span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></div>
|
||||
|
||||
@@ -16,49 +16,49 @@
|
||||
<h1 class="text-4xl font-bold text-[#4e6b50] mb-2">{{ plant.name }}</h1>
|
||||
<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 bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#b7c7a3] transition-colors duration-200">
|
||||
<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">
|
||||
{% 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" />{% endif %}
|
||||
{{ plant.climate.name }}
|
||||
<span class="tooltip-text">{{ plant.climate.description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.environment %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#d0e7d2] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#b7c7a3] transition-colors duration-200">
|
||||
<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: #e0f0eb;" data-type="environment">
|
||||
{% if plant.environment.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.environment.icon) }}" alt="Environment icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
|
||||
{{ plant.environment.name }}
|
||||
<span class="tooltip-text">{{ plant.environment.description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.light %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6ebe0] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#d0e7d2] transition-colors duration-200">
|
||||
<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: #e6ebe0;" data-type="light">
|
||||
{% if plant.light.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.light.icon) }}" alt="Light icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
|
||||
{{ plant.light.name }}
|
||||
<span class="tooltip-text">{{ plant.light.description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.toxicity %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#fff4e6] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#ffe4cc] transition-colors duration-200">
|
||||
<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: #fff4e6;" data-type="toxicity">
|
||||
{% if plant.toxicity.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.toxicity.icon) }}" alt="Toxicity icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
|
||||
{{ plant.toxicity.name }}
|
||||
<span class="tooltip-text">{{ plant.toxicity.description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.size %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#e6f7f5] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#d0e7e4] transition-colors duration-200">
|
||||
<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: #e6f7f5;" data-type="size">
|
||||
{% if plant.size.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.size.icon) }}" alt="Size icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
|
||||
{{ plant.size.name }}
|
||||
<span class="tooltip-text">{{ plant.size.description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.care_difficulty %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#f3e6ff] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#e6d0ff] transition-colors duration-200">
|
||||
<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: #f3e6ff;" data-type="care-difficulty">
|
||||
{% if plant.care_difficulty.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.care_difficulty.icon) }}" alt="Care icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
|
||||
{{ plant.care_difficulty.name }}
|
||||
<span class="tooltip-text">{{ plant.care_difficulty.description }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if plant.growth_rate %}
|
||||
<span class="tag-tooltip inline-flex items-center px-2 py-0.5 rounded bg-[#f7fae6] text-[#3e5637] text-xs font-semibold cursor-pointer hover:bg-[#e6f0cc] transition-colors duration-200">
|
||||
<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: #f7fae6;" data-type="growth-rate">
|
||||
{% if plant.growth_rate.icon %}<img src="{{ url_for('static', filename='icons/' ~ plant.growth_rate.icon) }}" alt="Growth icon" class="w-4 h-4 mr-1 inline-block align-middle" />{% endif %}
|
||||
{{ plant.growth_rate.name }}
|
||||
<span class="tooltip-text">{{ plant.growth_rate.description }}</span>
|
||||
|
||||
Reference in New Issue
Block a user