Add banner to person options screen

For consistent navigation

daemon.py

@@ -7965,7 +7965,6 @@ class PubServer(BaseHTTPRequestHandler):
 
             msg = \
                 html_person_options(self.server.default_timeline,
-                                    self.server.css_cache,
                                     self.server.translate,
                                     base_dir, domain,
                                     domain_full,
@@ -7988,7 +7987,8 @@ class PubServer(BaseHTTPRequestHandler):
                                     self.server.text_mode_banner,
                                     self.server.news_instance,
                                     authorized,
-                                    access_keys, is_group)
+                                    access_keys, is_group,
+                                    self.server.theme_name)
             if msg:
                 msg = msg.encode('utf-8')
                 msglen = len(msg)

epicyon-options.css

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 :root {
+    --banner-height: 20vh;
+    --banner-height-mobile: 10vh;
+    --banner-height-tiny: 10vh;
     --avatar-rounding: 10%;
     --options-bg-color: #282c37;
     --options-link-bg-color: transparent;
@@ -151,6 +154,12 @@ a:focus {
 }
 
 @media screen and (min-width: 400px) {
+    .timeline-banner {
+        vertical-align: top;
+        object-fit: cover;
+        width: 100%;
+        max-height: var(--banner-height);
+    }
     textarea {
         font-family: Arial, Helvetica, sans-serif;
         font-size: var(--font-size4);
@@ -228,6 +237,12 @@ a:focus {
 }
 
 @media screen and (max-width: 1000px) {
+    .timeline-banner {
+        vertical-align: top;
+        object-fit: cover;
+        width: 98vw;
+        max-height: var(--banner-height-mobile);
+    }
     textarea {
         font-family: Arial, Helvetica, sans-serif;
         font-size: var(--font-size);
@@ -305,6 +320,12 @@ a:focus {
 }
 
 @media screen and (max-width: 480px) {
+    .timeline-banner {
+        vertical-align: top;
+        object-fit: cover;
+        width: 98vw;
+        max-height: var(--banner-height-tiny);
+    }
     textarea {
         font-family: Arial, Helvetica, sans-serif;
         font-size: var(--font-size2);

webapp_person_options.py

@@ -29,10 +29,11 @@ from webapp_utils import html_header_with_external_style
 from webapp_utils import html_footer
 from webapp_utils import get_broken_link_substitute
 from webapp_utils import html_keyboard_navigation
+from webapp_utils import get_banner_file
 
 
 def html_person_options(default_timeline: str,
-                        css_cache: {}, translate: {}, base_dir: str,
+                        translate: {}, base_dir: str,
                         domain: str, domain_full: str,
                         origin_path_str: str,
                         options_actor: str,
@@ -61,7 +62,8 @@ def html_person_options(default_timeline: str,
                         news_instance: bool,
                         authorized: bool,
                         access_keys: {},
-                        is_group: bool) -> str:
+                        is_group: bool,
+                        theme: str) -> str:
     """Show options for a person: view/follow/block/report
     """
     options_domain, options_port = get_domain_from_actor(options_actor)
@@ -138,6 +140,21 @@ def html_person_options(default_timeline: str,
 
     options_str += html_keyboard_navigation(text_mode_banner, {}, {})
     options_str += '<br><br>\n'
+
+    # show banner
+    banner_file, _ = \
+        get_banner_file(base_dir, nickname, domain, theme)
+    options_str += \
+        '<header>\n<a href="/users/' + nickname + '/' + default_timeline + \
+        '" title="' + translate['Switch to timeline view'] + '" alt="' + \
+        translate['Switch to timeline view'] + '" ' + \
+        'tabindex="1" accesskey="' + access_keys['menuTimeline'] + '">\n'
+    options_str += \
+        '<img loading="lazy" decoding="async" ' + \
+        'class="timeline-banner" alt="" ' + \
+        'src="/users/' + nickname + '/' + banner_file + '" /></a>\n' + \
+        '</header>\n<br><br>\n'
+
     options_str += '<div class="options">\n'
     options_str += '  <div class="optionsAvatar">\n'
     options_str += '  <center>\n'