Changeset 297c77d in Klonkt for src/views/partials/fedi-tabs.ejs


Ignore:
Timestamp:
06/26/2026 02:14:00 PM (2 months ago)
Author:
Robin Genis <roboburr@…>
Branches:
main
Children:
c27c945
Parents:
1ecbf71
Message:

refactor(fedi): English URL paths + equal-width tabs + back-to-site in top nav

  • Renamed all fediverse routes to English: /tijdlijn->/timeline, /volgend->/following, /meldingen->/notifications, /blokkeren->/blocking (+ all sub-routes, form actions, redirects, links, RESERVED_SLUGS). UI labels stay i18n.
  • fedi-tabs: all 5 tabs share the content width equally (flex:1) and always fit (ellipsis) instead of varying widths.
  • Moved 'back to site' from a big in-content button into the top nav (like admin pages), via on-special; removed the in-content button. Archive link hidden on fedi pages too.
File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/views/partials/fedi-tabs.ejs

    r1ecbf71 r297c77d  
    11<%# Shared tab bar for the unified Fediverse section. Owner/admin-only.
    22    Param: active = 'feed' | 'following' | 'reacties' | 'meldingen' | 'blokkeren'.
    3     Responsive: horizontal tabs that scroll on narrow screens. %>
     3    All tabs share the content width equally (flex:1) and always fit (ellipsis).
     4    "Back to site" lives in the top nav, not here. %>
    45<% var _a = (typeof active !== 'undefined') ? active : ''; %>
    56<% var _nu = (typeof notifUnread !== 'undefined') ? notifUnread : 0; %>
    6 <div class="fedi-bar">
    7   <a class="btn btn-primary fedi-bar-back" href="/"><%= t('nav.back_to_site') %></a>
    8   <nav class="fedi-tabs" aria-label="Fediverse">
    9     <a href="/tijdlijn" class="fedi-tab<%= _a === 'feed' ? ' is-active' : '' %>"
    10        hx-get="/tijdlijn?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/tijdlijn" hx-indicator="#pcms-loading"><%= t('tl.tab_feed') %></a>
    11     <a href="/volgend" class="fedi-tab<%= _a === 'following' ? ' is-active' : '' %>"
    12        hx-get="/volgend?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/volgend" hx-indicator="#pcms-loading"><%= t('tl.tab_following') %></a>
    13     <a href="/fediverse" class="fedi-tab<%= _a === 'reacties' ? ' is-active' : '' %>"
    14        hx-get="/fediverse?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/fediverse" hx-indicator="#pcms-loading"><%= t('tl.tab_replies') %></a>
    15     <a href="/meldingen" class="fedi-tab<%= _a === 'meldingen' ? ' is-active' : '' %>"
    16        hx-get="/meldingen?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/meldingen" hx-indicator="#pcms-loading"><%= t('notif.title') %><% if (_nu > 0) { %> <span class="fedi-tab-badge"><%= _nu > 9 ? '9+' : _nu %></span><% } %></a>
    17     <a href="/blokkeren" class="fedi-tab<%= _a === 'blokkeren' ? ' is-active' : '' %>"
    18        hx-get="/blokkeren?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/blokkeren" hx-indicator="#pcms-loading"><%= t('blk.title') %></a>
    19   </nav>
    20 </div>
     7<nav class="fedi-tabs" aria-label="Fediverse">
     8  <a href="/timeline" class="fedi-tab<%= _a === 'feed' ? ' is-active' : '' %>"
     9     hx-get="/timeline?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/timeline" hx-indicator="#pcms-loading"><%= t('tl.tab_feed') %></a>
     10  <a href="/following" class="fedi-tab<%= _a === 'following' ? ' is-active' : '' %>"
     11     hx-get="/following?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/following" hx-indicator="#pcms-loading"><%= t('tl.tab_following') %></a>
     12  <a href="/fediverse" class="fedi-tab<%= _a === 'reacties' ? ' is-active' : '' %>"
     13     hx-get="/fediverse?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/fediverse" hx-indicator="#pcms-loading"><%= t('tl.tab_replies') %></a>
     14  <a href="/notifications" class="fedi-tab<%= _a === 'meldingen' ? ' is-active' : '' %>"
     15     hx-get="/notifications?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/notifications" hx-indicator="#pcms-loading"><span class="fedi-tab-label"><%= t('notif.title') %></span><% if (_nu > 0) { %><span class="fedi-tab-badge"><%= _nu > 9 ? '9+' : _nu %></span><% } %></a>
     16  <a href="/blocking" class="fedi-tab<%= _a === 'blokkeren' ? ' is-active' : '' %>"
     17     hx-get="/blocking?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/blocking" hx-indicator="#pcms-loading"><%= t('blk.title') %></a>
     18</nav>
    2119<style>
    22 .fedi-bar { margin: 0 0 1.25rem; }
    23 /* Big, full-width "back to site" button at the top of the Fediverse section. */
    24 .fedi-bar-back { display: block; width: 100%; box-sizing: border-box; text-align: center; margin: 0 0 1rem; padding: .7rem 1rem; }
    25 /* Tabs centered, wrap onto multiple rows on narrow screens (no scrollbar). */
    26 .fedi-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .25rem;
     20/* All 5 tabs share the width equally and always fit (truncate with ellipsis if needed). */
     21.fedi-tabs { display: flex; margin: 0 0 1.25rem;
    2722  border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
    28 .fedi-tab { padding: .55rem .85rem; white-space: nowrap; text-decoration: none;
    29   color: var(--ink-soft, #888); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
     23.fedi-tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     24  padding: .6rem .4rem; text-decoration: none; font-weight: 600; font-size: .95rem;
     25  color: var(--ink-soft, #888); border-bottom: 2px solid transparent; margin-bottom: -1px;
     26  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
    3027.fedi-tab:hover { color: var(--ink, #000); }
    3128.fedi-tab.is-active { color: var(--accent, #06c); border-bottom-color: var(--accent, #06c); }
    32 .fedi-tab-badge { display: inline-block; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
    33   background: var(--accent, #e8b04b); color: #fff; font-size: .68rem; line-height: 1.5; text-align: center; vertical-align: middle; }
    34 @media (max-width: 520px) { .fedi-tab { padding: .55rem .6rem; font-size: .92rem; } }
     29.fedi-tab-label { overflow: hidden; text-overflow: ellipsis; }
     30.fedi-tab-badge { flex: 0 0 auto; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
     31  background: var(--accent, #e8b04b); color: #fff; font-size: .66rem; line-height: 1.5; text-align: center; }
     32@media (max-width: 520px) { .fedi-tab { padding: .55rem .25rem; font-size: .82rem; } }
     33@media (max-width: 380px) { .fedi-tab { font-size: .74rem; } }
    3534</style>
Note: See TracChangeset for help on using the changeset viewer.