NoLog.cz/headline
6
2
Fork 0
Code Issues Pull requests Releases Wiki Activity

Implement expand diff togle with AlpineJS

Browse source
This commit is contained in:
Ondřej 2023-08-21 13:39:06 +02:00
parent 901817409e
commit 64e2f4d622
6 changed files with 83 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
view/app.py
View file

@ -52,9 +52,6 @@ def index():
search = request.args.get("search", type=str, default="")
query = websearch_to_fts_query(search) if search else None
# View options
expand_diffs = request.args.get("expand_diffs") is not None
db.execute(
f"SELECT count(*) FROM diffs{'_fts(?)' if query else ''}",
(query,) if query else (),
@ -90,7 +87,6 @@ def index():
pagination=pagination,
diff_count=diff_count,
search=search,
expand_diffs=expand_diffs,
)
res = make_response(html)

5
view/static/alpinejs@3.12.3.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
view/static/main.css
View file

@ -238,7 +238,6 @@
.container{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1200px;}
.action-link{font-size:0.875rem;line-height:1.25rem;font-weight:500;--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));display:inline-flex;gap:0.375rem;align-items:center;}
.text-caption{font-size:0.875rem;line-height:1.25rem;font-weight:500;--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));}
.text-muted{--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));}
.action-link:hover{--un-text-opacity:1;color:rgba(29,78,216,var(--un-text-opacity));}
/* layer: default */
.p-0{padding:0;}

19
view/templates/article_detail.html
View file

@ -7,11 +7,20 @@
<a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
</h1>
<div class="card">
<section class="mb-6" id="filters" hx-preserve>
<label class="checkbox">
<input type="checkbox" x-model="expandDiffs" x-bind:checked="expandDiffs" />
<p>Expand diffs</p>
</label>
</section>
<section class="card">
<ul class="md:hidden list-none p-0">
{% for diff in diffs %}
<div class="px-4 py-3 border-b">
<p class="text-caption mb-2">{{ diff.diff_time }}</p>
<p x-bind:class="{ hidden: expandDiffs }">{{ diff.diff_html|safe }}</p>
<div x-bind:class="{ hidden: !expandDiffs }">
<div class="mb-2">
<p class="text-caption mb-2">Before</p>
<p class="diff-before">{{ diff.diff_html|safe }}</p>
@ -21,6 +30,7 @@
<p class="diff-after">{{ diff.diff_html|safe }}</p>
</div>
</div>
</div>
{% endfor %}
</ul>
@ -29,7 +39,10 @@
<tr>
<th class="text-caption">{{ diff.diff_time }}</th>
<td class="p-0 w-full">
<table class="table-styled">
<p x-bind:class="{ hidden: expandDiffs }">
{{ diff.diff_html|safe }}
</p>
<table class="table-styled" x-bind:class="{ hidden: !expandDiffs }">
<tr>
<th class="text-caption">Before</th>
<td class="diff-before w-full">{{ diff.diff_html|safe }}</td>
@ -43,6 +56,6 @@
</tr>
{% endfor %}
</table>
</div>
</section>
</div>
{% endblock body %}

3
view/templates/base.html
View file

@ -18,9 +18,10 @@
src="https://plausible.nolog.cz/js/plausible.js"
></script>
<script src="{{ url_for('static', filename='htmx@1.9.4.min.js') }}"></script>
<script defer src="{{ url_for('static', filename='alpinejs@3.12.3.min.js') }}"></script>
{% block head %}{% endblock %}
</head>
<body hx-boost="true">
<body hx-boost="true" x-data="{ expandDiffs: false }">
<header class="py-4 bg-white {% block header_class %}border-b{% endblock %}">
<div class="container flex flex-wrap items-center gap-x-8 gap-y-2">
<a href="/" class="text-inherit">

40
view/templates/index.html
View file

@ -4,7 +4,7 @@
{% block body %}
<div class="bg-white sticky top-0 py-3 border-b z-10 mb-6">
<div class="container flex items-center flex-wrap shrink-0 gap-x-6 gap-y-2">
<section class="container flex items-center flex-wrap shrink-0 gap-x-6 gap-y-2">
<form method="get" class="flex gap-x-2">
<input
class="text-input w-full max-w-20rem"
@ -24,27 +24,15 @@
</svg>
</button>
</form>
<form
hx-get="/"
hx-trigger="change"
hx-target="#diff-list"
hx-select="#diff-list"
hx-swap="outerHTML"
hx-push-url="true"
>
{% if page > 1 %}
<input type="hidden" name="page" value="{{ page }}" />
{% endif %}
<label class="checkbox">
<input type="checkbox" name="expand_diffs" value="true" {{ "checked" if expand_diffs else "" }} />
<input type="checkbox" x-model="expandDiffs" x-bind:checked="expandDiffs" />
<p>Expand diffs</p>
</label>
</form>
</div>
</section>
</div>
<div id="diff-list">
<div class="container mb-8">
<section class="container mb-8">
{% for diff in diffs %}
<article class="card px-5 py-4 mb-4">
<p class="flex gap-x-4 gap-y-2 mb-3 flex-wrap shrink-0">
@ -60,15 +48,16 @@
</a>
</p>
{% if expand_diffs %}
<div class="text-lg" x-bind:class="{ hidden: expandDiffs }">{{ diff.diff_html|safe }}</div>
<div x-bind:class="{ hidden: !expandDiffs }">
<div class="md:hidden">
<div class="mb-2">
<div class="text-sm text-muted">Before</div>
<div class="diff-before text-lg">{{ diff.diff_html|safe }}</div>
<p class="text-caption">Before</p>
<p class="diff-before text-lg">{{ diff.diff_html|safe }}</p>
</div>
<div>
<div class="text-sm text-muted">After</div>
<div class="diff-after text-lg">{{ diff.diff_html|safe }}</div>
<p class="text-caption">After</p>
<p class="diff-after text-lg">{{ diff.diff_html|safe }}</p>
</div>
</div>
@ -82,12 +71,10 @@
<td class="diff-after text-lg">{{ diff.diff_html|safe }}</td>
</tr>
</table>
{% else %}
<div class="text-lg">{{ diff.diff_html|safe }}</div>
{% endif %}
</div>
</article>
{% endfor %}
</div>
</section>
<div class="overflow-x-auto">
<div class="container mb-3">
@ -97,5 +84,4 @@
<div class="container text-sm text-gray-500">
{{ pagination.info }}
</div>
</div>
{% endblock body %}