badmanners/samey
1
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Initial progress on styling

Browse source
This commit is contained in:
Bad Manners 2025-04-12 18:15:03 -03:00
parent c650c27825
commit 2c44a69ec3
38 changed files with 748 additions and 412 deletions
Download patch file Download diff file Expand all files Collapse all files

95
templates/pages/pool.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pool - {{ pool.name }} - {{ application_name }}</title>
{% include "fragments/common_headers.html" %}
<script src="/static/sortable.js"></script>
<meta property="og:title" content="{{ pool.name }}" />
<meta property="og:url" content="/pool/{{ pool.id }}" />
<meta property="twitter:title" content="{{ pool.name }}" />
<meta
property="og:description"
content="Pool with {{ posts.len() }} post(s)."
/>
{% if let Some(post) = posts.first() %}
<meta property="og:image" content="/files/{{ post.thumbnail }}" />
<meta property="twitter:image:src" content="/files/{{ post.thumbnail }}" />
{% endif %} {% if can_edit %}
<script>
htmx.onLoad(function (content) {
var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
var sortableInstance = new Sortable(sortable, {
animation: 150,
ghostClass: "blue-background-class",
// Make the `.htmx-indicator` unsortable
filter: ".htmx-indicator",
onMove: function (evt) {
return evt.related.className.indexOf("htmx-indicator") === -1;
},
// Disable sorting on the `end` event
onEnd: function (evt) {
console.log(evt);
this.option("disabled", true);
},
});
// Re-enable sorting on the `htmx:afterSwap` event
sortable.addEventListener("htmx:afterSwap", function () {
sortableInstance.option("disabled", false);
});
}
});
</script>
{% endif %}
</head>
<body>
<div><a href="/">&lt; To home</a></div>
<main>
<h1>Pool - {{ pool.name }}</h1>
</main>
<article>
<h2>Posts</h2>
{% include "fragments/pool_posts.html" %}
</article>
{% if can_edit %}
<article>
<form
hx-post="/pool/{{ pool.id }}/post"
hx-target="#pool-posts"
hx-swap="outerHTML"
>
<div>
<label>Add post</label>
<input
id="add-post-input"
type="text"
name="post_id"
placeholder="Post ID"
pattern="[0-9]*"
/>
<button>Add</button>
</div>
</form>
<div>
<label>Is public pool?</label>
<input
name="is_public"
type="checkbox"
hx-put="/pool/{{ pool.id }}/public"
{%
if
pool.is_public
%}checked{%
endif
%}
value="true"
/>
</div>
</article>
{% endif %}
</body>
</html>