diff --git a/templates/notes_list.html b/templates/notes_list.html index 0110e2e..dc09961 100644 --- a/templates/notes_list.html +++ b/templates/notes_list.html @@ -8,19 +8,23 @@ - ⚙️ Manage Folders - Create New Note
+
+ + + + + Create New Note + +

Folders

{% if notes %} + +
+
+ {{ notes|length }} notes +
+
+ +
+
+
@@ -221,12 +243,25 @@
- View + + + + + {% if note.can_user_edit(g.user) %} - Edit + + + + +
- +
{% endif %}
@@ -288,12 +323,25 @@
- View + + + + + {% if note.can_user_edit(g.user) %} - Edit + + + + +
- +
{% endif %}
@@ -338,6 +386,35 @@ flex-shrink: 0; } +.create-note-section { + margin-bottom: 1.5rem; +} + +.btn-create-note { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + width: 100%; + padding: 0.75rem 1rem; + background: var(--primary-color, #007bff); + color: white; + text-decoration: none; + border-radius: 6px; + font-weight: 500; + transition: background 0.2s; +} + +.btn-create-note:hover { + background: var(--primary-dark, #0056b3); + color: white; + text-decoration: none; +} + +.btn-create-note svg { + flex-shrink: 0; +} + .sidebar-header { display: flex; justify-content: space-between; @@ -719,6 +796,62 @@ font-size: 0.75rem; } +/* Notes toolbar */ +.notes-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 0; + border-bottom: 1px solid #dee2e6; + margin-bottom: 1rem; +} + +.toolbar-left { + display: flex; + align-items: center; + gap: 1rem; +} + +.toolbar-right { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.notes-count { + font-size: 0.9rem; + color: #666; + font-weight: 500; +} + +.btn-view-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.8rem; + background: white; + border: 1px solid #dee2e6; + border-radius: 6px; + color: #333; + font-size: 0.9rem; + cursor: pointer; + transition: all 0.2s; +} + +.btn-view-toggle:hover { + background: #f8f9fa; + border-color: #adb5bd; +} + +.btn-view-toggle svg { + width: 16px; + height: 16px; +} + +.view-label { + font-weight: 500; +} + /* Drag and drop styles */ .note-row.dragging, .note-card.dragging { @@ -749,15 +882,6 @@ align-items: center; } -#toggle-view { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.view-icon { - font-size: 1.2rem; -} .notes-filter-section { background: #f8f9fa; @@ -882,7 +1006,41 @@ } .column-actions { - width: 180px; + width: 120px; +} + +.note-actions { + display: flex; + gap: 0.5rem; + justify-content: center; +} + +.btn-action { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + background: transparent; + border: 1px solid #dee2e6; + border-radius: 4px; + color: #495057; + transition: all 0.2s; + cursor: pointer; +} + +.btn-action:hover { + background: #f8f9fa; + border-color: #adb5bd; + color: var(--primary-color, #007bff); + text-decoration: none; +} + +.btn-action-danger:hover { + background: #f8d7da; + border-color: #f5c6cb; + color: #721c24; } .note-associations { @@ -961,16 +1119,16 @@ /* Grid View Styles */ .notes-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1rem; margin-bottom: 2rem; } .note-card { background: white; border: 1px solid #dee2e6; - border-radius: 8px; - padding: 1.5rem; + border-radius: 6px; + padding: 1rem; transition: box-shadow 0.2s ease; display: flex; flex-direction: column; @@ -981,15 +1139,15 @@ } .note-header { - margin-bottom: 1rem; + margin-bottom: 0.75rem; } .note-title { - margin: 0 0 0.5rem 0; - font-size: 1.25rem; + margin: 0 0 0.4rem 0; + font-size: 1.1rem; display: flex; align-items: center; - gap: 0.5rem; + gap: 0.4rem; } .note-title a { @@ -1003,21 +1161,22 @@ .note-meta { display: flex; - gap: 0.75rem; + gap: 0.5rem; align-items: center; - font-size: 0.85rem; + font-size: 0.75rem; color: #666; flex-wrap: wrap; } .note-preview { flex: 1; - margin-bottom: 1rem; + margin-bottom: 0.75rem; color: #555; - line-height: 1.6; + line-height: 1.4; + font-size: 0.85rem; overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @@ -1025,17 +1184,57 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1rem; + margin-bottom: 0.75rem; flex-wrap: wrap; - gap: 0.5rem; + gap: 0.4rem; } .note-tags { display: flex; - gap: 0.5rem; + gap: 0.3rem; flex-wrap: wrap; } +/* Grid View specific adjustments */ +.note-card .visibility-badge { + padding: 0.15rem 0.4rem; + font-size: 0.7rem; +} + +.note-card .folder-badge { + padding: 0.15rem 0.4rem; + font-size: 0.7rem; +} + +.note-card .tag-badge { + padding: 0.15rem 0.4rem; + font-size: 0.7rem; + margin-right: 0.2rem; +} + +.note-card .association-badge { + padding: 0.15rem 0.4rem; + font-size: 0.7rem; +} + +.note-card .note-date { + font-size: 0.75rem; +} + +.note-card .pin-icon { + font-size: 0.85rem; +} + +.note-card .btn-action { + width: 28px; + height: 28px; +} + +.note-card .btn-action svg { + width: 14px; + height: 14px; +} + /* Responsive design */ @media (max-width: 1024px) { .column-folder, @@ -1177,15 +1376,22 @@ document.addEventListener('DOMContentLoaded', function() { const toggleBtn = document.getElementById('toggle-view'); const tableView = document.getElementById('table-view'); const gridView = document.getElementById('grid-view'); - const viewIcon = toggleBtn.querySelector('.view-icon'); + const iconGrid = toggleBtn.querySelector('.icon-grid'); + const iconList = toggleBtn.querySelector('.icon-list'); + const viewLabel = toggleBtn.querySelector('.view-label'); // Load saved view preference const savedView = localStorage.getItem('notes-view') || 'table'; if (savedView === 'grid') { tableView.style.display = 'none'; gridView.style.display = 'block'; - viewIcon.textContent = '⊞'; - toggleBtn.innerHTML = '⊞ Grid View'; + iconGrid.style.display = 'none'; + iconList.style.display = 'block'; + viewLabel.textContent = 'Grid View'; + } else { + iconGrid.style.display = 'block'; + iconList.style.display = 'none'; + viewLabel.textContent = 'Table View'; } toggleBtn.addEventListener('click', function() { @@ -1193,15 +1399,17 @@ document.addEventListener('DOMContentLoaded', function() { // Switch to table view tableView.style.display = 'block'; gridView.style.display = 'none'; - viewIcon.textContent = '☰'; - toggleBtn.innerHTML = '☰ List View'; + iconGrid.style.display = 'block'; + iconList.style.display = 'none'; + viewLabel.textContent = 'Table View'; localStorage.setItem('notes-view', 'table'); } else { // Switch to grid view tableView.style.display = 'none'; gridView.style.display = 'block'; - viewIcon.textContent = '⊞'; - toggleBtn.innerHTML = '⊞ Grid View'; + iconGrid.style.display = 'none'; + iconList.style.display = 'block'; + viewLabel.textContent = 'Grid View'; localStorage.setItem('notes-view', 'grid'); } });