jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply new style to Notes pages.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-08 12:00:40 +02:00
committed by Jens Luedicke
parent e895207ebb
commit d2ca2905fa
8 changed files with 1038 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
templates/notes_list.html
View File

@@ -19,19 +19,31 @@
{% endmacro %}
{% block content %}
<div class="admin-container">
<div class="admin-header">
<h2>Notes & Documentation</h2>
<div class="admin-actions">
<a href="{{ url_for('notes.create_note') }}" class="btn btn-sm btn-primary">
<span>📝</span> Create New Note
</a>
<button type="button" class="btn btn-sm btn-secondary" id="toggle-sidebar">
<span>📁</span> Toggle Folders
</button>
<a href="{{ url_for('notes.notes_folders') }}" class="btn btn-sm btn-info">
<span>⚙️</span> Manage Folders
</a>
<div class="notes-container">
<!-- Header Section -->
<div class="page-header">
<div class="header-content">
<div class="header-left">
<h1 class="page-title">
<span class="page-icon">📝</span>
Notes & Documentation
</h1>
<p class="page-subtitle">Organize your thoughts and documentation</p>
</div>
<div class="header-actions">
<a href="{{ url_for('notes.create_note') }}" class="btn btn-primary">
<span class="icon">➕</span>
Create New Note
</a>
<button type="button" class="btn btn-secondary" id="toggle-sidebar">
<span class="icon">📁</span>
Toggle Folders
</button>
<a href="{{ url_for('notes.notes_folders') }}" class="btn btn-secondary">
<span class="icon">⚙️</span>
Manage Folders
</a>
</div>
</div>
</div>
@@ -199,9 +211,9 @@
</div>
<div class="note-actions">
<a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn btn-xs btn-info">View</a>
<a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn-sm btn-secondary">View</a>
{% if note.can_user_edit(g.user) %}
<a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn btn-xs btn-primary">Edit</a>
<a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn-sm btn-primary">Edit</a>
{% endif %}
</div>
</div>
@@ -251,9 +263,9 @@
<td>{{ note.created_by.username }}</td>
<td>{{ note.updated_at.strftime('%b %d, %Y') }}</td>
<td>
<a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn btn-xs btn-info">View</a>
<a href="{{ url_for('notes.view_note', slug=note.slug) }}" class="btn-sm btn-secondary">View</a>
{% if note.can_user_edit(g.user) %}
<a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn btn-xs btn-primary">Edit</a>
<a href="{{ url_for('notes.edit_note', slug=note.slug) }}" class="btn-sm btn-primary">Edit</a>
{% endif %}
</td>
</tr>
@@ -280,11 +292,137 @@
</div>
<style>
/* Notes styles that match User Management */
.admin-container {
padding: 20px;
/* Container */
.notes-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* Page Header - Time Tracking style */
.page-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 2rem;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.page-title {
font-size: 2rem;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.page-icon {
font-size: 2.5rem;
display: inline-block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.page-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin: 0.5rem 0 0 0;
}
.header-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Modern button styles to match Time Tracking */
.btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: white;
color: #667eea;
border-color: #e5e7eb;
}
.btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #667eea;
}
.btn .icon {
font-size: 1.1em;
}
/* Small buttons */
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 6px;
font-weight: 600;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.btn-sm.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-sm.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.btn-sm.btn-secondary {
background: white;
color: #667eea;
border: 1px solid #e5e7eb;
}
.btn-sm.btn-secondary:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: #667eea;
}
/* Notes layout */
.notes-layout {
display: flex;
gap: 20px;
@@ -293,13 +431,15 @@
/* Sidebar */
.notes-sidebar {
width: 250px;
background: #f8f9fa;
border-radius: 5px;
padding: 15px;
width: 280px;
background: white;
border-radius: 12px;
padding: 1.5rem;
height: fit-content;
position: sticky;
top: 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.notes-sidebar.collapsed {
@@ -311,10 +451,10 @@
}
.sidebar-section h4 {
font-size: 0.9rem;
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
color: #495057;
margin-bottom: 12px;
color: #1f2937;
}
.search-box {
@@ -324,9 +464,19 @@
}
.search-box input {
padding: 0.75rem;
padding-right: 35px;
width: 100%;
font-size: 0.85rem;
font-size: 0.9rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
transition: all 0.2s;
}
.search-box input:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-btn {
@@ -354,7 +504,7 @@
.folder-item.active .folder-link {
font-weight: 600;
color: #007bff;
color: #667eea;
}
.folder-item.drag-over {
@@ -369,7 +519,7 @@
}
.folder-link:hover {
color: #007bff;
color: #667eea;
}
.folder-count {
@@ -388,21 +538,23 @@
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: white;
border-radius: 3px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 8px;
text-decoration: none;
color: #495057;
font-size: 0.85rem;
font-size: 0.9rem;
transition: all 0.2s;
border: 1px solid transparent;
}
.tag-link:hover {
background: #e9ecef;
transform: translateX(2px);
}
.tag-link.active {
background: #007bff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
@@ -423,21 +575,23 @@
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: white;
border-radius: 3px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 8px;
text-decoration: none;
color: #495057;
font-size: 0.85rem;
font-size: 0.9rem;
transition: all 0.2s;
border: 1px solid transparent;
}
.visibility-link:hover {
background: #e9ecef;
transform: translateX(2px);
}
.visibility-link.active {
background: #007bff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
@@ -449,21 +603,23 @@
/* Active Filters */
.active-filters {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 5px;
background: white;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
font-size: 0.9rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.filter-tag {
background: white;
padding: 4px 8px;
border-radius: 3px;
border: 1px solid #dee2e6;
background: #f8f9fa;
padding: 6px 12px;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.remove-filter {
@@ -475,7 +631,7 @@
.clear-all {
margin-left: auto;
color: #007bff;
color: #667eea;
text-decoration: none;
}
@@ -508,9 +664,9 @@
}
.toggle-btn.active {
background: #007bff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: #007bff;
border-color: #667eea;
}
/* View Containers */
@@ -531,17 +687,18 @@
.note-card {
background: white;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
position: relative;
transition: all 0.2s;
cursor: move;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.note-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
transform: translateY(-4px);
}
.note-card.pinned {
@@ -554,7 +711,7 @@
}
.note-card.drag-over {
border: 2px dashed #007bff;
border: 2px dashed #667eea;
}
.note-card-header {
@@ -601,7 +758,7 @@
}
.note-title a:hover {
color: #007bff;
color: #667eea;
}
.note-preview {
@@ -653,8 +810,10 @@
.empty-state {
text-align: center;
padding: 60px 20px;
background: #f8f9fa;
border-radius: 5px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.empty-icon {
@@ -666,10 +825,11 @@
.notes-table {
width: 100%;
background: white;
border: 1px solid #dee2e6;
border-radius: 5px;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
border-collapse: collapse;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.notes-table th {