This commit is contained in:
pika 2025-04-14 23:39:42 +02:00
parent 5473beb35d
commit 22a800e5e6
7 changed files with 271 additions and 111 deletions

View file

@ -123,8 +123,21 @@
<div id="grid-view" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{% if categories %}
{% for category in categories %}
<div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-all hover:-translate-y-1 duration-200">
<a href="{{ url_for('main.view_category', category_id=category.id) }}" class="block p-5">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-all hover:-translate-y-1 duration-200 group">
<a href="{{ url_for('main.view_category', category_id=category.id) }}" class="block p-5 relative">
<!-- Hover action buttons -->
<div class="absolute right-2 top-2 hidden group-hover:flex space-x-1 bg-gray-800/90 rounded-md px-1 py-1 shadow-md z-10">
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="p-1.5 text-gray-400 hover:text-primary rounded-full hover:bg-gray-700 transition-all" title="Add document">
<i class="mdi mdi-file-plus-outline text-sm"></i>
</a>
<a href="{{ url_for('main.new_category') }}?parent_id={{ category.id }}" class="p-1.5 text-gray-400 hover:text-primary rounded-full hover:bg-gray-700 transition-all" title="Add subcategory">
<i class="mdi mdi-folder-plus-outline text-sm"></i>
</a>
<a href="{{ url_for('main.edit_category', category_id=category.id) }}" class="p-1.5 text-gray-400 hover:text-primary rounded-full hover:bg-gray-700 transition-all" title="Rename category">
<i class="mdi mdi-pencil-outline text-sm"></i>
</a>
</div>
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-md bg-primary/20 flex items-center justify-center text-primary mr-3">
<i class="mdi {{ category.icon }} text-2xl"></i>
@ -184,13 +197,13 @@
<a href="{{ url_for('main.view_category', category_id=category.id) }}" class="text-white font-medium hover:text-primary transition-colors">{{ category.name }}</a>
</div>
<div class="flex items-center gap-2 hidden group-hover:flex">
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="New Document">
<a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add document">
<i class="mdi mdi-file-plus-outline"></i>
</a>
<a href="{{ url_for('main.view_category', category_id=category.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="View Category">
<i class="mdi mdi-eye-outline"></i>
<a href="{{ url_for('main.new_category') }}?parent_id={{ category.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add subcategory">
<i class="mdi mdi-folder-plus-outline"></i>
</a>
<a href="{{ url_for('main.edit_category', category_id=category.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Edit Category">
<a href="{{ url_for('main.edit_category', category_id=category.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Rename category">
<i class="mdi mdi-pencil-outline"></i>
</a>
</div>
@ -236,11 +249,14 @@
<a href="{{ url_for('main.view_category', category_id=subcategory.id) }}" class="text-gray-300 hover:text-primary transition-colors">{{ subcategory.name }}</a>
</div>
<div class="flex items-center gap-2 hidden group-hover:flex">
<a href="{{ url_for('main.new_document') }}?category={{ subcategory.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="New Document">
<a href="{{ url_for('main.new_document') }}?category={{ subcategory.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add document">
<i class="mdi mdi-file-plus-outline"></i>
</a>
<a href="{{ url_for('main.view_category', category_id=subcategory.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="View Category">
<i class="mdi mdi-eye-outline"></i>
<a href="{{ url_for('main.new_category') }}?parent_id={{ subcategory.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add subcategory">
<i class="mdi mdi-folder-plus-outline"></i>
</a>
<a href="{{ url_for('main.edit_category', category_id=subcategory.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Rename category">
<i class="mdi mdi-pencil-outline"></i>
</a>
</div>
</div>
@ -620,46 +636,5 @@
});
</script>
<style>
/* Animation for expanding/collapsing */
.animate-slide-down {
animation: slideDown 0.3s ease-out forwards;
}
.animate-slide-up {
animation: slideUp 0.3s ease-out forwards;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
max-height: 0;
}
to {
opacity: 1;
transform: translateY(0);
max-height: 1000px;
}
}
@keyframes slideUp {
from {
opacity: 1;
transform: translateY(0);
max-height: 1000px;
}
to {
opacity: 0;
transform: translateY(-10px);
max-height: 0;
}
}
/* Active view styling */
.active-view {
background-color: rgba(76, 175, 80, 0.2); /* Primary color with opacity */
color: #4CAF50; /* Primary color */
}
</style>
<!-- Styles moved to main.css -->
{% endblock %}