Initial progress on styling

templates/fragments/add_post_to_pool.html

@@ -0,0 +1,9 @@
+{% include "fragments/pool_posts.html" %}
+<input
+  id="add-post-input"
+  name="post_id"
+  type="text"
+  pattern="[0-9]*"
+  hx-swap-oob="outerHTML"
+  value=""
+/>

templates/fragments/common_headers.html

@@ -0,0 +1,6 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<script src="/static/htmx.js"></script>
+<link rel="stylesheet" href="/static/water.css" />
+<link rel="stylesheet" href="/static/samey.css" />
+<meta name="generator" content="Samey {{ env!("CARGO_PKG_VERSION") }}" />

templates/fragments/edit_post_details.html

@@ -0,0 +1,46 @@
+<form hx-put="/post_details/{{ post.id }}" hx-target="this" hx-swap="outerHTML">
+  <div>
+    <label>Tags</label>
+    {% let tags_value = tags %} {% include "fragments/tags_input.html" %}
+    <ul class="tags-autocomplete" id="search-autocomplete"></ul>
+  </div>
+  <div>
+    <label>Title</label>
+    <input name="title" type="text" maxlength="100" placeholder="Title" value="{% if let Some(title) = post.title %}{{ title }}{% endif %}" />
+  </div>
+  <div>
+    <label>Description</label>
+    <textarea name="description" placeholder="Description in Markdown">{% if let Some(description) = post.description %}{{ description }}{% endif %}</textarea>
+  </div>
+  <div>
+    <label>Is public post?</label>
+    <input name="is_public" type="checkbox" {% if post.is_public %}checked{% endif %} value="true" />
+  </div>
+  <div>
+    <label>Rating</label>
+    <select name="rating">
+      <option value="u" {% if post.rating == "u" %}selected{% endif %}>Unrated</option>
+      <option value="s" {% if post.rating == "s" %}selected{% endif %}>Safe</option>
+      <option value="q" {% if post.rating == "q" %}selected{% endif %}>Questionable</option>
+      <option value="e" {% if post.rating == "e" %}selected{% endif %}>Explicit</option>
+    </select>
+  </div>
+  <div>
+    <label>Source(s)</label>
+    <ul id="sources">
+      {% for source in sources %}
+      {% include "fragments/post_source.html" %}
+      {% endfor %}
+    </ul>
+    <button hx-post="/post_source" hx-target="#sources" hx-swap="beforeend">+</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 %}" />
+  </div>
+  <div>
+    <button>Submit</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>
+</div>

templates/fragments/get_full_image_media.html

@@ -0,0 +1,7 @@
+<img
+  hx-get="/media/{{ post.id }}"
+  hx-swap="outerHTML"
+  id="media"
+  src="/files/{{ post.media }}"
+  style="width: {{ post.width }}px; height: {{ post.height }}px; aspect-ratio: {{ post.width }} / {{ post.height }}; cursor: zoom-out"
+/>

templates/fragments/get_image_media.html

@@ -0,0 +1,7 @@
+<img
+  hx-get="/media/{{ post.id }}/full"
+  hx-swap="outerHTML"
+  id="media"
+  src="/files/{{ post.media }}"
+  style="width: 100%; height: 100%; max-width: {{ post.width }}px; max-height: {{ post.height }}px; aspect-ratio: {{ post.width }} / {{ post.height }}; cursor: zoom-in"
+/>

templates/fragments/get_video_media.html

@@ -0,0 +1,6 @@
+<video
+  id="media"
+  src="/files/{{ post.media }}"
+  controls="controls"
+  style="width: 100%; height: 100%; max-width: {{ post.width }}px; max-height: {{ post.height }}px; aspect-ratio: {{ post.width }} / {{ post.height }}"
+/>

templates/fragments/pool_posts.html

