Merge branch 'main' of gitlab.com:bashrc2/epicyon

daemon.py

@@ -17082,7 +17082,8 @@ class PubServer(BaseHTTPRequestHandler):
                                     self.server.text_mode_banner,
                                     access_keys,
                                     False, self.server.system_language,
-                                    self.server.default_timeline)
+                                    self.server.default_timeline,
+                                    self.server.theme_name)
                 if msg:
                     msg = msg.encode('utf-8')
                     msglen = len(msg)
@@ -17125,7 +17126,8 @@ class PubServer(BaseHTTPRequestHandler):
                                     access_keys,
                                     True,
                                     self.server.system_language,
-                                    self.server.default_timeline)
+                                    self.server.default_timeline,
+                                    self.server.theme_name)
                 if msg:
                     msg = msg.encode('utf-8')
                     msglen = len(msg)

epicyon-calendar.css

@@ -16,6 +16,9 @@
     --title-text: white;
     --title-background: grey;
     --focus-color: white;
+    --banner-height: 20vh;
+    --banner-height-mobile: 10vh;
+    --banner-height-tiny: 10vh;
     --calendar-horizontal-padding: 0;
     --calendar-cell-size: 1.5vw;
     --calendar-cell-size-mobile: 1.5vw;
@@ -250,6 +253,12 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
 }
 
 @media screen and (min-width: 400px) {
+    .timeline-banner {
+        vertical-align: top;
+        object-fit: cover;
+        width: 100%;
+        max-height: var(--banner-height);
+    }
     .calendar {
         table-display: fixed;
         margin: 0 20%;
@@ -274,6 +283,12 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
 }
 
 @media screen and (max-width: 1000px) {
+    .timeline-banner {
+        vertical-align: top;
+        object-fit: cover;
+        width: 98vw;
+        max-height: var(--banner-height-mobile);
+    }
     .calendar {
         table-display: fixed;
         margin: 0 0;
@@ -298,6 +313,12 @@ tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
 }
 
 @media screen and (max-width: 480px) {
+    .timeline-banner {
+        vertical-align: top;
+        object-fit: cover;
+        width: 98vw;
+        max-height: var(--banner-height-tiny);
+    }
     .calendar {
         table-display: fixed;
         margin: 0 0;

epicyon-profile.css

@@ -44,6 +44,8 @@
     --border-color: #505050;
     --border-width: 2px;
     --border-width-header: 2px;
+    --font-page-dash-tiny: 16px;
+    --font-page-dash-mobile: 32px;
     --font-size-header: 18px;
     --font-size-header-mobile: 32px;
     --font-size-header-tiny: 13px;
@@ -1848,7 +1850,9 @@ h3 {
     .columnIcons img {
         float: right;
     }
-    .pageslist {
+    .pageslist mark {
+    }
+    .pageslistDash {
     }
     .voteresult {
         width: var(--voteresult-width);
@@ -2640,7 +2644,10 @@ h3 {
         float: right;
         margin-right: 1vw;
     }
-    .pageslist {
+    .pageslist mark {
+    }
+    .pageslistDash {
+        font-size: var(--font-page-dash-mobile);
     }
     .voteresult {
         width: var(--voteresult-width-mobile);
@@ -3428,7 +3435,10 @@ h3 {
         float: right;
         margin-right: 1vw;
     }
-    .pageslist {
+    .pageslist mark {
+    }
+    .pageslistDash {
+        font-size: var(--font-page-dash-tiny);
     }
     .voteresult {
         width: var(--voteresult-width-tiny);

theme/blue/theme.json

@@ -9,6 +9,8 @@
     "banner-height": "20vh",
     "banner-height-mobile": "10vh",
     "newswire-date-color": "blue",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-header": "22px",
     "font-size-header-mobile": "32px",
     "font-size": "45px",

theme/debian/theme.json

@@ -38,6 +38,8 @@
     "banner-height-mobile": "10vh",
     "hashtag-background-color": "grey",
     "focus-color": "grey",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "26px",
     "font-size2": "20px",

theme/default/theme.json

@@ -21,6 +21,8 @@
     "cw-style": "normal",
     "cw-weight": "bold",
     "column-right-fg-color-voted-on": "red",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-header": "18px",
     "font-size-header-mobile": "32px",
     "font-size-header-tiny": "16px",

theme/hacker/theme.json

@@ -6,6 +6,8 @@
     "dropdown-bg-color-hover": "#444",
     "dropdown-fg-color-hover": "#9ad791",
     "column-left-header-background": "#035103",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-header": "12px",
     "font-size-header-mobile": "20px",
     "font-size-button-mobile": "20px",

theme/henge/theme.json

@@ -22,6 +22,8 @@
     "banner-height": "25vh",
     "column-left-image-width-mobile": "40vw",
     "column-right-image-width-mobile": "40vw",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/indymediaclassic/theme.json

@@ -26,6 +26,8 @@
     "button-corner-radius": "5px",
     "timeline-border-radius": "5px",
     "focus-color": "blue",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/indymediamodern/theme.json

@@ -23,6 +23,8 @@
     "follow-text-size2": "30px",
     "hashtag-size1": "20px",
     "hashtag-size2": "30px",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-calendar-header": "2rem",
     "font-size-calendar-cell": "2rem",
     "time-vertical-align": "1.1%",

theme/lcd/theme.json

@@ -66,6 +66,8 @@
     "event-foreground": "white",
     "title-text": "white",
     "gallery-text-color": "#33390d",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-header": "22px",
     "font-size-header-mobile": "32px",
     "font-size": "45px",

theme/light/theme.json

@@ -27,6 +27,8 @@
     "banner-height-mobile": "10vh",
     "hashtag-background-color": "lightblue",
     "focus-color": "grey",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/night/theme.json

@@ -21,6 +21,8 @@
     "banner-height": "15vh",
     "banner-height-mobile": "10vh",
     "focus-color": "blue",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/pixel/theme.json

@@ -11,6 +11,8 @@
     "font-size-header": "18px",
     "font-size-header-mobile": "34px",
     "font-color-header": "#ccc",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "34px",
     "font-size-links": "18px",
     "font-size-publish-button": "18px",

theme/purple/theme.json

@@ -19,6 +19,8 @@
     "publish-button-at-top": "False",
     "search-banner-height": "25vh",
     "search-banner-height-mobile": "10vh",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/rc3/theme.json

@@ -38,6 +38,8 @@
     "banner-height": "15vh",
     "banner-height-mobile": "10vh",
     "focus-color": "blue",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-header": "14px",
     "font-size-header-mobile": "24px",
     "font-size-button-mobile": "24px",

theme/solidaric/theme.json

@@ -32,6 +32,8 @@
     "button-selected-highlighted": "darkred",
     "newswire-date-color": "grey",
     "focus-color": "grey",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/starlight/theme.json

@@ -17,6 +17,8 @@
     "column-left-image-width-mobile": "40vw",
     "line-spacing-newswire": "120%",
     "focus-color": "darkred",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px",
     "font-size-button-mobile": "26px",
     "font-size": "32px",
     "font-size2": "26px",

theme/zen/theme.json

@@ -64,5 +64,7 @@
     "header-font": "'Barlow-Regular'",
     "*font-family": "'Barlow-Regular'",
     "*src": "url('fonts/Barlow-Regular.woff2') format('woff2')",
-    "reply-icon-direction": "-1"
+    "reply-icon-direction": "-1",
+    "font-page-dash-tiny": "16px",
+    "font-page-dash-mobile": "32px"
 }

translations/ar.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "تباين الألوان منخفض جدًا",
     "View Larger Map": "عرض خريطة أكبر",
     "Start Time": "وقت البدء",
-    "End Time": "وقت النهاية"
+    "End Time": "وقت النهاية",
+    "Switch to calendar view": "قم بالتبديل إلى عرض التقويم"
 }

translations/ca.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "El contrast de color és massa baix",
     "View Larger Map": "Veure mapa més gran",
     "Start Time": "L'hora d'inici",
-    "End Time": "Temps esgotat"
+    "End Time": "Temps esgotat",
+    "Switch to calendar view": "Canvia a la vista del calendari"
 }

translations/cy.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Mae cyferbyniad lliw yn rhy isel",
     "View Larger Map": "Gweld Map Mwy",
     "Start Time": "Amser Dechrau",
-    "End Time": "Amser Gorffen"
+    "End Time": "Amser Gorffen",
+    "Switch to calendar view": "Newid i wedd calendr"
 }

translations/de.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Der Farbkontrast ist zu gering",
     "View Larger Map": "größere Karte ansehen",
     "Start Time": "Startzeit",
-    "End Time": "Endzeit"
+    "End Time": "Endzeit",
+    "Switch to calendar view": "Zur Kalenderansicht wechseln"
 }

translations/el.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Η χρωματική αντίθεση είναι πολύ χαμηλή",
     "View Larger Map": "Δείτε Μεγαλύτερο Χάρτη",
     "Start Time": "Ωρα έναρξης",
-    "End Time": "Τέλος χρόνου"
+    "End Time": "Τέλος χρόνου",
+    "Switch to calendar view": "Μετάβαση σε προβολή ημερολογίου"
 }

translations/en.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Color contrast is too low",
     "View Larger Map": "View Larger Map",
     "Start Time": "Start Time",
-    "End Time": "End Time"
+    "End Time": "End Time",
+    "Switch to calendar view": "Switch to calendar view"
 }

translations/es.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "El contraste de color es demasiado bajo",
     "View Larger Map": "Ver mapa más grande",
     "Start Time": "Hora de inicio",
-    "End Time": "Hora de finalización"
+    "End Time": "Hora de finalización",
+    "Switch to calendar view": "Cambiar a vista de calendario"
 }

translations/fr.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Le contraste des couleurs est trop faible",
     "View Larger Map": "Agrandir le plan",
     "Start Time": "Heure de début",
-    "End Time": "Heure de fin"
+    "End Time": "Heure de fin",
+    "Switch to calendar view": "Basculer vers la vue calendrier"
 }

translations/ga.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Tá codarsnacht dath ró-íseal",
     "View Larger Map": "Féach ar Léarscáil Níos Mó",
     "Start Time": "Am Tosaigh",
-    "End Time": "Am Deiridh"
+    "End Time": "Am Deiridh",
+    "Switch to calendar view": "Athraigh go hamharc féilire"
 }

translations/hi.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "रंग कंट्रास्ट बहुत कम है",
     "View Larger Map": "बड़ा नक्शा देखें",
     "Start Time": "समय शुरू",
-    "End Time": "अंत समय"
+    "End Time": "अंत समय",
+    "Switch to calendar view": "कैलेंडर दृश्य पर स्विच करें"
 }

