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

BIN
app/auth/__pycache__/routes.cpython-313.pyc
View file

Binary file not shown.

6
app/auth/routes.py
View file

@ -45,9 +45,9 @@ def signup():
# Create root category for the user
root_category = Category(
name='root',
icon='mdi-folder-root',
description='System root directory',
name='Library',
icon='mdi-bookshelf',
description='General storage for documents and categories',
user_id=user.id,
is_root=True
)

6
app/routes.py
View file

@ -131,9 +131,9 @@ def save_document():
if not root_category:
# Create a root category if it doesn't exist
root_category = Category(
name='root',
icon='mdi-folder-root',
description='System root directory',
name='Library',
icon='mdi-bookshelf',
description='General storage for documents and categories',
user_id=current_user.id,
is_root=True
)

175
app/static/css/main.css Normal file
View file

@ -0,0 +1,175 @@
/* 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 */
}
/* 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;
}
/* GitHub-style admonitions/alerts */
.markdown-body .admonition {
padding: 1rem;
border-left: 4px solid;
margin: 1em 0;
border-radius: 6px;
background-color: rgba(175, 184, 193, 0.2);
}
.markdown-body .admonition-title {
font-weight: 600;
margin-top: 0;
}
/* Regular blockquotes */
.markdown-body blockquote {
padding: 0.5rem 1rem;
color: #8b949e;
border-left: 0.25em solid #30363d;
margin: 1em 0;
background-color: rgba(55, 65, 81, 0.1);
}
.markdown-body blockquote > :first-child {
margin-top: 0;
}
.markdown-body blockquote > :last-child {
margin-bottom: 0;
}
.markdown-body .admonition-note {
border-color: #2b6eff;
background-color: rgba(43, 110, 255, 0.1);
}
.markdown-body .admonition-note .admonition-title {
color: #2b6eff;
}
.markdown-body .admonition-tip {
border-color: #3fb950;
background-color: rgba(63, 185, 80, 0.1);
}
.markdown-body .admonition-tip .admonition-title {
color: #3fb950;
}
.markdown-body .admonition-important {
border-color: #a371f7;
background-color: rgba(163, 113, 247, 0.1);
}
.markdown-body .admonition-important .admonition-title {
color: #a371f7;
}
.markdown-body .admonition-warning {
border-color: #d29922;
background-color: rgba(210, 153, 34, 0.1);
}
.markdown-body .admonition-warning .admonition-title {
color: #d29922;
}
.markdown-body .admonition-caution {
border-color: #f85149;
background-color: rgba(248, 81, 73, 0.1);
}
.markdown-body .admonition-caution .admonition-title {
color: #f85149;
}
.markdown-body .admonition-danger {
border-color: #cf222e;
background-color: rgba(207, 34, 46, 0.1);
}
.markdown-body .admonition-danger .admonition-title {
color: #cf222e;
}

56
app/static/js/utils.js Normal file
View file

@ -0,0 +1,56 @@
/**
* Utility functions for Vim Docs application
*/
// Debounce function to limit how often a function can run
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
// Helper function to show notifications
function showNotification(message, type = 'success') {
const notification = document.createElement('div');
const icon = type === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle';
const bgColor = type === 'success' ? 'bg-primary/90' : 'bg-red-500/90';
notification.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300 flex items-center`;
notification.innerHTML = `<i class="mdi ${icon} mr-2"></i><span>${message}</span>`;
document.body.appendChild(notification);
setTimeout(() => {
notification.classList.add('translate-y-16', 'opacity-0');
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Helper function to get CSRF token from meta tag
function getCsrfToken() {
return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}
// Toggle element visibility
function toggleVisibility(element, show) {
if (show) {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
}
// Load preference from localStorage with default value
function getPreference(key, defaultValue) {
const value = localStorage.getItem(key);
return value !== null ? value : defaultValue;
}
// Save preference to localStorage
function savePreference(key, value) {
localStorage.setItem(key, value);
}

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 %}