Fixes and more styling

This commit is contained in:
Bad Manners 2025-04-13 11:00:36 -03:00
parent 2c44a69ec3
commit 3619063e68
21 changed files with 203 additions and 94 deletions

View file

@ -0,0 +1 @@
<h1 id="pool-title" hx-swap-oob="outerHTML">Pool - {{ pool_name }}</h1>

View file

@ -4,3 +4,4 @@
<link rel="stylesheet" href="/static/water.css" />
<link rel="stylesheet" href="/static/samey.css" />
<meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />
<meta property="og:site_name" content="{{ application_name }}" />

View file

@ -2,7 +2,7 @@
<div>
<label>Tags</label>
{% let tags_value = tags %} {% include "fragments/tags_input.html" %}
<ul class="tags-autocomplete" id="search-autocomplete"></ul>
<ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
</div>
<div>
<label>Title</label>
@ -32,14 +32,14 @@
{% include "fragments/post_source.html" %}
{% endfor %}
</ul>
<button hx-post="/post_source" hx-target="#sources" hx-swap="beforeend">+</button>
<button hx-post="/post_source" hx-target="#sources" hx-swap="beforeend">+ Add source</button>
</div>
<div>
<label>Parent post</label>
<input name="parent_post" type="text" pattern="[0-9]*" value="{% if let Some(parent_id) = post.parent_id %}{{ parent_id }}{% endif %}" />
<input name="parent_post" type="text" pattern="[0-9]*" value="{% if let Some(parent_id) = post.parent_id %}{{ parent_id }}{% endif %}" placeholder="Post ID" />
</div>
<div>
<button>Submit</button>
<button>Save changes</button>
<button hx-get="/post_details/{{ post.id }}">Cancel</button>
<button hx-confirm="Are you sure that you want to delete this post? This can't be undone!" hx-delete="/post/{{ post.id }}" hx-target="body" hx-replace-url="/">Delete post</button>
</div>

View file

@ -3,7 +3,7 @@
<span>No posts in pool.</span>
{% else %}
<ul
class="sortable"
class="reset flex sortable"
hx-put="/pool/{{ pool.id }}/sort"
hx-trigger="end"
hx-vals="js:{old_index: event.oldIndex, new_index: event.newIndex}"
@ -11,11 +11,13 @@
hx-swap="outerHTML"
>
{% for post in posts %}
<li class="pool-post">
<li class="pool-post flex flex-col">
<a href="/post/{{ post.id }}" title="{{ post.tags }}">
<img src="/files/{{ post.thumbnail }}" />
<div>{{ post.rating | upper }}</div>
<div>{{ post.media_type }}</div>
<div class="flex">
<div>{{ post.rating | upper }}</div>
<div>{{ post.media_type }}</div>
</div>
</a>
{% if can_edit %}
<button
@ -23,7 +25,7 @@
hx-target="closest .pool-post"
hx-swap="outerHTML"
>
Remove
Remove from pool
</button>
{% endif %}
</li>

View file

@ -51,6 +51,6 @@
{{ post.uploaded_at }}
</div>
{% if can_edit %}
<button hx-get="/post_details/{{ post.id }}/edit">Edit</button>
<button hx-get="/post_details/{{ post.id }}/edit">Edit post</button>
{% endif %}
</div>

View file

@ -6,6 +6,6 @@
value="{% if let Some(url) = source.url %}{{ url }}{% endif %}"
/>
<button hx-delete="/remove" hx-target="closest li" hx-swap="outerHTML">
-
Remove source
</button>
</li>

View file

@ -0,0 +1,7 @@
<a href="/post/{{ post.id }}" title="{{ post.tags }}">
<img src="/files/{{ post.thumbnail }}" />
<div class="flex">
<div>{{ post.rating | upper }}</div>
<div>{{ post.media_type }}</div>
</div>
</a>

View file

@ -1,2 +1,5 @@
{% include "fragments/tags_input.html" %}
<ul class="tags-autocomplete" hx-swap-oob="outerHTML:.tags-autocomplete"></ul>
<ul
class="reset tags-autocomplete"
hx-swap-oob="outerHTML:.tags-autocomplete"
></ul>

View file