translations/it.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Il contrasto del colore è troppo basso",
     "View Larger Map": "Visualizza mappa più grande",
     "Start Time": "Ora di inizio",
-    "End Time": "Tempo scaduto"
+    "End Time": "Tempo scaduto",
+    "Switch to calendar view": "Passa alla visualizzazione del calendario"
 }

translations/ja.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "色のコントラストが低すぎる",
     "View Larger Map": "大きな地図を見る",
     "Start Time": "始まる時間",
-    "End Time": "終了時間"
+    "End Time": "終了時間",
+    "Switch to calendar view": "カレンダービューに切り替えます"
 }

translations/ko.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "색상 대비가 너무 낮습니다.",
     "View Larger Map": "큰 지도 보기",
     "Start Time": "시작 시간",
-    "End Time": "종료 시간"
+    "End Time": "종료 시간",
+    "Switch to calendar view": "캘린더 보기로 전환"
 }

translations/ku.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Berevajî reng pir kêm e",
     "View Larger Map": "Nexşeya Mezin bibînin",
     "Start Time": "Demjimêra Destpêkê",
-    "End Time": "Dema Dawî"
+    "End Time": "Dema Dawî",
+    "Switch to calendar view": "Biguherîne bo dîtina salnameyê"
 }

translations/nl.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Kleurcontrast is te laag",
     "View Larger Map": "zie grotere kaart",
     "Start Time": "Starttijd",
