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;}

33
view/templates/article_detail.html
View file

@ -7,18 +7,28 @@
<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>
<div class="mb-2"> <p x-bind:class="{ hidden: expandDiffs }">{{ diff.diff_html|safe }}</p>
<p class="text-caption mb-2">Before</p> <div x-bind:class="{ hidden: !expandDiffs }">
<p class="diff-before">{{ diff.diff_html|safe }}</p> <div class="mb-2">
</div> <p class="text-caption mb-2">Before</p>
<div> <p class="diff-before">{{ diff.diff_html|safe }}</p>
<p class="text-caption mb-2">After</p> </div>
<p class="diff-after">{{ diff.diff_html|safe }}</p> <div>
<p class="text-caption mb-2">After</p>
<p class="diff-after">{{ diff.diff_html|safe }}</p>
</div>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
@ -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">

120
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,78 +24,64 @@
</svg> </svg>
</button> </button>
</form> </form>
<form
hx-get="/" <label class="checkbox">
hx-trigger="change" <input type="checkbox" x-model="expandDiffs" x-bind:checked="expandDiffs" />
hx-target="#diff-list" <p>Expand diffs</p>
hx-select="#diff-list" </label>
hx-swap="outerHTML" </section>
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>
</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"> <span class="text-sm font-medium">{{ diff.feed_name }}</span>
<span class="text-sm font-medium">{{ diff.feed_name }}</span> <time class="text-sm font-medium">{{ diff.diff_time }}</time>
<time class="text-sm font-medium">{{ diff.diff_time }}</time> <a class="action-link" href="{{ diff.article_url }}">
<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>
<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
Display current article </a>
</a> <a class="action-link" href="/article/{{ diff.article_id }}">
<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>
<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
Show change history </a>
</a> </p>
</p>
{% if expand_diffs %} <div class="text-lg" x-bind:class="{ hidden: expandDiffs }">{{ diff.diff_html|safe }}</div>
<div class="md:hidden"> <div x-bind:class="{ hidden: !expandDiffs }">
<div class="mb-2"> <div class="md:hidden">
<div class="text-sm text-muted">Before</div> <div class="mb-2">
<div class="diff-before text-lg">{{ diff.diff_html|safe }}</div> <p class="text-caption">Before</p>
</div> <p class="diff-before text-lg">{{ diff.diff_html|safe }}</p>
<div>
<div class="text-sm text-muted">After</div>
<div class="diff-after text-lg">{{ diff.diff_html|safe }}</div>
</div>
</div> </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"> <table class="display-none md:display-table">
<tr> <tr>
<th class="text-caption pr-2">Before</th> <th class="text-caption pr-2">Before</th>
<td class="diff-before text-lg">{{ diff.diff_html|safe }}</td> <td class="diff-before text-lg">{{ diff.diff_html|safe }}</td>
</tr> </tr>
<tr> <tr>
<th class="text-caption pr-2">After</th> <th class="text-caption pr-2">After</th>
<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 class="text-lg">{{ diff.diff_html|safe }}</div>
{% endif %}
</article>
{% endfor %}
</div>
<div class="overflow-x-auto">
<div class="container mb-3">
{{ pagination.links }}
</div> </div>
</article>
{% endfor %}
</section>
<div class="overflow-x-auto">
<div class="container mb-3">
{{ pagination.links }}
</div> </div>
<div class="container text-sm text-gray-500"> </div>
{{ pagination.info }} <div class="container text-sm text-gray-500">
</div> {{ pagination.info }}
</div> </div>
{% endblock body %} {% endblock body %}