reoganised project
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
{% extends "base" %}
|
||||
|
||||
{% block title %}{% if query %}Search: {{ query }}{% else %}All Packages{% endif %}{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.home-header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.home-header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.home-header p {
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.repo-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.repo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 18px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.repo-item:hover {
|
||||
border-color: #3a3a3a;
|
||||
background: var(--surface2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.repo-item-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--surface2);
|
||||
background-image: url("/static/placeholder.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.repo-item-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.repo-item-name {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.repo-item-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.repo-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.repo-item-lang {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.lang-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 64px 0;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.empty-state p { margin: 6px 0 0; font-size: 13px; }
|
||||
|
||||
.result-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 16px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="home-header">
|
||||
{% if query %}
|
||||
<h1>Results for <span style="color:var(--accent)">"{{ query }}"</span></h1>
|
||||
{% else %}
|
||||
<h1>Packages</h1>
|
||||
<p>{{ packages | length }} package{% if packages | length != 1 %}s{% endif %} available</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if query %}
|
||||
<div class="result-count">{{ packages | length }} result{% if packages | length != 1 %}s{% endif %}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if packages | length > 0 %}
|
||||
<div class="repo-grid">
|
||||
{% for pkg in packages %}
|
||||
<a class="card repo-item" href="/packages/{{ pkg.name }}">
|
||||
<div class="repo-item-avatar" {% if pkg.avatar_url %}style="background-image:url('{{ pkg.avatar_url }}')"{% endif %}></div>
|
||||
<div class="repo-item-main">
|
||||
<span class="repo-item-name">{{ pkg.name }}</span>
|
||||
{% if pkg.description %}
|
||||
<div class="repo-item-desc">{{ pkg.description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="repo-item-meta">
|
||||
{% if pkg.language %}
|
||||
<span class="repo-item-lang">
|
||||
<span class="lang-dot" style="{% if pkg.language_color %}background:{{ pkg.language_color }}{% endif %}"></span>
|
||||
{{ pkg.language }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if pkg.latest_build_status %}
|
||||
{% if pkg.latest_build_status == "success" %}
|
||||
<span class="badge badge-success"><span class="dot"></span>passing</span>
|
||||
{% elif pkg.latest_build_status == "failure" %}
|
||||
<span class="badge badge-failure"><span class="dot"></span>failing</span>
|
||||
{% elif pkg.latest_build_status == "running" %}
|
||||
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
||||
{% elif pkg.latest_build_status == "pending" %}
|
||||
<span class="badge badge-pending"><span class="dot"></span>pending</span>
|
||||
{% else %}
|
||||
<span class="badge badge-unknown"><span class="dot"></span>unknown</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<span class="dim small">{{ pkg.updated_at }}</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
{% if query %}
|
||||
<p>No packages match <strong>"{{ query }}"</strong></p>
|
||||
{% else %}
|
||||
<p>No packages yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user