Index: src/views/partials/profile-header.ejs =================================================================== --- src/views/partials/profile-header.ejs (revision 2165b6d3d57ceaa8b5d1f70491868482149470cf) +++ src/views/partials/profile-header.ejs (revision 7bc636b391c66ac399c33e54f7173a022c6a3cbd) @@ -26,13 +26,4 @@ try { _profileLinks = JSON.parse(site.profile_links) || []; } catch (e) { _profileLinks = []; } } - -// Profile-summary (lightbox) helpers — used by the avatar + the summary modal. -const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; -const _avatarUrl = (site && site.profile_photo) || ((typeof siteOwnerAvatar !== 'undefined' && siteOwnerAvatar) || ''); -const _platforms = (typeof platforms_catalog !== 'undefined' && platforms_catalog) || {}; -const _linkHref = function (p, u) { u = String(u || '').trim(); if (p === 'email' && u && u.indexOf('mailto:') !== 0) return 'mailto:' + u; if (p === 'phone' && u && !/^tel:/i.test(u)) return 'tel:' + u.replace(/[^\d+]/g, ''); return u; }; -const _linkVal = function (u) { return String(u || '').replace(/^(mailto:|tel:|https?:\/\/)/i, '').replace(/\/$/, ''); }; -const _isPrem = (typeof isPremium !== 'undefined' && isPremium); -let _sinceStr = ''; try { if (site && site.created_at) _sinceStr = new Date(site.created_at).toLocaleDateString('nl-NL', { day: '2-digit', month: 'short', year: 'numeric' }); } catch (e) {} %> @@ -41,9 +32,14 @@
- <%# Clicking the avatar — photo OR placeholder — opens the profile-summary modal. %> - +
@@ -72,8 +68,5 @@ <% } %> - <%# Follow-via-fediverse: a compact icon in the links row (keeps the header - short), and hidden for the owner — you don't follow yourself. %> - <% var _showFollow = (typeof canManageFedi === 'undefined' || !canManageFedi) && site && site.slug && (typeof apEnabled === 'undefined' || apEnabled); %> - <% if (_profileLinks.length || _showFollow) { %> + <% if (_profileLinks.length) { %> <% const _platforms = (typeof platforms_catalog !== 'undefined' && platforms_catalog) || {}; %> <% } %> @@ -105,62 +92,4 @@
- -<%# Profile-summary modal — opened by clicking the avatar. Shows photo + title + subtitle - + contact details + start date + premium status. %> -
- -
-<% if (_showFollow) { %> -<%# Follow-via-fediverse modal — replaces the native prompt() (which looked ugly). %> -
- -
-<% } %> -<%# Het script van de profielkop staat in assets/js/mod/chrome.js: deze partial - zit in de OOB-chrome en wordt bij elke htmx-navigatie opnieuw ingevoegd - (shaer-bqr). %> <% } %> @@ -187,5 +116,4 @@ width: 80px; height: 80px; - padding: 0; border-radius: 50%; overflow: hidden; @@ -194,9 +122,5 @@ transition: width 250ms, height 250ms; cursor: pointer; - font: inherit; - -webkit-appearance: none; - appearance: none; -} -.profile-photo[data-lightbox] { cursor: zoom-in; } +} .profile-photo:hover { border-color: var(--accent); @@ -326,65 +250,3 @@ .on-special .profile-links, .on-archive .profile-links { display: none; } - -/* Follow-via-fediverse: compact icon button, sits in the links row */ -.profile-fedi-link { border: 0; padding: 0; background: var(--paper-2); cursor: pointer; -webkit-appearance: none; appearance: none; } -/* The fediverse logo is an open line-network, so it reads smaller than a solid - glyph at 18px — render it larger INSIDE the same 36px circle (circle unchanged). */ -.profile-fedi-link svg { width: 22px; height: 22px; } - -/* Profile-summary modal (click the avatar) */ -.profile-photo[data-pf-summary] { cursor: zoom-in; } -.pf-summary { position: fixed; inset: 0; z-index: 2147483600; display: none; - align-items: center; justify-content: center; padding: 4vmin; - background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } -.pf-summary.is-open { display: flex; } -.pf-summary-card { position: relative; width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; - background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 20px; - padding: 1.75rem 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.4); text-align: center; } -.pf-summary-close { position: absolute; top: .6rem; right: .7rem; width: 36px; height: 36px; border: 0; - border-radius: 50%; background: var(--paper-2); color: var(--ink-soft); font-size: 1.5rem; line-height: 1; - cursor: pointer; display: flex; align-items: center; justify-content: center; } -.pf-summary-close:hover { color: var(--ink); } -.pf-summary-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto .9rem; - display: block; border: 3px solid var(--paper-2); background: #fff; } -.pf-summary-photo--ph { display: flex; align-items: center; justify-content: center; background: var(--paper-2); } -.pf-summary-photo--ph svg { width: 46px; height: 46px; color: var(--accent); } -.pf-summary-photo--ph span { font-family: var(--font-display, serif); font-size: 2.6rem; font-weight: 700; color: var(--ink-soft); } -.pf-summary-name { font-family: var(--font-display, serif); font-size: 1.4rem; margin: 0 0 .35rem; } -.pf-summary-prem { display: inline-block; margin: 0 0 .7rem; padding: .15rem .6rem; border-radius: 999px; - font-size: .75rem; font-weight: 600; background: var(--paper-2); color: var(--ink-soft); } -.pf-summary-prem.is-prem { background: color-mix(in srgb, #e8b04b 22%, transparent); color: #b8860b; } -.pf-summary-bio { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; } -.pf-summary-links { list-style: none; padding: 0; margin: .25rem 0 1rem; display: flex; flex-direction: column; gap: .4rem; text-align: left; } -.pf-summary-links a { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 12px; - text-decoration: none; color: var(--ink); background: var(--paper-2); transition: background .12s; } -.pf-summary-links a:hover { background: color-mix(in srgb, var(--brand, var(--accent)) 16%, var(--paper-2)); } -.pf-summary-ico { flex: 0 0 22px; width: 22px; height: 22px; color: var(--brand, var(--ink-soft)); display: inline-flex; } -.pf-summary-ico svg { width: 22px; height: 22px; } -.pf-summary-rowtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } -.pf-summary-lbl { font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; } -.pf-summary-val { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.pf-summary-since { color: var(--ink-soft); font-size: .8rem; margin: 0; } -.pf-summary-follow { display: inline-flex; align-items: center; gap: .5rem; margin: .2rem auto 1rem; padding: .5rem 1.15rem; - border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); - font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; transition: background .15s, color .15s; } -.pf-summary-follow:hover { background: var(--accent); color: var(--paper); } -.pf-summary-follow-ico { width: 18px; height: 18px; flex: 0 0 auto; } -.pf-follow { position: fixed; inset: 0; z-index: 2147483601; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.55); } -.pf-follow.is-open { display: flex; } -.pf-follow-card { position: relative; width: 100%; max-width: 380px; text-align: left; - background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; - padding: 1.5rem 1.4rem 1.3rem; box-shadow: 0 18px 50px rgba(0,0,0,.4); } -.pf-follow-x { position: absolute; top: .55rem; right: .65rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; - background: transparent; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; } -.pf-follow-title { margin: 0 0 .35rem; font-size: 1.15rem; } -.pf-follow-sub { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .86rem; line-height: 1.45; } -.pf-follow-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; } -.pf-follow-input:focus { outline: none; border-color: var(--accent); } -.pf-follow-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; } -.pf-follow-actions button { padding: .5rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; border: 0; } -.pf-follow-actions .pf-follow-cancel { background: transparent; border: 1.5px solid var(--rule); color: var(--ink); } -.pf-follow-actions .pf-follow-go { background: var(--accent); color: var(--paper); } -.pf-follow-actions .pf-follow-go:hover { filter: brightness(1.06); }