Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

Responsive profile header

by roundabout, Wednesday, 17 July 2024, 08:09:47 (1721203787), pushed by roundabout, Wednesday, 31 July 2024, 06:54:51 (1722408891)

Author identity: vlad <vlad.muntoiu@gmail.com>

bea70f7bcc68713a6eeda71d4c4dd76190ee7a4b

static/style.css

@@ -644,4 +644,11 @@ small {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    width: 96px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    height: 96px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            #profile-header {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                flex-flow: column nowrap;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                align-items: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            #profile-header #username {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                text-align: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/user-profile-overview.html

@@ -4,7 +4,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            {% block content %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <x-frame style="--width: 768px; --padding: 1em;">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    <x-vbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <x-hbox style="align-items: center;">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <x-hbox style="align-items: center;" id="profile-header">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <img src="/info/{{ user.username }}/avatar" class="avatar" id="profile-avatar">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <x-vbox class="nopad">