-    "End Time": "Eindtijd"
+    "End Time": "Eindtijd",
+    "Switch to calendar view": "Overschakelen naar kalenderweergave"
 }

translations/oc.json

@@ -554,5 +554,6 @@
     "Color contrast is too low": "Color contrast is too low",
     "View Larger Map": "View Larger Map",
     "Start Time": "Start Time",
-    "End Time": "End Time"
+    "End Time": "End Time",
+    "Switch to calendar view": "Switch to calendar view"
 }

translations/pl.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Kontrast kolorów jest zbyt niski",
     "View Larger Map": "Wyświetl Większą Mapę",
     "Start Time": "Czas rozpoczęcia",
-    "End Time": "Koniec czasu"
+    "End Time": "Koniec czasu",
+    "Switch to calendar view": "Przełącz na widok kalendarza"
 }

translations/pt.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "O contraste de cores é muito baixo",
     "View Larger Map": "ver o mapa maior",
     "Start Time": "Hora de início",
-    "End Time": "Fim do tempo"
+    "End Time": "Fim do tempo",
+    "Switch to calendar view": "Mudar para a vista de calendário"
 }

translations/ru.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Цветовой контраст слишком низкий",
     "View Larger Map": "Посмотреть увеличенную карту",
     "Start Time": "Время начала",