@@ -0,0 +1,33 @@
+<div id="pool-posts">
+  {% if posts.is_empty() %}
+  <span>No posts in pool.</span>
+  {% else %}
+  <ul
+    class="sortable"
+    hx-put="/pool/{{ pool.id }}/sort"
+    hx-trigger="end"
+    hx-vals="js:{old_index: event.oldIndex, new_index: event.newIndex}"
+    hx-target="#pool-posts"
+    hx-swap="outerHTML"
+  >
+    {% for post in posts %}
+    <li class="pool-post">
+      <a href="/post/{{ post.id }}" title="{{ post.tags }}">
+        <img src="/files/{{ post.thumbnail }}" />
+        <div>{{ post.rating | upper }}</div>
+        <div>{{ post.media_type }}</div>
+      </a>
+      {% if can_edit %}
+      <button
+        hx-delete="/pool_post/{{ post.pool_post_id }}"
+        hx-target="closest .pool-post"
+        hx-swap="outerHTML"
+      >
+        Remove
+      </button>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+</div>

templates/fragments/post_details.html

@@ -0,0 +1,56 @@
+<div id="post-details" hx-target="this" hx-swap="outerHTML">
+  <div>
+    <label>Title</label>
+    {% if let Some(title) = post.title %}{{ title }}{% else %}<em>None</em>{%
+    endif %}
+  </div>
+  <div>
+    <label>Description</label>
+    {% if let Some(description) = post.description %}{{ description | markdown
+    }}{% else %}
+    <p><em>None</em></p>
+    {% endif %}
+  </div>
+  <div>
+    <label>Is public?</label>
+    {% if post.is_public %}Yes{% else %}No{% endif %}
+  </div>
+  <div>
+    <label>Rating</label>
+    {% match post.rating.as_ref() %} {% when "u" %} Unrated {% when "s" %} Safe
+    {% when "q" %} Questionable {% when "e" %} Explicit {% else %} Unknown {%
+    endmatch %}
+  </div>
+  <div>
+    <label>Source(s)</label>
+    {% if sources.is_empty() %}
+    <em>None</em>{% else %}
+    <ul>
+      {% for source in sources %}
+      <li id="source-{{ source.id }}">
+        <a href="{{ source.url }}">{{ source.url }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  </div>
+  <div>
+    <label>Type</label>
+    {{ post.media_type | capitalize }}
+  </div>
+  <div>
+    <label>Width</label>
+    {{ post.width }}px
+  </div>
+  <div>
+    <label>Height</label>
+    {{ post.height }}px
+  </div>
+  <div>
+    <label>Upload date</label>
+    {{ post.uploaded_at }}
+  </div>
+  {% if can_edit %}
+  <button hx-get="/post_details/{{ post.id }}/edit">Edit</button>
+  {% endif %}
+</div>

templates/fragments/post_source.html

@@ -0,0 +1,11 @@
+<li>
+  <input
+    name="source"
+    type="url"
+    maxlength="200"
+    value="{% if let Some(url) = source.url %}{{ url }}{% endif %}"
+  />
+  <button hx-delete="/remove" hx-target="closest li" hx-swap="outerHTML">
+    -
+  </button>
+</li>

templates/fragments/search_tags.html

@@ -0,0 +1,12 @@
+{% for tag in tags %}
+<li>
+  <button
+    hx-post="/select_tag"
+    hx-target="previous .tags"
+    hx-swap="outerHTML"
+    hx-vals='{"selection_end": {{ selection_end }}, "new_tag": {{ tag.value | json | safe }}}'
+  >
+    {{ tag.name }}
+  </button>
+</li>
+{% endfor %}

templates/fragments/select_tag.html

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

templates/fragments/submit_post_details.html

@@ -0,0 +1,22 @@
+{% 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>
+</article>
+{% else %}
+<article id="parent-post" hx-swap-oob="outerHTML" hidden></article>
+{% endif %}
+<ul id="tags-list" hx-swap-oob="outerHTML">
+  {% for tag in tags %}
+  <li>
+    <a href="/posts?tags={{ tag.name }}">{{ tag.name }}</a>
+  </li>
+  {% endfor %}
+</ul>

templates/fragments/tags_input.html

@@ -0,0 +1,15 @@
+<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="{{ tags_value }}"
+  aria-autocomplete="list"
+  aria-controls="search-autocomplete"
+/>