Implement expand diff togle with AlpineJS
This commit is contained in:
parent
901817409e
commit
64e2f4d622
6 changed files with 83 additions and 83 deletions
|
|
@ -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
5
view/static/alpinejs@3.12.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -7,18 +7,28 @@
|
|||
<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>
|
||||
<div class="mb-2">
|
||||
<p class="text-caption mb-2">Before</p>
|
||||
<p class="diff-before">{{ diff.diff_html|safe }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption mb-2">After</p>
|
||||
<p class="diff-after">{{ diff.diff_html|safe }}</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>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption mb-2">After</p>
|
||||
<p class="diff-after">{{ diff.diff_html|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,78 +24,64 @@
|
|||
</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 "" }} />
|
||||
<p>Expand diffs</p>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" x-model="expandDiffs" x-bind:checked="expandDiffs" />
|
||||
<p>Expand diffs</p>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="diff-list">
|
||||
<div 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">
|
||||
<span class="text-sm font-medium">{{ diff.feed_name }}</span>
|
||||
<time class="text-sm font-medium">{{ diff.diff_time }}</time>
|
||||
<a class="action-link" href="{{ diff.article_url }}">
|
||||
<svg class="w-4 fill-current" viewBox="0 0 24 24"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>
|
||||
Display current article
|
||||
</a>
|
||||
<a class="action-link" href="/article/{{ diff.article_id }}">
|
||||
<svg class="w-4 fill-current" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path></svg>
|
||||
Show change history
|
||||
</a>
|
||||
</p>
|
||||
<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">
|
||||
<span class="text-sm font-medium">{{ diff.feed_name }}</span>
|
||||
<time class="text-sm font-medium">{{ diff.diff_time }}</time>
|
||||
<a class="action-link" href="{{ diff.article_url }}">
|
||||
<svg class="w-4 fill-current" viewBox="0 0 24 24"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>
|
||||
Display current article
|
||||
</a>
|
||||
<a class="action-link" href="/article/{{ diff.article_id }}">
|
||||
<svg class="w-4 fill-current" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path></svg>
|
||||
Show change history
|
||||
</a>
|
||||
</p>
|
||||
|
||||
{% if expand_diffs %}
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-muted">After</div>
|
||||
<div class="diff-after text-lg">{{ diff.diff_html|safe }}</div>
|
||||
</div>
|
||||
<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">
|
||||
<p class="text-caption">Before</p>
|
||||
<p class="diff-before text-lg">{{ diff.diff_html|safe }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-caption">After</p>
|
||||
<p class="diff-after text-lg">{{ diff.diff_html|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="display-none md:display-table">
|
||||
<tr>
|
||||
<th class="text-caption pr-2">Before</th>
|
||||
<td class="diff-before text-lg">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-caption pr-2">After</th>
|
||||
<td class="diff-after text-lg">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="text-lg">{{ diff.diff_html|safe }}</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<div class="container mb-3">
|
||||
{{ pagination.links }}
|
||||
<table class="display-none md:display-table">
|
||||
<tr>
|
||||
<th class="text-caption pr-2">Before</th>
|
||||
<td class="diff-before text-lg">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-caption pr-2">After</th>
|
||||
<td class="diff-after text-lg">{{ diff.diff_html|safe }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<div class="container mb-3">
|
||||
{{ pagination.links }}
|
||||
</div>
|
||||
<div class="container text-sm text-gray-500">
|
||||
{{ pagination.info }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container text-sm text-gray-500">
|
||||
{{ pagination.info }}
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue