diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 6b8b5dc..3291c46 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -3119,12 +3119,13 @@ body.layout-legacy .scroll-to-bottom svg { .comment::before { content: ""; + display: var(--comment-banner-display, block); position: absolute; top: 0; left: 0; right: 0; bottom: 0; - max-height: 300px; + max-height: var(--comment-banner-max-height, 300px); background-image: var(--author-banner, none); background-position: var(--author-banner-position, center top); background-size: var(--author-banner-size, cover); @@ -8441,11 +8442,6 @@ input#s_avatar { opacity: 0.8; } - -.nav-user-btn:hover { - background: rgba(255, 255, 255, 0.1); -} - /* Avatar-style button variant */ .nav-avatar-btn { background: none; @@ -8460,18 +8456,13 @@ input#s_avatar { transition: border-color 0.2s, background 0.2s; } -.nav-avatar-btn:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.15); - transform: none; - box-shadow: none; -} - .nav-avatar-btn.is-active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; } .nav-avatar-btn.is-active .nav-avatar-caret { @@ -8488,6 +8479,12 @@ input#s_avatar { height: 22px; object-fit: cover; flex-shrink: 0; + cursor: pointer; + transition: opacity 0.15s ease; +} + +.nav-avatar-img:hover { + opacity: 0.8; } .nav-avatar-name { @@ -8540,7 +8537,7 @@ input#s_avatar { .nav-user-menu a { display: block; - padding: 10px 15px; + padding: 5px 10px; color: var(--white); text-decoration: none; transition: background 0.2s; @@ -8563,6 +8560,13 @@ input#s_avatar { } } +#nav-user-toggle { + min-width: 100px; + text-align: left; + display: grid; + grid-template-columns: auto 1fr auto; +} + /* nav-links base: horizontal flex row on desktop */ .nav-links { display: flex; diff --git a/public/s/js/comments.js b/public/s/js/comments.js index f2d3bfa..f4fddcc 100644 --- a/public/s/js/comments.js +++ b/public/s/js/comments.js @@ -2200,7 +2200,8 @@ class CommentSystem { } } - const bannerStyle = (comment.banner_file && comment.banner_file !== 'null') + const bannerEnabled = window.f0ckCommentBannerEnabled !== false && window.f0ckSession?.comment_banner_enabled !== false; + const bannerStyle = (bannerEnabled && comment.banner_file && comment.banner_file !== 'null') ? `style="--author-banner: url('/a/${comment.banner_file}'); --author-banner-position: ${comment.banner_position === 'center' ? 'center top' : (comment.banner_position || 'center top')}; --author-banner-size: ${comment.banner_size || 'cover'}; --author-banner-repeat: ${comment.banner_repeat || 'repeat'};"` : ''; diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index a284dae..a5d7c76 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -846,6 +846,13 @@ window.cancelAnimFrame = (function () { if (userToggle && userMenu) { userToggle.addEventListener('click', (e) => { e.stopPropagation(); + if (e.target.closest('.nav-avatar-img')) { + const username = window.f0ckSession?.user; + if (username) { + window.location.href = `/user/${username.toLowerCase()}`; + return; + } + } const opening = !userMenu.classList.contains('show'); userMenu.classList.toggle('show'); userToggle.classList.toggle('is-active', opening); @@ -9265,6 +9272,13 @@ document.addEventListener("DOMContentLoaded", function () { var menu = document.getElementById(menuId); if (btn && menu) { btn.addEventListener('click', function (e) { + if (e.target.closest('.nav-avatar-img')) { + const username = window.f0ckSession?.user; + if (username) { + window.location.href = `/user/${username.toLowerCase()}`; + return; + } + } if (window.innerWidth <= 700) { e.preventDefault(); menu.classList.toggle('show-mobile'); diff --git a/src/index.mjs b/src/index.mjs index 949b2bc..494086d 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -1609,6 +1609,8 @@ process.on('uncaughtException', err => { user_alternative_infobox: useAltInfobox, user_alternative_steuerung: useAltSteuerung, user_banner_enabled: cfg.websrv.user_banner_enabled !== false, + comment_banner_enabled: (cfg.websrv.user_banner_enabled !== false) && (cfg.websrv.comment_banner_enabled !== false), + comment_banner_max_height: typeof cfg.websrv.comment_banner_max_height === 'number' ? cfg.websrv.comment_banner_max_height : 300, comment_display_mode: (activeReq && activeReq.session && typeof activeReq.session.comment_display_mode === 'number') ? activeReq.session.comment_display_mode : (data && typeof data.comment_display_mode === 'number' diff --git a/views/snippets/footer.html b/views/snippets/footer.html index 459518b..b2063ab 100644 --- a/views/snippets/footer.html +++ b/views/snippets/footer.html @@ -398,6 +398,7 @@ receive_system_notifications: @if(session)@if(session.receive_system_notifications !== false) true @else false @endif@else true @endif, receive_user_notifications: @if(session)@if(session.receive_user_notifications !== false) true @else false @endif@else true @endif, do_not_disturb: @if(session && session.do_not_disturb) true @else false @endif, + comment_banner_enabled: @if(comment_banner_enabled) true @else false @endif, comment_display_mode: {{ comment_display_mode }}, comment_max_length: {{ comment_max_length !== null && comment_max_length !== undefined ? comment_max_length : 'null' }}, development: @if(development) true @else false @endif, diff --git a/views/snippets/header.html b/views/snippets/header.html index 383952c..dc5f33d 100644 --- a/views/snippets/header.html +++ b/views/snippets/header.html @@ -23,6 +23,8 @@ } @endif :root { + --comment-banner-display: @if(comment_banner_enabled) block @else none @endif; + --comment-banner-max-height: @if(typeof comment_banner_max_height !== 'undefined'){{ comment_banner_max_height }}px@else 300px @endif; --favicon-url: url('@if(custom_favicon && custom_favicon.length > 0){{ custom_favicon }}@else/s/img/favicon.gif@endif'); @if(session && session.font) --font: 'CustomUserFont', monospace !important; @@ -64,7 +66,7 @@ @endif @endif - + @if(!private_society || session) diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html index eaaa466..6fbe931 100644 --- a/views/snippets/navbar.html +++ b/views/snippets/navbar.html @@ -43,11 +43,11 @@