Changeset 297c77d in Klonkt for src/views/partials


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.
Location:
src/views/partials
Files:
3 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>

  • src/views/partials/profile-sheet.ejs

    r1ecbf71 r297c77d  
    6565      <% if (typeof canManageFedi !== 'undefined' && canManageFedi) { %>
    6666      <li role="none">
    67         <a href="/tijdlijn" class="profile-sheet-item" role="menuitem" data-close-sheet
    68            hx-get="/tijdlijn?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/tijdlijn" hx-indicator="#pcms-loading">
     67        <a href="/timeline" class="profile-sheet-item" role="menuitem" data-close-sheet
     68           hx-get="/timeline?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/timeline" hx-indicator="#pcms-loading">
    6969          <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
    7070          <span class="psi-label"><%= t('nav.fediverse') %></span>

  • src/views/partials/topnav.ejs

    r1ecbf71 r297c77d  
    1414const _siteUrlBase = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
    1515const _isAdmin     = typeof bodyClass !== 'undefined' && bodyClass.indexOf('on-admin') >= 0;
     16// Fediverse pages (on-special) get the same top-nav "back to site" treatment as admin.
     17const _isSpecial   = typeof bodyClass !== 'undefined' && bodyClass.indexOf('on-special') >= 0;
    1618const _hasSearch   = !site || site.show_search === undefined || site.show_search;
    1719const _canPost     = user && (typeof canMutate === 'undefined' || canMutate)
    … …  
    2426    <!-- Brand block (always visible) -->
    2527    <div class="masthead-brand">
    26       <% if (_isAdmin) { %>
     28      <% if (_isAdmin || _isSpecial) { %>
    2729        <a href="<%= _siteUrlBase %>/" class="nav-link nav-link-admin"><%= t('nav.back_to_site') %></a>
    2830      <% } else if (typeof tenancy !== 'undefined' && tenancy === 'hub') { %>
    … …  
    5759    <nav class="top-nav top-nav-desktop" aria-label="Hoofdnavigatie">
    5860
    59       <% if (!_isAdmin) { %>
     61      <% if (!_isAdmin && !_isSpecial) { %>
    6062        <a class="nav-link" href="<%= _siteUrlBase %>/archive"
    6163           hx-get="<%= _siteUrlBase %>/archive?partial=1" hx-target="#pcms-main"
    … …  
    100102
    101103      <% if (user && typeof canManageFedi !== 'undefined' && canManageFedi) { %>
    102         <a class="nav-btn nav-notif" href="/meldingen" aria-label="<%= t('notif.title') %>" title="<%= t('notif.title') %>"
    103            hx-get="/meldingen?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/meldingen" hx-indicator="#pcms-loading">
     104        <a class="nav-btn nav-notif" href="/notifications" aria-label="<%= t('notif.title') %>" title="<%= t('notif.title') %>"
     105           hx-get="/notifications?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/notifications" hx-indicator="#pcms-loading">
    104106          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
    105107          <% if (typeof notifUnread !== 'undefined' && notifUnread > 0) { %><span class="notif-badge"><%= notifUnread > 9 ? '9+' : notifUnread %></span><% } %>
    … …  
    156158              <% } %>
    157159              <% if (typeof canManageFedi !== 'undefined' && canManageFedi) { %>
    158                 <a href="/tijdlijn" role="menuitem" class="udi"
    159                    hx-get="/tijdlijn?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
    160                    hx-push-url="/tijdlijn" hx-indicator="#pcms-loading">
     160                <a href="/timeline" role="menuitem" class="udi"
     161                   hx-get="/timeline?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
     162                   hx-push-url="/timeline" hx-indicator="#pcms-loading">
    161163                  <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
    162164                  <span><%= t('nav.fediverse') %></span>
Note: See TracChangeset for help on using the changeset viewer.