diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html
index 51102d2..b52c5d6 100644
--- a/frontends/etiquette_flask/templates/album.html
+++ b/frontends/etiquette_flask/templates/album.html
@@ -7,12 +7,33 @@ h2, h3
{
margin-top: 0;
}
+#hierarchy_self
+{
+ display: grid;
+ grid-template:
+ "metadata thumbnail" auto
+ /1fr auto;
+}
+#album_metadata
+{
+ grid-area: metadata;
+ word-break: break-word;
+}
+#album_thumbnail
+{
+ grid-area: thumbnail;
+ align-self: center;
+}
+#album_thumbnail img
+{
+ max-height: 150px;
+}
#album_metadata h2 .editor_input
{
font-size: inherit;
font-weight: inherit;
}
-#description_text
+#album_metadata #description_text
{
font-family: initial;
padding: 8px;
@@ -129,6 +150,8 @@ const ALBUM_ID = undefined;
+
+
@@ -215,15 +238,20 @@ const ALBUM_ID = undefined;
>
{{-album.description-}}
+
+ {% set author = album.get_author() %}
+ {% if author is not none %}
+
Author: {{author.display_name}}
+ {% endif %}
+
+ Created on {{album.created|timestamp_to_naturaldate}}.
+
+
+
+ {%- if album.thumbnail_photo %}
+
+ {% endif -%}
-
- {% set author = album.get_author() %}
- {% if author is not none %}
- Author: {{author.display_name}}
- {% endif %}
-
- Created on {{album.created|timestamp_to_naturaldate}}.
-
@@ -396,6 +424,30 @@ function add_album_datalist_on_load(datalist)
input.setAttribute("list", "album_autocomplete_datalist");
}
album_autocomplete.on_load_hooks.push(add_album_datalist_on_load);
+
+function add_photo_toolbox_entries()
+{
+ const photo_cards = document.getElementsByClassName("photo_card");
+ for (const photo_card of photo_cards)
+ {
+ const photo_id = photo_card.dataset.id;
+ const toolbox = photo_card.getElementsByClassName("photo_card_tools")[0];
+ const toolbutton = photo_card.getElementsByClassName("photo_card_toolbutton")[0];
+ toolbutton.classList.remove("hidden");
+ const button = document.createElement("button");
+ button.innerText = "Set as Album thumbnail";
+ button.onclick = function(event)
+ {
+ api.albums.set_thumbnail_photo(ALBUM_ID, photo_id, common.refresh_or_alert);
+ }
+ toolbox.appendChild(button);
+ }
+}
+function on_pageload()
+{
+ add_photo_toolbox_entries();
+}
+document.addEventListener("DOMContentLoaded", on_pageload);
{% endif %} {## Shared ############################################################################}