wip

app/static/css/main.css

@@ -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;
+} 

app/static/js/utils.js

@@ -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);
+}