Add view transitions (disabled), fix bug

app.py

@@ -6,7 +6,7 @@ from flask_sqlalchemy import SQLAlchemy

                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                            from flask_bcrypt import Bcrypt
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                            from flask_httpauth import HTTPBasicAuth
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                            from markupsafe import escape, Markup
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 -
                                        from flask_migrate import Migrate
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                        from flask_migrate import Migrate, current
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            from jinja2_fragments.flask import render_block
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            from sqlalchemy.orm import backref
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            import sqlalchemy.dialects.postgresql
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -278,7 +278,7 @@ def profile(username):

                                
                                
                                
                            
                                
                                    
                                        
                                            278  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            279  
                                                user = db.session.get(User, username)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            280  
                                                if user is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        281 -
                                                return flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        281 +
                                                flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            282  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            283  
                                                return flask.render_template("profile.html", user=user)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            284  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -313,7 +313,7 @@ def upload_post():

                                
                                
                                
                            
                                
                                    
                                        
                                            313  
                                            def picture(id):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            314  
                                                resource = db.session.get(PictureResource, id)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            315  
                                                if resource is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        316 -
                                                return flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        316 +
                                                flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            317  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            318  
                                                image = Image.open(path.join(config.DATA_PATH, "pictures", str(resource.id)))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            319  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -327,11 +327,13 @@ def picture(id):

                                
                                
                                
                            
                                
                                    
                                        
                                            327  
                                            def annotate_picture(id):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            328  
                                                resource = db.session.get(PictureResource, id)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            329  
                                                current_user = db.session.get(User, flask.session.get("username"))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        330 +
                                            if current_user is None:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        331 +
                                                flask.abort(401)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            332  
                                                if resource.author != current_user and not current_user.admin:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        331 -
                                                return flask.abort(403)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        333 +
                                                flask.abort(403)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            334  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            335  
                                                if resource is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        334 -
                                                return flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        336 +
                                                flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            337  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            338  
                                                return flask.render_template("picture-annotation.html", resource=resource,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            339  
                                                                             file_extension=mimetypes.guess_extension(resource.file_format))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -341,11 +343,11 @@ def annotate_picture(id):

                                
                                
                                
                            
                                
                                    
                                        
                                            343  
                                            def save_annotations(id):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            344  
                                                resource = db.session.get(PictureResource, id)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            345  
                                                if resource is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        344 -
                                                return flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        346 +
                                                flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            347  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            348  
                                                current_user = db.session.get(User, flask.session.get("username"))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            349  
                                                if resource.author != current_user and not current_user.admin:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        348 -
                                                return flask.abort(403)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        350 +
                                                flask.abort(403)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            351  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            352  
                                                # Delete all previous annotations
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            353  
                                                db.session.query(PictureRegion).filter_by(resource_id=id).delete()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -375,7 +377,7 @@ def save_annotations(id):

                                
                                
                                
                            
                                
                                    
                                        
                                            377  
                                            def get_annotations(id):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            378  
                                                resource = db.session.get(PictureResource, id)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            379  
                                                if resource is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        378 -
                                                return flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        380 +
                                                flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            381  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            382  
                                                regions = db.session.query(PictureRegion).filter_by(resource_id=id).all()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            383  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -395,7 +397,7 @@ def get_annotations(id):

                                
                                
                                
                            
                                
                                    
                                        
                                            397  
                                            def raw_picture(id):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            398  
                                                resource = db.session.get(PictureResource, id)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            399  
                                                if resource is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        398 -
                                                return flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        400 +
                                                flask.abort(404)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            401  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            402  
                                                response = flask.send_from_directory(path.join(config.DATA_PATH, "pictures"), str(resource.id))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            403  
                                                response.mimetype = resource.file_format
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -7,6 +7,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                                --text-softer: #0000009A;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                                --text-faint: #00000066;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                                --color-shape-label: #0097A7;                    --color-shape-label-text: #ffffff;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                            /*view-transition-name: root;*/
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        nav {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                            /*view-transition-name: nav;*/
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                            p {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -161,3 +166,44 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            166  
                                                fill-opacity: 0.1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            167  
                                                stroke-opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            168  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        169 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        170 +
                                        /* Disabled for now, until there is more navigation that would benefit from transitions */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        171 +
                                        /*
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        172 +
                                        @view-transition {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        173 +
                                            navigation: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        174 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        175 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        176 +
                                        @keyframes move-out {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        177 +
                                            from {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        178 +
                                                transform: translateX(0%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        179 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        180 +
                                            to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        181 +
                                                transform: translateX(-100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        182 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        183 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        184 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        185 +
                                        @keyframes move-in {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        186 +
                                            from {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        187 +
                                                transform: translateX(100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        188 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        189 +
                                            to {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        190 +
                                                transform: translateX(0%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        191 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        192 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        193 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        194 +
                                        @media (prefers-reduced-motion: no-preference) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        195 +
                                            ::view-transition-old(root),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        196 +
                                            ::view-transition-new(root) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        197 +
                                                animation-duration: 0.25s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        198 +
                                                animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        199 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        200 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        201 +
                                            ::view-transition-old(root) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        202 +
                                                animation-name: move-out;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        203 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        204 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        205 +
                                            ::view-transition-new(root) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        206 +
                                                animation-name: move-in;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        207 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        208 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        209 +
                                        */