@ -1,14 +1,19 @@
{% include "fragments/post_details.html" %} {% if let Some(parent_post) =
parent_post %}
<article id="parent-post" hx-swap-oob="outerHTML">
<h2>Parent</h2>
<a
href="/post/{{ parent_post.id }}"
title="{% if let Some(tags) = parent_post.tags %}{{ tags }}{% endif %}"
>
<img src="/files/{{ parent_post.thumbnail }}" />
<div>{{ parent_post.rating }}</div>
</a>
<h2>Parent post</h2>
<div style="width: min-content">
<a
href="/post/{{ parent_post.id }}"
title="{% if let Some(tags) = parent_post.tags %}{{ tags }}{% endif %}"
>
<img src="/files/{{ parent_post.thumbnail }}" />
<div class="flex">
<div>{{ parent_post.rating | upper }}</div>
<div>{{ parent_post.media_type }}</div>
</div>
</a>
</div>
</article>
{% else %}
<article id="parent-post" hx-swap-oob="outerHTML" hidden></article>

View file

@ -18,7 +18,7 @@
placeholder="Name"
autofocus
/>
<button type="submit">Create</button>
<button type="submit">Create pool</button>
</form>
</main>
</body>

View file

@ -11,12 +11,12 @@
<h2>Search</h2>
<form method="get" action="/posts/1">
{% let tags_value = "" %} {% include "fragments/tags_input.html" %}
<ul class="tags-autocomplete" id="search-autocomplete"></ul>
<ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
<button type="submit">Search</button>
</form>
</article>
<nav>
<ul>
<ul class="reset flex">
<li>
<a href="/posts/1">Posts</a>
</li>

View file

@ -17,7 +17,7 @@
<label>Password</label>
<input id="password" type="password" name="password" />
</div>
<button type="submit">Submit</button>
<button type="submit">Login</button>
</form>
</main>
</body>

View file

@ -49,7 +49,7 @@
<body>
<div><a href="/">&lt; To home</a></div>
<main>
<h1>Pool - {{ pool.name }}</h1>
<h1 id="pool-title">Pool - {{ pool.name }}</h1>
</main>
<article>
<h2>Posts</h2>
@ -57,23 +57,19 @@
</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>Rename pool</label>
<input
name="pool_name"
type="text"
hx-put="/pool/{{ pool.id }}/name"
hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
hx-swap="none"
placeholder="Name"
pattern="[0-9]*"
value="{{ pool.name }}"
/>
</div>
<div>
<label>Is public pool?</label>
<input
@ -89,6 +85,23 @@
value="true"
/>
</div>
<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 post</button>
</div>
</form>
</article>
{% endif %}
</body>

View file

@ -9,21 +9,8 @@
<article>
<h2>Search</h2>
<form method="get" action="/posts">
<input
class="tags"
type="text"
id="search-tags"
name="tags"
placeholder="Tags"
hx-post="/search_tags"
hx-trigger="input changed"
hx-target="next .tags-autocomplete"
hx-vals="js:{selection_end: event.target.selectionEnd}"
hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
value="{% if let Some(tags_text) = tags_text %}{{ tags_text }}{% endif %}"
autofocus
/>
<ul class="tags-autocomplete" id="search-autocomplete"></ul>
{% let tags_value = tags_text.clone().unwrap_or("".into()) %} {% include "fragments/tags_input.html" %}
<ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
<button type="submit">Search</button>
</form>
</article>
@ -45,7 +32,7 @@
<div>No posts found!</div>
{% else %}
<div>
<ul>
<ul class="reset flex">
{% for post in posts %}
<li>
<a
@ -53,8 +40,10 @@
title="{% if let Some(tags) = post.tags %}{{ tags }}{% endif %}"
>
<img src="/files/{{ post.thumbnail }}" />
<div>{{ post.rating | upper }}</div>
<div>{{ post.media_type }}</div>
<div class="flex">
<div>{{ post.rating | upper }}</div>
<div>{{ post.media_type }}</div>
</div>
</a>
</li>
{% endfor %}

View file

@ -15,7 +15,7 @@
type="text"
value="{{ application_name }}"
/>
<button>Submit</button>
<button>Save changes</button>
</form>
</main>
</body>

View file

@ -10,14 +10,14 @@
<h1>Upload media</h1>
<form method="post" action="/upload" enctype="multipart/form-data">
{% let tags_value = "" %} {% include "fragments/tags_input.html" %}
<ul class="tags-autocomplete" id="upload-autocomplete"></ul>
<ul class="reset tags-autocomplete" id="upload-autocomplete"></ul>
<input
type="file"
id="media-file"
name="media-file"
accept=".jpg, .jpeg, .png, .webp, .gif, .mp4, .webm, .mkv, .mov"
/>
<button type="submit">Submit</button>
<button type="submit">Create post</button>
</form>
</main>
</body>

View file

