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