gallery.html
HTML document, ASCII text
1{% extends "default.html" %} 2 3{% block nav_title %}{{ gallery.title }}{% endblock %} 4{% block title %}Gallery {{ gallery.title }} | {{ site_name }}{% endblock %} 5 6{% block content %} 7 8<div id="picture-view"> 9<x-frame id="picture-actions"> 10<ul class="action-list"> 11<li><a href="/gallery/{{ gallery.id }}/users"> 12<iconify-icon icon="mdi:user"></iconify-icon>Users 13</a></li> 14{% if have_extended_permission %} 15<li><a href="/gallery/{{ gallery.id }}/edit"> 16<iconify-icon icon="mdi:edit"></iconify-icon>Edit 17</a></li> 18{% endif %} 19{% if have_extended_permission %} 20<li><details> 21<summary> 22<iconify-icon icon="mdi:delete"></iconify-icon>Delete 23</summary> 24<a href="/gallery/{{ gallery.id }}/delete">Confirm deletion</a> 25</details></li> 26{% endif %} 27</ul> 28</x-frame> 29<x-frame style="--width: 768px" class="vbox"> 30<h1>{{ gallery.title }}</h1> 31<p>owned by <a href="/profile/{{ gallery.owner.username }}">{{ gallery.owner.formatted_name }}</a></p> 32<p>{{ gallery.description }}</p> 33{% if have_permission %} 34<form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/add-picture"> 35<input name="picture_id" type="text" placeholder="Picture ID" required aria-label="Picture ID"> 36<button type="submit">Add picture</button> 37</form> 38<details> 39<summary>Add from query</summary> 40<form method="POST" action="/gallery/{{ gallery.id }}/add-pictures-from-query"> 41<label> 42<span class="required-asterisk">Query YAML</span> 43<textarea name="query" required rows="8"></textarea> 44</label> 45<button type="submit">Add pictures</button> 46</form> 47</details> 48{% endif %} 49<h2>Pictures</h2> 50<ul class="thumbnail-list"> 51{% for picture in gallery.pictures %} 52<li> 53<a href="/picture/{{ picture.resource.id }}"> 54<div class="annotation-zone"> 55<img src="/raw/picture/{{ picture.resource.id }}" alt="{{ picture.resource.title }}"> 56{% for region in picture.resource.regions %} 57{% if region.json.type == "bbox" %} 58<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 59<rect x="{{ region.json.shape.x * picture.resource.width }}" 60y="{{ region.json.shape.y * picture.resource.height }}" 61width="{{ region.json.shape.w * picture.resource.width }}" 62height="{{ region.json.shape.h * picture.resource.height }}" 63fill="none" class="shape-bbox shape" 64></rect> 65</svg> 66{% elif region.json.type == "polygon" %} 67<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 68<polygon points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon> 69</svg> 70{% elif region.json.type == "polyline" %} 71<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 72<polyline points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline> 73</svg> 74{% elif region.json.type == "point" %} 75<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 76<circle cx="{{ region.json.shape.x * picture.resource.width }}" cy="{{ region.json.shape.y * picture.resource.height }}" r="0" fill="none" class="shape-point shape"></circle> 77</svg> 78{% endif %} 79{% endfor %} 80</div> 81<div class="list-detail"> 82{{ picture.resource.title }} 83</div> 84</a> 85<div class="list-more"> 86<form action="/gallery/{{ gallery.id }}/remove-picture" method="POST"> 87<input type="hidden" name="picture_id" value="{{ picture.resource.id }}"> 88{% if have_permission %} 89<button type="submit" class="button-flat"><iconify-icon icon="mdi:close">Remove</iconify-icon></button> 90{% endif %} 91</form> 92</div> 93</li> 94{% endfor %} 95</ul> 96</x-frame> 97</div> 98{% endblock %}