source: Klonkt/src/views/pages/news.ejs@ 52fc278

<div class="tl-wrap">
  <%- include('../partials/fedi-tabs', { active: 'feed' }) %>
  <div class="tl-titlebar">
    <h1 class="tl-title"><%= t('tl.title') %></h1>
    <button type="button" id="tl-paste-btn" class="tl-paste-btn" title="<%= t('fedi.remote_interact') %>" aria-label="<%= t('fedi.remote_interact') %>">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </button>
  </div>
  <p class="tl-lead"><%= t('tl.lead') %></p>

  <div class="tl-paste" id="tl-paste">
    <div class="tl-paste-card" role="dialog" aria-label="<%= t('fedi.remote_interact') %>">
      <button type="button" class="tl-paste-x" aria-label="<%= t('fedi.cancel') %>">&times;</button>
      <h3 class="tl-paste-title"><%= t('fedi.remote_interact') %></h3>
      <input type="url" class="tl-paste-input" inputmode="url" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="<%= t('tl.paste_ph') %>">
      <div class="tl-paste-actions">
        <button type="button" class="tl-paste-cancel"><%= t('fedi.cancel') %></button>
        <button type="button" class="tl-paste-go"><%= t('tl.paste_go') %></button>
      </div>
    </div>
  </div>
  <style>
    .tl-titlebar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .tl-boost-by { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink-soft); margin: 0 0 .45rem .2rem; }
    .tl-boost-by svg { color: #16a34a; flex: 0 0 auto; }
    .tl-boost-by strong { color: var(--ink); font-weight: 600; }
    .tl-paste-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
      border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
    .tl-paste-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .tl-paste { position: fixed; inset: 0; z-index: 2147483601; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.55); }
    .tl-paste.is-open { display: flex; }
    .tl-paste-card { position: relative; width: 100%; max-width: 460px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
      border-radius: 16px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
    .tl-paste-x { position: absolute; top: .5rem; right: .6rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; }
    .tl-paste-title { margin: 0 0 .8rem; font-size: 1.1rem; }
    .tl-paste-input { width: 100%; box-sizing: border-box; padding: .6rem .8rem; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper-2); color: var(--ink); font: inherit; font-size: .95rem; }
    .tl-paste-input:focus { outline: none; border-color: var(--accent); }
    .tl-paste-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
    .tl-paste-actions button { padding: .5rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; border: 0; }
    .tl-paste-cancel { background: transparent; border: 1.5px solid var(--rule); color: var(--ink); }
    .tl-paste-go { background: var(--accent); color: var(--paper); }
  </style>
  <%# Het script staat in assets/js/mod/news.js; de servergegevens gaan via partials/page-data.ejs (shaer-bqr). %>
  <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
  <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>

  <% if (!timeline || !timeline.length) { %>
    <div class="tl-empty">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>
      <p><%= t('tl.empty') %></p>
    </div>
  <% } else { %>
    <ol class="tl-feed" id="tl-feed">
      <% timeline.forEach(function(p){ %>
        <%- include('../partials/tl-item', { p: p }) %>
      <% }); %>
    </ol>
    <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#tl-feed', morePath: '/news' }) %>
  <% } %>
</div>

<style>
  .tl-wrap { max-width: 640px; margin: 1rem auto 3rem; padding: 0 1rem; }
  .tl-title { margin: 0 0 .15rem; font-size: clamp(1.5rem, 4vw, 1.8rem); }
  .tl-lead { color: var(--ink-soft, #888); margin: 0 0 1.5rem; }
  .tl-empty { text-align: center; color: var(--ink-soft, #888); margin: 3rem auto; }
  .tl-empty svg { width: 44px; height: 44px; color: color-mix(in srgb, var(--accent, #888) 60%, transparent); margin: 0 auto .75rem; display: block; }

  .tl-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
  .tl-item { padding: 1.1rem 1.15rem; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 8%, transparent);
    background: color-mix(in srgb, var(--ink, #000) 2.5%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease; }
  .tl-item:hover { border-color: color-mix(in srgb, var(--accent, #888) 32%, transparent);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--ink, #000) 6%, transparent); }

  .tl-head { display: flex; align-items: center; gap: .65rem; margin: 0 0 .65rem; }
  .tl-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
    background: color-mix(in srgb, var(--accent, #888) 22%, transparent); color: var(--accent, #555);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #888) 18%, transparent); }
  .tl-avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
  .tl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .tl-author { font-weight: 700; color: var(--ink, inherit); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-author:hover { text-decoration: underline; }
  .tl-handle { color: var(--ink-soft, #888); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-time { color: var(--ink-soft, #999); font-size: .78rem; flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }

  /* .tl-content, .tl-quote* and .tl-media* now live in partials/shared-styles,
     next to partials/note-body: the markup is shared with Berichten and the
     Guardian PWA, so the styling has to be too. What stays here is Krant-only. */
  /* Long posts collapse to a max height with a fade + "read more" (added by JS only when it overflows). */
  .tl-content.tl-clamp { max-height: 20em; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .tl-readmore { display: inline-block; margin: .15rem 0 .1rem; padding: .15rem 0;
    background: none; border: 0; color: var(--accent, #06c); font: inherit; font-weight: 600;
    font-size: .85rem; cursor: pointer; }
  .tl-readmore:hover { text-decoration: underline; }

  .tl-poll { margin: .75rem 0 0; display: flex; flex-direction: column; gap: 8px; }
  .tl-poll-form { display: flex; flex-direction: column; gap: 8px; }
  .tl-poll-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: 10px; cursor: pointer; }
  .tl-poll-choice:hover { border-color: var(--accent); }
  .tl-poll-choice input { accent-color: var(--accent); }
  .tl-poll-btn { align-self: flex-start; margin-top: 2px; }
  .tl-poll-res { position: relative; padding: 9px 12px; border-radius: 10px; overflow: hidden; background: var(--paper-2, rgba(128,128,128,.08)); display: flex; align-items: center; gap: 8px; }
  .tl-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: 0; }
  .tl-poll-res.is-mine .tl-poll-fill { background: color-mix(in srgb, var(--accent) 40%, transparent); }
  .tl-poll-name { position: relative; z-index: 1; flex: 1; font-size: .95rem; }
  .tl-poll-pct { position: relative; z-index: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
  .tl-poll-foot { font-size: .82rem; color: var(--ink-soft, #888); }

  .tl-embed { margin: .75rem 0 0; border-radius: 12px; overflow: hidden; background: var(--paper-2, #111); }
  .tl-embed-frame { width: 100%; border: 0; display: block; aspect-ratio: 16 / 9; }
  .tl-embed-spotify { aspect-ratio: auto; height: 152px; }
  .tl-embed-sc { aspect-ratio: auto; height: 166px; }
  .tl-embed-klonkt { aspect-ratio: auto; height: 180px; background: var(--paper, #fff); }
  .tl-embed-bandcamp { aspect-ratio: auto; height: 470px; }
  .tl-embed-apple { aspect-ratio: auto; height: 175px; }
  .tl-embed-open { display: inline-block; margin: .45rem .9rem 0 0; font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; }
  .tl-embed-open:hover { text-decoration: underline; }

  .tl-orig { display: inline-block; margin: .7rem 0 0; font-size: .82rem; color: var(--accent, #06c); text-decoration: none; }
  .tl-orig:hover { text-decoration: underline; }

  /* Uniform circular action buttons with coloured icons (no emoji). */
  .tl-actions { display: flex; gap: .5rem; margin-top: .9rem; align-items: center; }
  .tl-act-form { margin: 0; display: inline-flex; }
  .tl-act { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; padding: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
    background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
    color: var(--ink-soft, #888); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s, transform .1s; }
  .tl-act svg { width: 18px; height: 18px; display: block; }
  .tl-act:active { transform: scale(.9); }
  .tl-act-like svg { color: #e8b04b; }
  .tl-act-like:hover { background: color-mix(in srgb, #e8b04b 15%, transparent); border-color: color-mix(in srgb, #e8b04b 50%, transparent); }
  .tl-act-like.is-on { background: color-mix(in srgb, #e8b04b 18%, transparent); border-color: color-mix(in srgb, #e8b04b 60%, transparent); }
  .tl-act-boost svg { color: #2fa85a; }
  .tl-act-boost:hover { background: color-mix(in srgb, #2fa85a 15%, transparent); border-color: color-mix(in srgb, #2fa85a 50%, transparent); }
  .tl-act-boost.is-on { background: color-mix(in srgb, #2fa85a 18%, transparent); border-color: color-mix(in srgb, #2fa85a 60%, transparent); }
  .tl-act-reply svg { color: var(--accent, #06c); }
  .tl-act-reply:hover { background: color-mix(in srgb, var(--accent, #888) 14%, transparent); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
  .tl-act-block svg { color: #e0524d; }
  .tl-act-block:hover { background: color-mix(in srgb, #d9534f 14%, transparent); border-color: color-mix(in srgb, #d9534f 50%, transparent); }
</style>
<%- include('../partials/page-data', { pageData: { readMore: t('tl.read_more'), showLess: t('tl.show_less') } }) %>