-    "End Time": "Время окончания"
+    "End Time": "Время окончания",
+    "Switch to calendar view": "Переключиться на представление календаря"
 }

translations/sw.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Utofautishaji wa rangi uko chini sana",
     "View Larger Map": "Tazama Ramani Kubwa",
     "Start Time": "Wakati wa Kuanza",
-    "End Time": "Wakati wa Mwisho"
+    "End Time": "Wakati wa Mwisho",
+    "Switch to calendar view": "Badili hadi mwonekano wa kalenda"
 }

translations/tr.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Renk kontrastı çok düşük",
     "View Larger Map": "Daha Büyük Haritayı Görüntüle",
     "Start Time": "Başlangıç ​​saati",
-    "End Time": "Bitiş zamanı"
+    "End Time": "Bitiş zamanı",
+    "Switch to calendar view": "Takvim görünümüne geç"
 }

translations/uk.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "Колірна контрастність надто низька",
     "View Larger Map": "Переглянути більшу карту",
     "Start Time": "Час початку",
-    "End Time": "Час закінчення"
+    "End Time": "Час закінчення",
+    "Switch to calendar view": "Перейти до перегляду календаря"
 }

translations/yi.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "קאָליר קאַנטראַסט איז אויך נידעריק",
     "View Larger Map": "View גרעסערע מאַפּע",
     "Start Time": "אָנהייב צייט",
-    "End Time": "סוף צייט"
+    "End Time": "סוף צייט",
+    "Switch to calendar view": "באַשטימען צו די קאַלענדאַר מיינונג"
 }

translations/zh.json

@@ -558,5 +558,6 @@
     "Color contrast is too low": "颜色对比度太低",
     "View Larger Map": "查看更大的地图",
     "Start Time": "开始时间",
-    "End Time": "时间结束"
+    "End Time": "时间结束",
+    "Switch to calendar view": "切换到日历视图"
 }

webapp_calendar.py

@@ -26,6 +26,7 @@ from happening import get_todays_events
 from happening import get_calendar_events
 from happening import get_todays_events_icalendar
 from happening import get_month_events_icalendar
+from webapp_utils import get_banner_file
 from webapp_utils import set_custom_background
 from webapp_utils import html_header_with_external_style
 from webapp_utils import html_footer
@@ -106,7 +107,8 @@ def _html_calendar_day(person_cache: {}, css_cache: {}, translate: {},
                        base_dir: str, path: str,
                        year: int, month_number: int, day_number: int,
                        nickname: str, domain: str, day_events: [],
-                       month_name: str, actor: str) -> str:
+                       month_name: str, actor: str,
+                       theme: str, access_keys: {}) -> str:
     """Show a day within the calendar
     """
     account_dir = acct_dir(base_dir, nickname, domain)
@@ -128,12 +130,29 @@ def _html_calendar_day(person_cache: {}, css_cache: {}, translate: {},
     instance_title = get_config_param(base_dir, 'instanceTitle')
     calendar_str = \
         html_header_with_external_style(css_filename, instance_title, None)
+
+    calendar_link = cal_actor + \
+        '/calendar?year=' + str(year) + '?month=' + str(month_number)
+
+    # show banner
+    banner_file, _ = \
+        get_banner_file(base_dir, nickname, domain, theme)
+    calendar_str += \
+        '<header>\n<a href="' + calendar_link + '" title="' + \
+        translate['Switch to calendar view'] + '" alt="' + \
+        translate['Switch to calendar view'] + '" ' + \
+        'tabindex="1" accesskey="' + access_keys['menuCalendar'] + '">\n'
+    calendar_str += \
+        '<img loading="lazy" decoding="async" ' + \
+        'class="timeline-banner" alt="" ' + \
+        'src="/users/' + nickname + '/' + banner_file + '" /></a>\n' + \
+        '</header>\n<br>\n'
+
     calendar_str += '<main>\n'
     # day header
     calendar_str += \
-        '  <center>\n<p>\n<a href="' + cal_actor + \
+        '  <center>\n<p>\n<a href="' + calendar_link + \
-        '/calendar?year=' + str(year) + \
+        '" tabindex="1" class="imageAnchor">\n'
-        '?month=' + str(month_number) + '" tabindex="1" class="imageAnchor">\n'
     datetime_str = str(year) + '-' + str(month_number) + '-' + str(day_number)
     calendar_str += \
         '  <label class="calheader">' + \
@@ -303,7 +322,7 @@ def html_calendar(person_cache: {}, css_cache: {}, translate: {},
                   http_prefix: str, domain_full: str,
                   text_mode_banner: str, access_keys: {},
                   icalendar: bool, system_language: str,
-                  default_timeline: str) -> str:
+                  default_timeline: str, theme: str) -> str:
     """Show the calendar for a person
     """
     domain = remove_domain_port(domain_full)
