nologcz/headline
2
1
Fork 0
mirror of https://git.nolog.cz/NoLog.cz/headline.git synced 2025-01-31 11:53:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Implement expand diff togle with AlpineJS

Browse source
This commit is contained in:
Ondřej Nývlt 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="") search = request.args.get("search", type=str, default="")
query = websearch_to_fts_query(search) if search else None query = websearch_to_fts_query(search) if search else None
# View options
expand_diffs = request.args.get("expand_diffs") is not None
db.execute( db.execute(
f"SELECT count(*) FROM diffs{'_fts(?)' if query else ''}", f"SELECT count(*) FROM diffs{'_fts(?)' if query else ''}",
(query,) if query else (), (query,) if query else (),
@ -90,7 +87,6 @@ def index():
pagination=pagination, pagination=pagination,
diff_count=diff_count, diff_count=diff_count,
search=search, search=search,
expand_diffs=expand_diffs,
) )
res = make_response(html) 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;} .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;} .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-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));} .action-link:hover{--un-text-opacity:1;color:rgba(29,78,216,var(--un-text-opacity));}
/* layer: default */ /* layer: default */
.p-0{padding:0;} .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> <a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
</h1> </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"> <ul class="md:hidden list-none p-0">
{% for diff in diffs %} {% for diff in diffs %}
<div class="px-4 py-3 border-b"> <div class="px-4 py-3 border-b">
<p class="text-caption mb-2">{{ diff.diff_time }}</p> <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"> <div class="mb-2">
<p class="text-caption mb-2">Before</p> <p class="text-caption mb-2">Before</p>
<p class="diff-before">{{ diff.diff_html|safe }}</p> <p class="diff-before">{{ diff.diff_html|safe }}</p>
@ -21,6 +30,7 @@
<p class="diff-after">{{ diff.diff_html|safe }}</p> <p class="diff-after">{{ diff.diff_html|safe }}</p>
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</ul> </ul>
@ -29,7 +39,10 @@
<tr> <tr>
<th class="text-caption">{{ diff.diff_time }}</th> <th class="text-caption">{{ diff.diff_time }}</th>
<td class="p-0 w-full"> <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> <tr>
<th class="text-caption">Before</th> <th class="text-caption">Before</th>
<td class="diff-before w-full">{{ diff.diff_html|safe }}</td> <td class="diff-before w-full">{{ diff.diff_html|safe }}</td>
@ -43,6 +56,6 @@
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div> </section>
</div> </div>
{% endblock body %} {% endblock body %}

3
view/templates/base.html
View file

@ -18,9 +18,10 @@
src="https://plausible.nolog.cz/js/plausible.js" src="https://plausible.nolog.cz/js/plausible.js"
></script> ></script>
<script src="{{ url_for('static', filename='htmx@1.9.4.min.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 %} {% block head %}{% endblock %}
</head> </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 %}"> <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"> <div class="container flex flex-wrap items-center gap-x-8 gap-y-2">
<a href="/" class="text-inherit"> <a href="/" class="text-inherit">

46
view/templates/index.html
View file

@ -4,7 +4,7 @@
{% block body %} {% block body %}
<div class="bg-white sticky top-0 py-3 border-b z-10 mb-6"> <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"> <form method="get" class="flex gap-x-2">
<input <input
class="text-input w-full max-w-20rem" class="text-input w-full max-w-20rem"
@ -24,27 +24,15 @@
</svg> </svg>
</button> </button>
</form> </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"> <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> <p>Expand diffs</p>
</label> </label>
</form> </section>
</div>
</div> </div>
<div id="diff-list"> <section class="container mb-8">
<div class="container mb-8">
{% for diff in diffs %} {% for diff in diffs %}
<article class="card px-5 py-4 mb-4"> <article class="card px-5 py-4 mb-4">
<p class="flex gap-x-4 gap-y-2 mb-3 flex-wrap shrink-0"> <p class="flex gap-x-4 gap-y-2 mb-3 flex-wrap shrink-0">
@ -60,15 +48,16 @@
</a> </a>
</p> </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="md:hidden">
<div class="mb-2"> <div class="mb-2">
<div class="text-sm text-muted">Before</div> <p class="text-caption">Before</p>
<div class="diff-before text-lg">{{ diff.diff_html|safe }}</div> <p class="diff-before text-lg">{{ diff.diff_html|safe }}</p>
</div> </div>
<div> <div>
<div class="text-sm text-muted">After</div> <p class="text-caption">After</p>
<div class="diff-after text-lg">{{ diff.diff_html|safe }}</div> <p class="diff-after text-lg">{{ diff.diff_html|safe }}</p>
</div> </div>
</div> </div>
@ -82,20 +71,17 @@
<td class="diff-after text-lg">{{ diff.diff_html|safe }}</td> <td class="diff-after text-lg">{{ diff.diff_html|safe }}</td>
</tr> </tr>
</table> </table>
{% else %} </div>
<div class="text-lg">{{ diff.diff_html|safe }}</div>
{% endif %}
</article> </article>
{% endfor %} {% endfor %}
</div> </section>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="container mb-3"> <div class="container mb-3">
{{ pagination.links }} {{ pagination.links }}
</div> </div>
</div> </div>
<div class="container text-sm text-gray-500"> <div class="container text-sm text-gray-500">
{{ pagination.info }} {{ pagination.info }}
</div>
</div> </div>
{% endblock body %} {% endblock body %}