Redesign #2

app.py

@@ -894,9 +894,11 @@ def gallery(id):

                                
                                
                                
                            
                                
                                    
                                        
                                            894  
                                                current_user = db.session.get(User, flask.session.get("username"))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            895  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            896  
                                                have_permission = current_user and (current_user == gallery.owner or current_user.admin or UserInGallery.query.filter_by(user=current_user, gallery=gallery).first())
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        897 +
                                            have_extended_permission = current_user and (current_user == gallery.owner or current_user.admin)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            898  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            899  
                                                return flask.render_template("gallery.html", gallery=gallery,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        899 -
                                                                         have_permission=have_permission)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        900 +
                                                                         have_permission=have_permission,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        901 +
                                                                         have_extended_permission=have_extended_permission)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            902  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            903  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            904  
                                            @app.route("/create-gallery")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -248,12 +248,33 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            248  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            249  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            250  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        251 +
                                        @keyframes slide-in {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        252 +
                                            from {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        253 +
                                                transform: translateX(-1.5rem);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        254 +
                                                opacity: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        255 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        256 +
                                            to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        257 +
                                                transform: translateX(0);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        258 +
                                                opacity: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        259 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        260 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        261 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        262 +
                                        @keyframes slide-out {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        263 +
                                            from {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        264 +
                                                transform: translateX(0);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        265 +
                                                opacity: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        266 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        267 +
                                            to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        268 +
                                                transform: translateX(-1.5rem);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        269 +
                                                opacity: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        270 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        271 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        272 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            273  
                                            @media (prefers-reduced-motion: no-preference) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            274  
                                                .thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            275  
                                                #annotation-zone {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            276  
                                                    view-transition-name: thumbnail;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            277  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        256 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            278  
                                                ::view-transition-old(root),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            279  
                                                ::view-transition-new(root) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            280  
                                                    transform-origin: top;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -592,6 +613,11 @@ dd {

                                
                                
                                
                            
                                
                                    
                                        
                                            613  
                                                margin: 0 auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            614  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            615  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        616 +
                                        #picture-view > x-frame {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        617 +
                                            flex: 1 0 var(--width);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        618 +
                                            margin: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        619 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        620 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            621  
                                            #picture-actions {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            622  
                                                --width: 256px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            623  
                                                position: sticky;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/default.html

@@ -61,7 +61,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            61  
                                                        <nav class="navbar" id="desktop-navbar">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            62  
                                                            <ul>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            63  
                                                                {% if back_url %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 -
                                                                <li id="back-button">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                                                <li id="back-button-desktop">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            65  
                                                                        <a class="button button-flat button-neutral" href="{{ back_url | safe }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                                                            <iconify-icon icon="ic:baseline-arrow-back">Back</iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                                        </a>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/gallery.html

@@ -4,73 +4,93 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                            {% block title %}Gallery {{ gallery.title }} | {{ site_name }}{% endblock %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                            {% block content %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                            <x-frame style="--width: 768px" class="vbox">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 -
                                                <h1>{{ gallery.title }}</h1>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 -
                                                <p>{{ gallery.description }}</p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 -
                                                <p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 -
                                                    <a href="/gallery/{{ gallery.id }}/users">Users</a> {% if have_permission %} |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 -
                                                    <a href="/gallery/{{ gallery.id }}/edit">Edit</a>{% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 -
                                                </p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 -
                                                {% if have_permission %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 -
                                                    <form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/add-picture">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                                        <input name="picture_id" type="text" placeholder="Picture ID" required aria-label="Picture ID">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                                        <button type="submit">Add picture</button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 -
                                                    </form>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 -
                                                    <details>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 -
                                                        <summary>Add from query</summary>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 -
                                                        <form method="POST" action="/gallery/{{ gallery.id }}/add-pictures-from-query">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 -
                                                            <label>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 -
                                                                <span class="required-asterisk">Query YAML</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 -
                                                                <textarea name="query" required rows="8"></textarea>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 -
                                                            </label>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 -
                                                            <button type="submit">Add pictures</button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        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>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 -
                                                    </details>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 -
                                                {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 -
                                                <h2>Pictures</h2>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 -
                                                <ul class="thumbnail-list">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 -
                                                    {% for picture in gallery.pictures %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 -
                                                        <li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 -
                                                            <a href="/picture/{{ picture.resource.id }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 -
                                                                <div class="annotation-zone">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 -
                                                                    <img src="/raw/picture/{{ picture.resource.id }}" alt="{{ picture.resource.title }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 -
                                                                    {% for region in picture.resource.regions %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 -
                                                                        {% if region.json.type == "bbox" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 -
                                                                            <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 -
                                                                                <rect x="{{ region.json.shape.x * picture.resource.width }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 -
                                                                                      y="{{ region.json.shape.y * picture.resource.height }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 -
                                                                                      width="{{ region.json.shape.w * picture.resource.width }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 -
                                                                                      height="{{ region.json.shape.h * picture.resource.height }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 -
                                                                                      fill="none" class="shape-bbox shape"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 -
                                                                                ></rect>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 -
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 -
                                                                        {% elif region.json.type == "polygon" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 -
                                                                            <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 -
                                                                                <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>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 -
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 -
                                                                        {% elif region.json.type == "polyline" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 -
                                                                            <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 -
                                                                                <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>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 -
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 -
                                                                        {% elif region.json.type == "point" %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 -
                                                                            <svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 -
                                                                                <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>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 -
                                                                            </svg>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 -
                                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 -
                                                                    {% endfor %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                                                </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 -
                                                                <div class="list-detail">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 -
                                                                    {{ picture.resource.title }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        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 }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 +
                                                                                          y="{{ region.json.shape.y * picture.resource.height }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                                                                          width="{{ region.json.shape.w * picture.resource.width }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 +
                                                                                          height="{{ region.json.shape.h * picture.resource.height }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                                                                          fill="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 +
                                                                        <button type="submit" class="button-flat">Remove</button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        89 +
                                                                    </form>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            90  
                                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 -
                                                            </a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 -
                                                            <div class="list-more">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 -
                                                                <form action="/gallery/{{ gallery.id }}/remove-picture" method="POST">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 -
                                                                    <input type="hidden" name="picture_id" value="{{ picture.resource.id }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 -
                                                                    <button type="submit" class="button-flat">Remove</button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 -
                                                                </form>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 -
                                                            </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 -
                                                        </li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 -
                                                    {% endfor %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 -
                                                </ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 -
                                            </x-frame>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 +
                                                            </li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 +
                                                        {% endfor %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                                    </ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 +
                                                </x-frame>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 +
                                            </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            96  
                                            {% endblock %}