You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
416 lines
11 KiB
416 lines
11 KiB
{% extends 'layout.html.twig' %} |
|
|
|
{% block title %}User Search - Decent Newsroom{% endblock %} |
|
|
|
{% block body %} |
|
<div class="user-search-page"> |
|
<div class="container"> |
|
<header class="page-header"> |
|
<h1>Search Users</h1> |
|
<p class="subtitle">Find writers, contributors, and Nostr users</p> |
|
</header> |
|
|
|
<div class="search-box"> |
|
<form action="{{ path('users_search_page') }}" method="get" class="search-form"> |
|
<div class="input-group"> |
|
<input |
|
type="text" |
|
name="q" |
|
value="{{ query }}" |
|
placeholder="Search by name, display name, NIP-05, or about..." |
|
class="search-input" |
|
autofocus |
|
> |
|
<button type="submit" class="search-button"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<circle cx="11" cy="11" r="8"></circle> |
|
<path d="m21 21-4.35-4.35"></path> |
|
</svg> |
|
Search |
|
</button> |
|
</div> |
|
</form> |
|
</div> |
|
|
|
{% if query %} |
|
<div class="search-results"> |
|
<div class="results-header"> |
|
<h2> |
|
{% if resultsCount > 0 %} |
|
Found {{ resultsCount }} user{{ resultsCount != 1 ? 's' : '' }} |
|
{% else %} |
|
No users found |
|
{% endif %} |
|
</h2> |
|
{% if resultsCount > 0 %} |
|
<p class="results-info">Search query: <strong>{{ query }}</strong></p> |
|
{% endif %} |
|
</div> |
|
|
|
{% if users|length > 0 %} |
|
<div class="users-grid"> |
|
{% for user in users %} |
|
<div class="user-card"> |
|
<div class="user-avatar"> |
|
{% if user.picture %} |
|
<img src="{{ user.picture }}" alt="{{ user.displayName ?? user.name ?? 'User' }}" loading="lazy"> |
|
{% else %} |
|
<div class="avatar-placeholder"> |
|
{{ (user.displayName ?? user.name ?? user.npub[:8])|slice(0, 2)|upper }} |
|
</div> |
|
{% endif %} |
|
</div> |
|
<div class="user-info"> |
|
<h3 class="user-name"> |
|
{{ user.displayName ?? user.name ?? 'Anonymous' }} |
|
</h3> |
|
{% if user.nip05 %} |
|
<p class="user-nip05"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> |
|
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path> |
|
</svg> |
|
{{ user.nip05 }} |
|
</p> |
|
{% endif %} |
|
{% if user.about %} |
|
<p class="user-about"> |
|
{{ user.about|length > 120 ? user.about|slice(0, 120) ~ '...' : user.about }} |
|
</p> |
|
{% endif %} |
|
<div class="user-meta"> |
|
<span class="user-npub" title="{{ user.npub }}"> |
|
{{ user.npub[:12] }}...{{ user.npub[-8:] }} |
|
</span> |
|
{% if user.website %} |
|
<a href="{{ user.website }}" target="_blank" rel="noopener noreferrer" class="user-website"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<circle cx="12" cy="12" r="10"></circle> |
|
<line x1="2" y1="12" x2="22" y2="12"></line> |
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> |
|
</svg> |
|
Website |
|
</a> |
|
{% endif %} |
|
{% if user.lud16 %} |
|
<span class="user-lightning" title="Lightning: {{ user.lud16 }}"> |
|
⚡ |
|
</span> |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
{% else %} |
|
<div class="no-results"> |
|
<p>No users found matching "{{ query }}"</p> |
|
<p class="help-text">Try different keywords or check your spelling</p> |
|
</div> |
|
{% endif %} |
|
</div> |
|
{% else %} |
|
<div class="search-suggestions"> |
|
<h3>Quick Links</h3> |
|
<div class="suggestion-links"> |
|
<a href="{{ path('featured_writers_page') }}" class="suggestion-card"> |
|
<h4>Featured Writers</h4> |
|
<p>Browse our featured contributors</p> |
|
</a> |
|
</div> |
|
</div> |
|
{% endif %} |
|
</div> |
|
</div> |
|
|
|
<style> |
|
.user-search-page { |
|
padding: 2rem 0; |
|
min-height: 60vh; |
|
} |
|
|
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 0 1rem; |
|
} |
|
|
|
.page-header { |
|
text-align: center; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.page-header h1 { |
|
font-size: 2.5rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.subtitle { |
|
color: #666; |
|
font-size: 1.1rem; |
|
} |
|
|
|
.search-box { |
|
max-width: 700px; |
|
margin: 0 auto 3rem; |
|
} |
|
|
|
.search-form { |
|
width: 100%; |
|
} |
|
|
|
.input-group { |
|
display: flex; |
|
gap: 0.5rem; |
|
} |
|
|
|
.search-input { |
|
flex: 1; |
|
padding: 1rem; |
|
font-size: 1rem; |
|
border: 2px solid #e0e0e0; |
|
border-radius: 8px; |
|
transition: border-color 0.2s; |
|
} |
|
|
|
.search-input:focus { |
|
outline: none; |
|
border-color: #007bff; |
|
} |
|
|
|
.search-button { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
padding: 1rem 1.5rem; |
|
background: #007bff; |
|
color: white; |
|
border: none; |
|
border-radius: 8px; |
|
cursor: pointer; |
|
font-size: 1rem; |
|
font-weight: 500; |
|
transition: background 0.2s; |
|
} |
|
|
|
.search-button:hover { |
|
background: #0056b3; |
|
} |
|
|
|
.results-header { |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.results-header h2 { |
|
font-size: 1.8rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.results-info { |
|
color: #666; |
|
font-size: 0.95rem; |
|
} |
|
|
|
.users-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
gap: 1.5rem; |
|
margin-top: 2rem; |
|
} |
|
|
|
.user-card { |
|
background: white; |
|
border: 1px solid #e0e0e0; |
|
border-radius: 12px; |
|
padding: 1.5rem; |
|
transition: box-shadow 0.2s, transform 0.2s; |
|
} |
|
|
|
.user-card:hover { |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
transform: translateY(-2px); |
|
} |
|
|
|
.user-avatar { |
|
width: 80px; |
|
height: 80px; |
|
margin: 0 auto 1rem; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
} |
|
|
|
.user-avatar img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
.avatar-placeholder { |
|
width: 100%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
color: white; |
|
font-size: 1.5rem; |
|
font-weight: bold; |
|
} |
|
|
|
.user-info { |
|
text-align: center; |
|
} |
|
|
|
.user-name { |
|
font-size: 1.3rem; |
|
margin-bottom: 0.5rem; |
|
font-weight: 600; |
|
} |
|
|
|
.user-nip05 { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 0.3rem; |
|
color: #28a745; |
|
font-size: 0.9rem; |
|
margin-bottom: 0.75rem; |
|
} |
|
|
|
.user-about { |
|
color: #555; |
|
font-size: 0.95rem; |
|
line-height: 1.5; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.user-meta { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 0.75rem; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 0.85rem; |
|
color: #777; |
|
padding-top: 0.75rem; |
|
border-top: 1px solid #f0f0f0; |
|
} |
|
|
|
.user-npub { |
|
font-family: monospace; |
|
background: #f5f5f5; |
|
padding: 0.25rem 0.5rem; |
|
border-radius: 4px; |
|
} |
|
|
|
.user-website { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.25rem; |
|
color: #007bff; |
|
text-decoration: none; |
|
} |
|
|
|
.user-website:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.user-lightning { |
|
font-size: 1.2rem; |
|
} |
|
|
|
.no-results { |
|
text-align: center; |
|
padding: 3rem; |
|
color: #666; |
|
} |
|
|
|
.help-text { |
|
color: #999; |
|
font-size: 0.9rem; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.search-suggestions { |
|
margin-top: 3rem; |
|
} |
|
|
|
.search-suggestions h3 { |
|
font-size: 1.5rem; |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.suggestion-links { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
gap: 1.5rem; |
|
} |
|
|
|
.suggestion-card { |
|
display: block; |
|
padding: 2rem; |
|
background: #f8f9fa; |
|
border: 1px solid #e0e0e0; |
|
border-radius: 12px; |
|
text-decoration: none; |
|
color: inherit; |
|
transition: all 0.2s; |
|
} |
|
|
|
.suggestion-card:hover { |
|
background: white; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
transform: translateY(-2px); |
|
} |
|
|
|
.suggestion-card h4 { |
|
font-size: 1.2rem; |
|
margin-bottom: 0.5rem; |
|
color: #007bff; |
|
} |
|
|
|
.suggestion-card p { |
|
color: #666; |
|
font-size: 0.95rem; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.page-header h1 { |
|
font-size: 2rem; |
|
} |
|
|
|
.users-grid { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.input-group { |
|
flex-direction: column; |
|
} |
|
|
|
.search-button { |
|
justify-content: center; |
|
} |
|
} |
|
|
|
[data-theme="dark"] .user-card, |
|
[data-theme="dark"] .suggestion-card { |
|
background: #2d3748; |
|
border-color: #4a5568; |
|
} |
|
|
|
[data-theme="dark"] .search-input { |
|
background: #2d3748; |
|
border-color: #4a5568; |
|
color: white; |
|
} |
|
|
|
[data-theme="dark"] .user-npub { |
|
background: #1a202c; |
|
} |
|
|
|
[data-theme="dark"] .user-meta { |
|
border-color: #4a5568; |
|
} |
|
</style> |
|
{% endblock %} |
|
|
|
|