@@ -379,7 +398,8 @@ def html_calendar(person_cache: {}, css_cache: {}, translate: {},
                                   translate, base_dir, path,
                                   year, month_number, day_number,
                                   nickname, domain, day_events,
-                                  month_name, actor)
+                                  month_name, actor,
+                                  theme, access_keys)
 
     if icalendar:
         return get_month_events_icalendar(base_dir, nickname, domain,
@@ -427,8 +447,23 @@ def html_calendar(person_cache: {}, css_cache: {}, translate: {},
     header_str = \
         html_header_with_external_style(css_filename, instance_title, None)
 
+    # show banner
+    banner_file, _ = \
+        get_banner_file(base_dir, nickname, domain, theme)
+    calendar_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'
+    calendar_str += '<img loading="lazy" decoding="async" ' + \
+        'class="timeline-banner" alt="" ' + \
+        'src="/users/' + nickname + '/' + banner_file + '" /></a>\n' + \
+        '</header>\n'
+
     # the main graphical calendar as a table
-    calendar_str = '<main>\n<center>\n<p class="calendar__banner--month">\n'
+    calendar_str += '<main>\n<center>\n<p class="calendar__banner--month">\n'
     # previous month
     calendar_str += \
         '  <a href="' + cal_actor + '/calendar?year=' + str(prev_year) + \

webapp_timeline.py

@@ -439,16 +439,23 @@ def _page_number_buttons(users_path: str, box_name: str,
     num_str = ''
     for page in range(min_page_number, max_page_number):
         if num_str:
-            num_str += ' ⸻ '
+            separator_str = \
+                '<label class="pageslistDash">────</label>'
+            num_str += html_hide_from_screen_reader(separator_str)
         aria_page_str = ''
-        page_str = str(page)
+        page_str = ' ' + str(page) + ' '
+        curr_page_str = ''
         if page == page_number:
-            page_str = '<mark>' + str(page) + '</mark>'
+            page_str = \
+                html_hide_from_screen_reader('[<mark>') + \
+                str(page) + \
+                html_hide_from_screen_reader('</mark>]')
             aria_page_str = ' aria-current="true"'
+            curr_page_str = 'Current Page, '
         num_str += \
             '<a href="' + users_path + '/' + box_name + '?page=' + \
-            str(page) + '" class="pageslist" ' + \
+            str(page) + '#timelineposts" class="pageslist" ' + \
-            'aria-label="Current Page, Page ' + str(page) + \
+            'aria-label="' + curr_page_str + 'Page ' + str(page) + \
             '"' + aria_page_str + ' tabindex="11">' + page_str + '</a>'
     return '<center>\n' + \
         '  <nav role="navigation" aria-label="Pagination Navigation">\n' + \
@@ -1028,6 +1035,7 @@ def html_timeline(css_cache: {}, default_timeline: str,
             translate['Page down'] + '"></a>\n' + \
             '      </center>\n'
         tl_str += _page_number_buttons(users_path, box_name, page_number)
+        tl_str += '<br>'
         tl_str += text_mode_separator
     elif item_ctr == 0:
         tl_str += _get_help_for_timeline(base_dir, box_name)
@@ -1200,6 +1208,7 @@ def _html_shares_timeline(translate: {}, page_number: int, items_per_page: int,
             '  </center>\n'
         timeline_str += \
             _page_number_buttons(actor, 'tl' + sharesFileType, page_number)
+        timeline_str += '<br>'
 
     return timeline_str