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

Improve notes search bar.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-06 21:25:06 +02:00
parent be370708a7
commit cc9eaddc1d
1 changed files with 100 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
templates/notes_list.html
View File

@@ -120,34 +120,38 @@
<input type="hidden" name="visibility" id="visibility" value="{{ visibility_filter or '' }}">
<div class="filter-row">
<div class="filter-group search-group">
<input type="text" name="search" id="search" placeholder="Search notes by title or content..."
value="{{ request.args.get('search', '') }}" class="search-input">
<button type="submit" class="btn btn-sm btn-primary">Search</button>
<div class="search-container">
<div class="search-bar">
{% if folder_filter or tag_filter or visibility_filter %}
<div class="active-filters-inline">
{% if folder_filter %}
<span class="filter-chip" onclick="clearFilter('folder')">
📁 {{ folder_filter }} <span class="remove">×</span>
</span>
{% endif %}
{% if tag_filter %}
<span class="filter-chip" onclick="clearFilter('tag')">
🏷️ {{ tag_filter }} <span class="remove">×</span>
</span>
{% endif %}
{% if visibility_filter %}
<span class="filter-chip" onclick="clearFilter('visibility')">
{% if visibility_filter == 'private' %}🔒{% elif visibility_filter == 'team' %}👥{% else %}🏢{% endif %}
{{ visibility_filter|title }} <span class="remove">×</span>
</span>
{% endif %}
</div>
{% endif %}
<input type="text" name="search" id="search"
placeholder="{% if folder_filter or tag_filter or visibility_filter %}Add search terms...{% else %}Search notes by title or content...{% endif %}"
value="{{ request.args.get('search', '') }}" class="search-input">
<button type="submit" class="btn-search" title="Search">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
</div>
</div>
{% if folder_filter or tag_filter or visibility_filter %}
<div class="active-filters">
<span class="filter-label">Active filters:</span>
{% if folder_filter %}
<span class="filter-badge" onclick="clearFilter('folder')">
📁 {{ folder_filter }} <span class="remove">×</span>
</span>
{% endif %}
{% if tag_filter %}
<span class="filter-badge" onclick="clearFilter('tag')">
🏷️ {{ tag_filter }} <span class="remove">×</span>
</span>
{% endif %}
{% if visibility_filter %}
<span class="filter-badge" onclick="clearFilter('visibility')">
{% if visibility_filter == 'private' %}🔒{% elif visibility_filter == 'team' %}👥{% else %}🏢{% endif %}
{{ visibility_filter|title }} <span class="remove">×</span>
</span>
{% endif %}
<button type="button" class="btn btn-xs btn-link" onclick="clearAllFilters()">Clear all</button>
</div>
{% endif %}
</div>
</form>
</div>
@@ -627,58 +631,87 @@
flex-wrap: wrap;
}
.search-group {
.search-container {
flex: 1;
min-width: 400px;
}
.search-bar {
position: relative;
display: flex;
gap: 0.5rem;
min-width: 300px;
}
.search-input {
flex: 1;
padding: 0.5rem 1rem;
align-items: center;
background: white;
border: 2px solid #e9ecef;
border-radius: 6px;
font-size: 0.95rem;
border-radius: 8px;
padding: 0.25rem;
transition: border-color 0.2s;
}
.search-input:focus {
outline: none;
.search-bar:focus-within {
border-color: var(--primary-color);
}
.active-filters {
.active-filters-inline {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding-left: 0.5rem;
flex-shrink: 0;
}
.filter-label {
font-size: 0.85rem;
color: #666;
}
.filter-badge {
.filter-chip {
background: #e3f2fd;
color: #333;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
padding: 0.2rem 0.6rem;
border-radius: 16px;
font-size: 0.8rem;
cursor: pointer;
transition: background 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
gap: 0.4rem;
white-space: nowrap;
}
.filter-badge:hover {
.filter-chip:hover {
background: #bbdefb;
}
.filter-badge .remove {
.filter-chip .remove {
font-weight: bold;
color: #666;
font-size: 0.9rem;
}
.search-input {
flex: 1;
padding: 0.4rem 0.75rem;
border: none;
background: transparent;
font-size: 0.95rem;
outline: none;
}
.btn-search {
padding: 0.4rem;
background: transparent;
color: #666;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-search:hover {
background: #e9ecef;
color: var(--primary-color, #007bff);
}
.btn-search svg {
display: block;
}
.btn-xs {
@@ -1016,13 +1049,18 @@
flex-direction: column;
}
.filter-group {
.search-container {
min-width: 100%;
}
.search-group {
flex-direction: column;
align-items: stretch;
.search-bar {
flex-wrap: wrap;
padding: 0.5rem;
}
.active-filters-inline {
width: 100%;
padding: 0 0 0.5rem 0;
}
.notes-grid {
@@ -1037,6 +1075,10 @@
.notes-table {
font-size: 0.85rem;
}
.folder-sidebar {
width: 200px;
}
}
/* Modal styles */