@ -3,37 +3,25 @@
<head>
<title>Post #{{ post.id }} - {{ application_name }}</title>
{% include "fragments/common_headers.html" %}
<meta property="og:site_name" content="{{ application_name }}" />
<meta
property="og:title"
content="{% if let Some(title) = post.title %}{{ title }}{% endif %}"
/>
{% if let Some(title) = post.title %}<meta property="og:title" content="{{ title }}"/>{% else %}<meta property="og:title" content="{{ tags_post }}" />{% endif %}
<meta property="og:url" content="/post/{{ post.id }}" />
<meta
property="og:description"
content="{% if let Some(description) = post.description %}{{ description }}{% endif %}"
/>
<meta
property="twitter:title"
content="{% if let Some(title) = post.title %}{{ title }}{% endif %}"
/>
{% if let Some(description) = post.description %}<meta property="og:description" content="{{ description | markdown | escape }}" />{% endif %}
{% match post.media_type.as_ref() %} {% when "image" %}
<meta property="og:image" content="/files/{{ post.media }}" />
<meta property="og:image:width" content="{{ post.width }}" />
<meta property="og:image:height" content="{{ post.height }}" />
<meta property="og:image:alt" content="{{ tags_post }}" />
<meta property="twitter:card" content="summary_large_image" />
{% if let Some(title) = post.title %}<meta property="twitter:title" content="{{ title }}"/>{% else %}<meta property="twitter:title" content="{{ tags_post }}"/>{% endif %}
{% if let Some(description) = post.description %}<meta property="twitter:description" content="{{ description }}" />{% endif %}
<meta property="twitter:image" content="/files/{{ post.media }}" />
{% when "video" %}
<meta property="og:type" content="video.other">
<meta property="og:video" content="/files/{{ post.media }}" />
<meta property="og:video:width" content="{{ post.width }}" />
<meta property="og:video:height" content="{{ post.height }}" />
<meta property="og:video:alt" content="{{ tags_post }}" />
<meta property="og:video:type" content="video/mp4" />
<meta property="twitter:card" content="player" />
<meta name="twitter:player" content="/files/{{ post.media }}" />
<meta name="twitter:player:width" content="{{ post.width }}" />
<meta name="twitter:player:height" content="{{ post.height }}" />
<meta name="twitter:image" content="/files/{{ post.thumbnail }}" />
{% else %} {% endmatch %}
</head>
<body>
@ -54,7 +42,7 @@
value="{% if let Some(tags_text) = tags_text %}{{ tags_text }}{% endif %}"
autofocus
/>
<ul class="tags-autocomplete" id="search-autocomplete"></ul>
<ul class="reset tags-autocomplete" id="search-autocomplete"></ul>
<button type="submit">Search</button>
</form>
</article>
@ -74,7 +62,7 @@
</article>
<main>
<h1>View post #{{ post.id }}</h1>
<div>
<div class="center-item">
{% match post.media_type.as_ref() %}{% when "image" %}{% include
"fragments/get_image_media.html" %}{% when "video" %}{% include
"fragments/get_video_media.html" %}{% else %}{% endmatch %}
@ -86,25 +74,31 @@
</article>
{% if let Some(parent_post) = parent_post %}
<article id="parent-post">
<h2>Parent</h2>
<a href="/post/{{ parent_post.id }}" title="{% if let Some(tags) = parent_post.tags %}{{ tags }}{% endif %}">
<img src="/files/{{ parent_post.thumbnail }}" />
<div>{{ parent_post.rating }}</div>
<div>{{ parent_post.media_type }}</div>
</a>
<h2>Parent post</h2>
<div style="width: min-content">
<a href="/post/{{ parent_post.id }}" title="{% if let Some(tags) = parent_post.tags %}{{ tags }}{% endif %}">
<img src="/files/{{ parent_post.thumbnail }}" />
<div class="flex">
<div>{{ parent_post.rating | upper }}</div>
<div>{{ parent_post.media_type }}</div>
</div>
</a>
</div>
</article>
{% else %}
<article id="parent-post" hidden></article>
{% endif %} {% if !children_posts.is_empty() %}
<article>
<h2>Child posts</h2>
<ul>
<ul class="flex reset">
{% for child_post in children_posts %}
<li>
<a href="/post/{{ child_post.id }}" title="{% if let Some(tags) = child_post.tags %}{{ tags }}{% endif %}">
<img src="/files/{{ child_post.thumbnail }}" />
<div>{{ child_post.rating | upper }}</div>
<div>{{ child_post.media_type }}</div>
<div class="flex">
<div>{{ child_post.rating | upper }}</div>
<div>{{ child_post.media_type }}</div>
</div>
</a>
</li>
{% endfor %}