Add a checkbox to switch between diff variants
This commit is contained in:
parent
f8055c75b4
commit
8b24eb4da2
3 changed files with 65 additions and 27 deletions
|
|
@ -47,6 +47,9 @@ def index():
|
|||
search = request.args.get("search", type=str, default="")
|
||||
query = websearch_to_fts_query(search) if search else None
|
||||
|
||||
# View options
|
||||
compact_diffs = request.args.get("compact_diffs") is not None
|
||||
|
||||
db.execute(f"SELECT count(*) FROM diffs{'_fts(?)' if query else ''}", (query,) if query else ())
|
||||
|
||||
diff_count = db.fetchall()[0][0]
|
||||
|
|
@ -77,6 +80,7 @@ def index():
|
|||
pagination=pagination,
|
||||
diff_count = diff_count,
|
||||
search=search,
|
||||
compact_diffs=compact_diffs,
|
||||
)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ details[open] summary::before {
|
|||
width: 1.25em;
|
||||
}
|
||||
|
||||
.input {
|
||||
.text-input {
|
||||
border-radius: var(--radius-s);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.375rem 0.75rem;
|
||||
|
|
@ -250,12 +250,25 @@ details[open] summary::before {
|
|||
transition: border-color 120ms, box-shadow 120ms;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
.text-input:focus {
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 2px hsl(225 90% 40% / 50%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
font-size: var(--font-size-s);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-muted);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox input {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -367,7 +380,7 @@ details[open] summary::before {
|
|||
|
||||
/* Index */
|
||||
|
||||
.filters {
|
||||
.home-filters {
|
||||
margin-bottom: 2rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -376,12 +389,20 @@ details[open] summary::before {
|
|||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filters form {
|
||||
.home-filters .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.home-filters form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filters [name="search"] {
|
||||
.home-filters [name="search"] {
|
||||
width: 100%;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
{% block header_class %}header-extended{% endblock header_class %}
|
||||
|
||||
{% block body %}
|
||||
<div class="filters">
|
||||
<div class="home-filters">
|
||||
<div class="container">
|
||||
<form method="get">
|
||||
<input
|
||||
class="input"
|
||||
class="text-input"
|
||||
type="text"
|
||||
id="search"
|
||||
name="search"
|
||||
|
|
@ -22,10 +22,19 @@
|
|||
<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>
|
||||
</button>
|
||||
</form>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="compact_diffs" value="true"
|
||||
hx-get="/"
|
||||
hx-target="#diff-list"
|
||||
hx-select="#diff-list"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
<p>Compact diffs</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container home-diff-list">
|
||||
<div class="container home-diff-list" id="diff-list">
|
||||
{% for diff in diffs %}
|
||||
<article class="card changeset-card">
|
||||
<p class="changeset-card-actions">
|
||||
|
|
@ -41,27 +50,31 @@
|
|||
</a>
|
||||
</p>
|
||||
|
||||
<div class="changeset-card-diff-s">
|
||||
<div>
|
||||
<div class="text-caption">Before</div>
|
||||
<div class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</div>
|
||||
{% if compact_diffs %}
|
||||
<div class="changeset-card-title">{{ diff.diff_html|safe }}</div>
|
||||
{% else %}
|
||||
<div class="changeset-card-diff-s">
|
||||
<div>
|
||||
<div class="text-caption">Before</div>
|
||||
<div class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-caption">After</div>
|
||||
<div class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-caption">After</div>
|
||||
<div class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="changeset-card-diff-m">
|
||||
<tr>
|
||||
<th class="text-caption table-head">Before</th>
|
||||
<td class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-caption table-head">After</th>
|
||||
<td class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="changeset-card-diff-m">
|
||||
<tr>
|
||||
<th class="text-caption table-head">Before</th>
|
||||
<td class="diff-before changeset-card-title">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-caption table-head">After</th>
|
||||
<td class="diff-after changeset-card-title">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue