New profile header

daemon.py

@@ -3419,11 +3419,10 @@ class PubServer(BaseHTTPRequestHandler):
             profileMediaTypesUploaded = {}
             for mType in profileMediaTypes:
                 # some images can only be changed by the admin
-                if mType == 'instanceLogo' or \
+                if mType == 'instanceLogo':
-                   mType == 'image':
                     if nickname != adminNickname:
                         print('WARN: only the admin can change ' +
-                              'instance logo or profile backgrounds')
+                              'instance logo')
                         continue
 
                 if debug:
@@ -3442,13 +3441,6 @@ class PubServer(BaseHTTPRequestHandler):
                               ' image or font was found in POST')
                     continue
 
-                # NOTE: profile background comes from the news system user
-                # perhaps at some future time profile background will be
-                # per account
-                currNick = nickname
-                if mType == 'image':
-                    currNick = 'news'
-
                 # Note: a .temp extension is used here so that at no
                 # time is an image with metadata publicly exposed,
                 # even for a few mS
@@ -3458,7 +3450,7 @@ class PubServer(BaseHTTPRequestHandler):
                 else:
                     filenameBase = \
                         baseDir + '/accounts/' + \
-                        currNick + '@' + domain + \
+                        nickname + '@' + domain + \
                         '/' + mType + '.temp'
 
                 filename, attachmentMediaType = \

epicyon-profile.css

@@ -251,6 +251,31 @@ a:focus {
     border: 2px solid var(--focus-color);
 }
 
+.profileHeader {
+    font-family: Arial, Helvetica, sans-serif;
+    position: relative;
+    overflow: hidden;
+    margin: 10px;
+    min-width: 230px;
+    max-width: 315px;
+    width: 100%;
+    color: #ffffff;
+    text-align: left;
+    line-height: 1.4em;
+    background-color: #141414;
+}
+
+.profileHeader .title {
+    border-radius: 50%;
+    position: absolute;
+    bottom: 100%;
+    left: 25px;
+    z-index: 1;
+    max-width: 90px;
+    opacity: 1;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+}
+
 .hero-image {
     background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)), url("/users/news/image.png");
     height: 50%;

webapp_profile.py

@@ -268,6 +268,42 @@ def htmlProfileAfterSearch(cssCache: {},
     return htmlHeaderWithExternalStyle(cssFilename) + profileStr + htmlFooter()
 
 
+def getProfileHeader(baseDir: str, nickname: str, domain: str,
+                     domainFull: str, translate: {}, iconsDir: str,
+                     defaultTimeline: str,
+                     displayName: str,
+                     avatarDescription: str,
+                     profileDescriptionShort: str,
+                     loginButton: str) -> str:
+    """The header of the profile screen, containing background
+    image and avatar
+    """
+    htmlStr = '<figure class="profileHeader">\n'
+    htmlStr += '  <a href="/users/' + \
+        nickname + '/' + defaultTimeline + '" title="' + \
+        translate['Switch to timeline view'] + '">\n'
+    htmlStr += '    <img src="/users/' + nickname + '/image.png" /></a>\n'
+    htmlStr += '  <figcaption>\n'
+    htmlStr += \
+        '    <img loading="lazy" src="/users/' + nickname + '/avatar.png' + \
+        '" title="' + avatarDescription + '" alt="' + \
+        avatarDescription + '" class="title">\n'
+    htmlStr += '    <h1>' + displayName + '</h1>\n'
+    htmlStr += \
+        '<p><b>@' + nickname + '@' + domainFull + '</b><br>\n'
+    htmlStr += \
+        '<a href="/users/' + nickname + \
+        '/qrcode.png" alt="' + translate['QR Code'] + '" title="' + \
+        translate['QR Code'] + '">' + \
+        '<img class="qrcode" src="/' + iconsDir + \
+        '/qrcode.png" /></a></p>\n'
+    htmlStr += '    <p>' + profileDescriptionShort + '</p>\n'
+    htmlStr += loginButton
+    htmlStr += '  </figcaption>\n'
+    htmlStr += '</figure>\n'
+    return htmlStr
+
+
 def htmlProfile(rssIconAtTop: bool,
                 cssCache: {}, iconsAsButtons: bool,
                 defaultTimeline: str,
@@ -497,26 +533,13 @@ def htmlProfile(rssIconAtTop: bool,
         profileHeaderStr += '      </td>\n'
         profileHeaderStr += '      <td valign="top" class="col-center">\n'
     else:
-        profileHeaderStr = '<div class="hero-image">\n'
+        profileHeaderStr = \
-        profileHeaderStr += '  <div class="hero-text">\n'
+            getProfileHeader(baseDir, nickname, domain,
-        profileHeaderStr += \
+                             domainFull, translate, iconsDir,
-            '    <img loading="lazy" src="' + profileJson['icon']['url'] + \
+                             defaultTimeline, displayName,
-            '" title="' + avatarDescription + '" alt="' + \
+                             avatarDescription,
-            avatarDescription + '" class="title">\n'
+                             profileDescriptionShort,
-        profileHeaderStr += '    <h1>' + displayName + '</h1>\n'
+                             loginButton)
-        iconsDir = getIconsDir(baseDir)
-        profileHeaderStr += \
-            '<p><b>@' + nickname + '@' + domainFull + '</b><br>'
-        profileHeaderStr += \
-            '<a href="/users/' + nickname + \
-            '/qrcode.png" alt="' + translate['QR Code'] + '" title="' + \
-            translate['QR Code'] + '">' + \
-            '<img class="qrcode" src="/' + iconsDir + \
-            '/qrcode.png" /></a></p>\n'
-        profileHeaderStr += '    <p>' + profileDescriptionShort + '</p>\n'
-        profileHeaderStr += loginButton
-        profileHeaderStr += '  </div>\n'
-        profileHeaderStr += '</div>\n'
 
     profileStr = \
         linkToTimelineStart + profileHeaderStr + \