websites/flask-vim-docs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

62
app/templates/base.html
View file

@ -9,6 +9,9 @@
<!-- Material Design Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<!-- CascadyaCove Nerd Font -->
<style>
@font-face {
@ -44,57 +47,7 @@
</script>
<!-- Custom Styles -->
<style>
/* Fix for sidebar tree view */
.sidebar-hidden .sidebar {
transform: translateX(-100%);
}
.sidebar-hidden main {
margin-left: 0;
}
/* Category tree styling */
#category-tree {
margin-left: 0;
}
.category-item > div {
padding: 4px 0;
border-radius: 4px;
}
.document-item {
position: relative;
}
.document-item a {
border-radius: 4px;
display: block;
}
.category-item .actions,
.document-item .actions {
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: #282a36;
padding: 0 4px;
border-radius: 4px;
z-index: 10;
}
/* Drag and drop styles */
.drop-target {
background-color: rgba(80, 250, 123, 0.15);
border-radius: 4px;
outline: 1px dashed #50fa7b;
}
.dragging {
opacity: 0.5;
}
</style>
<!-- All styles moved to main.css -->
{% block extra_css %}{% endblock %}
</head>
@ -317,7 +270,7 @@
// Add document button - consistent across all views
const newDocButton = document.createElement('button');
newDocButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
newDocButton.title = 'Add Document';
newDocButton.title = 'Add document';
newDocButton.innerHTML = '<i class="mdi mdi-file-plus-outline text-sm"></i>';
newDocButton.addEventListener('click', function(e) {
e.preventDefault();
@ -329,7 +282,7 @@
// Add subcategory button - consistent across all views
const newSubfolderButton = document.createElement('button');
newSubfolderButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
newSubfolderButton.title = 'Add Sub-category';
newSubfolderButton.title = 'Add subcategory';
newSubfolderButton.innerHTML = '<i class="mdi mdi-folder-plus-outline text-sm"></i>';
newSubfolderButton.addEventListener('click', function(e) {
e.preventDefault();
@ -341,7 +294,7 @@
// Edit category button - consistent across all views
const editButton = document.createElement('button');
editButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
editButton.title = 'Edit Category';
editButton.title = 'Rename category';
editButton.innerHTML = '<i class="mdi mdi-pencil-outline text-sm"></i>';
editButton.addEventListener('click', function(e) {
e.preventDefault();
@ -634,6 +587,7 @@
</div>
{% endif %}
<script src="{{ url_for('static', filename='js/utils.js') }}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>

77
app/templates/index.html
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 %}