wip
This commit is contained in:
pika
parent
eb93961967
commit
ea3e92b8b7
10 changed files with 773 additions and 167 deletions
|
|
@ -2,13 +2,88 @@
|
|||
|
||||
{% block title %}Dashboard - Flask Files{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.dashboard {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-header .toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.section-header.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.collapsible-section {
|
||||
margin-bottom: 2rem;
|
||||
transition: max-height 0.5s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.section-content.collapsed {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.quick-access {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.quick-action {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.quick-action:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.quick-action i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="dashboard">
|
||||
<h2>Dashboard</h2>
|
||||
|
||||
<div class="dashboard-stats">
|
||||
<div class="quick-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📁</div>
|
||||
<div class="stat-icon"><i class="fas fa-folder"></i></div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-value">{{ total_folders }}</span>
|
||||
<span class="stat-label">Folders</span>
|
||||
|
|
@ -16,7 +91,7 @@
|
|||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📄</div>
|
||||
<div class="stat-icon"><i class="fas fa-file"></i></div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-value">{{ total_files }}</span>
|
||||
<span class="stat-label">Files</span>
|
||||
|
|
@ -24,51 +99,135 @@
|
|||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🔗</div>
|
||||
<div class="stat-icon"><i class="fas fa-link"></i></div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-value">{{ active_shares }}</span>
|
||||
<span class="stat-label">Active Shares</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-recent">
|
||||
<h3>Recent Files</h3>
|
||||
|
||||
{% if recent_files %}
|
||||
<div class="recent-files-list">
|
||||
{% for file in recent_files %}
|
||||
<div class="file-item">
|
||||
<div class="file-icon">
|
||||
{% if file.name.endswith('.pdf') %}📕
|
||||
{% elif file.name.endswith(('.jpg', '.jpeg', '.png', '.gif')) %}🖼️
|
||||
{% elif file.name.endswith(('.mp3', '.wav', '.flac')) %}🎵
|
||||
{% elif file.name.endswith(('.mp4', '.mov', '.avi')) %}🎬
|
||||
{% elif file.name.endswith(('.doc', '.docx')) %}📘
|
||||
{% elif file.name.endswith(('.xls', '.xlsx')) %}📊
|
||||
{% elif file.name.endswith(('.ppt', '.pptx')) %}📙
|
||||
{% elif file.name.endswith('.zip') %}📦
|
||||
{% else %}📄{% endif %}
|
||||
</div>
|
||||
<div class="file-details">
|
||||
<div class="file-name">{{ file.name }}</div>
|
||||
<div class="file-meta">
|
||||
<span class="file-size">{{ (file.size / 1024)|round(1) }} KB</span>
|
||||
<span class="file-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon"><i class="fas fa-clock"></i></div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-value">{{ recent_activities|default(0) }}</span>
|
||||
<span class="stat-label">Recent Activities</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">No files uploaded yet. <a href="{{ url_for('files.browser') }}">Upload your first
|
||||
file</a>.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="dashboard-actions">
|
||||
<a href="{{ url_for('files.browser') }}" class="btn primary">Browse Files</a>
|
||||
<a href="{{ url_for('files.upload') }}" class="btn">Upload Files</a>
|
||||
<div class="quick-access">
|
||||
<a href="{{ url_for('files.upload') }}" class="quick-action">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
<div>Upload Files</div>
|
||||
</a>
|
||||
<a href="{{ url_for('files.browser') }}" class="quick-action">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<div>Browse Files</div>
|
||||
</a>
|
||||
<a href="#" class="quick-action">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
<div>Manage Shares</div>
|
||||
</a>
|
||||
<a href="{{ url_for('auth.profile') }}" class="quick-action">
|
||||
<i class="fas fa-user-cog"></i>
|
||||
<div>Settings</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Recent Files Section (Collapsible) -->
|
||||
<div class="collapsible-section" id="recent-files-section">
|
||||
<div class="section-header" data-target="recent-files-content">
|
||||
<h3><i class="fas fa-clock"></i> Recent Files</h3>
|
||||
<span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
|
||||
</div>
|
||||
<div class="section-content" id="recent-files-content">
|
||||
{% if recent_files %}
|
||||
<div class="files-grid grid-view">
|
||||
{% for file in recent_files %}
|
||||
<a href="{{ url_for('files.download', file_id=file.id) }}" class="file-item" data-id="{{ file.id }}">
|
||||
<div class="item-icon">
|
||||
<i class="fas {{ file_icon(file.mime_type, file.name) }}"></i>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">{{ file.name }}</div>
|
||||
<div class="item-details">
|
||||
<span class="item-size">{{ format_size(file.size) }}</span>
|
||||
<span class="item-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<p>No files uploaded yet. <a href="{{ url_for('files.upload') }}">Upload your first file</a>.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Folder View (Collapsible) -->
|
||||
<div class="collapsible-section" id="folders-section">
|
||||
<div class="section-header" data-target="folders-content">
|
||||
<h3><i class="fas fa-folder"></i> My Folders</h3>
|
||||
<span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
|
||||
</div>
|
||||
<div class="section-content" id="folders-content">
|
||||
{% if root_folders %}
|
||||
<div class="files-grid grid-view">
|
||||
{% for folder in root_folders %}
|
||||
<a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="folder-item"
|
||||
data-id="{{ folder.id }}">
|
||||
<div class="item-icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">{{ folder.name }}</div>
|
||||
<div class="item-details">
|
||||
<span class="item-count">{{ folder.children.count() }} items</span>
|
||||
<span class="item-date">{{ folder.created_at.strftime('%b %d, %Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<p>No folders created yet. <a href="{{ url_for('files.browser') }}">Create your first folder</a>.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Set up collapsible sections
|
||||
const sectionHeaders = document.querySelectorAll('.section-header');
|
||||
|
||||
sectionHeaders.forEach(header => {
|
||||
header.addEventListener('click', function () {
|
||||
const targetId = this.getAttribute('data-target');
|
||||
const content = document.getElementById(targetId);
|
||||
|
||||
this.classList.toggle('collapsed');
|
||||
content.classList.toggle('collapsed');
|
||||
|
||||
// Store preference in localStorage
|
||||
localStorage.setItem(`section_${targetId}`, content.classList.contains('collapsed') ? 'closed' : 'open');
|
||||
});
|
||||
|
||||
// Check localStorage for saved preferences
|
||||
const targetId = header.getAttribute('data-target');
|
||||
const savedState = localStorage.getItem(`section_${targetId}`);
|
||||
|
||||
if (savedState === 'closed') {
|
||||
header.classList.add('collapsed');
|
||||
document.getElementById(targetId).classList.add('collapsed');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue