mirror of
https://github.com/Zetaphor/browser-recall.git
synced 2025-12-06 10:29:38 +00:00
Improve UI
This commit is contained in:
@@ -31,4 +31,179 @@
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Search result styles */
|
||||
.prose {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4 {
|
||||
color: #f3f4f6;
|
||||
font-weight: 600;
|
||||
margin: 1.5rem 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #60a5fa;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
background: #374151;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
background: #374151;
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.prose pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
border-left: 4px solid #4b5563;
|
||||
padding-left: 1rem;
|
||||
margin: 1rem 0;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Search highlight styles */
|
||||
.highlight-search {
|
||||
background-color: #60a5fa;
|
||||
color: #111827;
|
||||
padding: 0.1em 0.2em;
|
||||
border-radius: 0.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Preview text styles */
|
||||
.preview-text {
|
||||
color: #9ca3af;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-text::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2rem;
|
||||
background: linear-gradient(transparent, #1f2937);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.preview-text.collapsed::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-text.collapsed {
|
||||
max-height: 8rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Expand button styles */
|
||||
.expand-button {
|
||||
color: #60a5fa;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid #374151;
|
||||
}
|
||||
|
||||
.expand-button:hover {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
/* Form input styles */
|
||||
.form-input {
|
||||
background-color: #1f2937;
|
||||
border-color: #374151;
|
||||
color: #f3f4f6;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:hover {
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Form label styles */
|
||||
.form-label {
|
||||
color: #9ca3af;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Search button styles */
|
||||
.search-button {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.search-button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
|
||||
}
|
||||
|
||||
.search-button:active {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
|
||||
/* Form grid layout */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
6
app/static/js/marked.min.js
vendored
Normal file
6
app/static/js/marked.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -4,33 +4,35 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-dark-800 shadow sm:rounded-lg p-6 border border-dark-700">
|
||||
<form id="search-form" class="space-y-6">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<form id="search-form">
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label for="search-term" class="block text-sm font-medium text-gray-300">Search Term</label>
|
||||
<input type="text" name="search-term" id="search-term"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
<label for="search-term" class="form-label">Search Term</label>
|
||||
<input type="text" name="search-term" id="search-term" placeholder="Enter search terms..."
|
||||
class="form-input w-full rounded-md">
|
||||
</div>
|
||||
<div>
|
||||
<label for="domain" class="block text-sm font-medium text-gray-300">Domain</label>
|
||||
<input type="text" name="domain" id="domain"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
<label for="domain" class="form-label">Domain</label>
|
||||
<input type="text" name="domain" id="domain" placeholder="example.com" class="form-input w-full rounded-md">
|
||||
</div>
|
||||
<div>
|
||||
<label for="start-date" class="block text-sm font-medium text-gray-300">Start Date</label>
|
||||
<input type="date" name="start-date" id="start-date"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
<label for="start-date" class="form-label">Start Date</label>
|
||||
<input type="date" name="start-date" id="start-date" class="form-input w-full rounded-md">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end-date" class="block text-sm font-medium text-gray-300">End Date</label>
|
||||
<input type="date" name="end-date" id="end-date"
|
||||
class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
|
||||
<label for="end-date" class="form-label">End Date</label>
|
||||
<input type="date" name="end-date" id="end-date" class="form-input w-full rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
||||
Search
|
||||
<button type="submit" class="search-button">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Search
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -44,7 +46,49 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Marked.js -->
|
||||
<script src="{{ url_for('static', path='/js/marked.min.js') }}"></script>
|
||||
|
||||
<script>
|
||||
// Configure marked for security
|
||||
marked.setOptions({
|
||||
headerIds: false,
|
||||
mangle: false
|
||||
});
|
||||
|
||||
function highlightSearchTerm(text, searchTerm) {
|
||||
if (!searchTerm || !text) return text;
|
||||
const regex = new RegExp(`(${searchTerm})`, 'gi');
|
||||
return text.replace(regex, '<mark class="highlight-search">$1</mark>');
|
||||
}
|
||||
|
||||
function getPreviewAroundMatch(text, searchTerm) {
|
||||
if (!text || !searchTerm) return '';
|
||||
|
||||
const regex = new RegExp(searchTerm, 'i');
|
||||
const match = text.match(regex);
|
||||
if (!match) return text.slice(0, 200) + '...';
|
||||
|
||||
const matchIndex = match.index;
|
||||
const previewLength = 150;
|
||||
const start = Math.max(0, matchIndex - previewLength);
|
||||
const end = Math.min(text.length, matchIndex + match[0].length + previewLength);
|
||||
|
||||
let preview = text.slice(start, end);
|
||||
if (start > 0) preview = '...' + preview;
|
||||
if (end < text.length) preview = preview + '...';
|
||||
|
||||
return preview;
|
||||
}
|
||||
|
||||
function toggleContent(button, contentId) {
|
||||
const content = document.getElementById(contentId);
|
||||
const isCollapsed = content.classList.contains('collapsed');
|
||||
|
||||
content.classList.toggle('collapsed');
|
||||
button.textContent = isCollapsed ? 'Show Less' : 'Show More';
|
||||
}
|
||||
|
||||
document.getElementById('search-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -58,25 +102,53 @@
|
||||
if (domain) params.append('domain', domain);
|
||||
if (startDate) params.append('start_date', startDate);
|
||||
if (endDate) params.append('end_date', endDate);
|
||||
params.append('include_content', 'true');
|
||||
|
||||
const response = await fetch(`/history/search?${params.toString()}`);
|
||||
const results = await response.json();
|
||||
|
||||
const resultsContainer = document.getElementById('search-results');
|
||||
resultsContainer.innerHTML = results.map(entry => `
|
||||
<li class="px-4 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-primary truncate">
|
||||
<a href="${entry.url}" target="_blank">${entry.title}</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
resultsContainer.innerHTML = results.map((entry, index) => {
|
||||
let contentHtml = '';
|
||||
|
||||
if (entry.markdown_content) {
|
||||
const preview = getPreviewAroundMatch(entry.markdown_content, searchTerm);
|
||||
const fullContent = marked.parse(highlightSearchTerm(entry.markdown_content, searchTerm));
|
||||
const previewHtml = marked.parse(highlightSearchTerm(preview, searchTerm));
|
||||
|
||||
contentHtml = `
|
||||
<div class="mt-2 text-sm text-gray-300">
|
||||
<div id="content-${index}" class="preview-text prose prose-invert max-w-none collapsed">
|
||||
${fullContent}
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button
|
||||
onclick="toggleContent(this, 'content-${index}')"
|
||||
class="expand-button"
|
||||
>
|
||||
Show More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<li class="px-4 py-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p class="text-sm font-medium text-primary truncate">
|
||||
<a href="${entry.url}" target="_blank">${highlightSearchTerm(entry.title, searchTerm)}</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-400 ml-4">
|
||||
${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
${contentHtml}
|
||||
</div>
|
||||
</li>
|
||||
`).join('');
|
||||
`;
|
||||
}).join('');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user