Redesign obsolete notice

static/style.css

@@ -634,6 +634,10 @@ dd {

                                
                                
                                
                            
                                
                                    
                                        
                                            634  
                                                #picture-view {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            635  
                                                    flex-direction: column;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            636  
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        637 +
                                            #picture-view > x-frame {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        638 +
                                                flex: 1 1 auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        639 +
                                                margin: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        640 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            641  
                                                #picture-actions {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            642  
                                                    --width: 768px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            643  
                                                    position: static;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -737,3 +741,20 @@ nav .button-flat {

                                
                                
                                
                            
                                
                                    
                                        
                                            741  
                                            nav .button-flat .ripple-pad {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            742  
                                                background: #ffffff99;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            743  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        744 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        745 +
                                        .warning {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        746 +
                                            background: var(--color-alert);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        747 +
                                            color: var(--color-alert-text);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        748 +
                                            padding: 1rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        749 +
                                            margin: 1rem 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        750 +
                                            border-radius: var(--radius-button);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        751 +
                                            --color-link-text: #000000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        752 +
                                            --color-link-hover-text: #000000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        753 +
                                            --color-link-visited-text: #000000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        754 +
                                            --color-link-visited-hover-text: #000000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        755 +
                                            --color-link-active-text: #000000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        756 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        757 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        758 +
                                        .warning h2 {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        759 +
                                            font: var(--h3-font);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        760 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture.html

@@ -70,15 +70,17 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                                        <p>by <a href="/profile/{{ resource.author.username }}">{{ resource.author.formatted_name }}</a></p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                                        <p>{{ resource.description }}</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            72  
                                                        {% if resource.replaced_by %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 -
                                                        <h2>Obsolete</h2>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 -
                                                        <p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 -
                                                            This picture has been replaced by <a href="/picture/{{ resource.replaced_by.id }}">{{ resource.replaced_by.title }}</a>.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 -
                                                        </p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 -
                                                        {% if have_permission %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 -
                                                            <form method="POST" action="/picture/{{ resource.id }}/remove-replacement">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        79 -
                                                                <button class="button-flat" type="submit">Remove replacement</button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        80 -
                                                            </form>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        81 -
                                                        {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                                        <div class="warning">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                                            <h2>Obsolete</h2>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 +
                                                            <p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                                                This picture has been replaced by <a href="/picture/{{ resource.replaced_by.id }}">{{ resource.replaced_by.title }}</a>.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        77 +
                                                            </p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        78 +
                                                            {% if have_permission %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        79 +
                                                                <form method="POST" action="/picture/{{ resource.id }}/remove-replacement">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        80 +
                                                                    <button class="button-flat button-neutral" type="submit">Remove replacement</button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        81 +
                                                                </form>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        82 +
                                                            {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 +
                                                        </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            84  
                                                        {% endif %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            85  
                                                        <x-vbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            86  
                                                            <div id="annotation-zone">