Add conditional hero content for logged-in and anonymous users
- Add theme settings for anonymous user hero title and content - Add login and register button text settings - Update WelcomeBanner component to detect user authentication state - Display custom content and login/register buttons for anonymous users - Display search functionality for logged-in users - Add responsive styling for authentication buttons with hover effects - Update .gitignore to exclude Claude Code files
This commit is contained in:
parent
f595ef7b09
commit
c4f807356c
4 changed files with 130 additions and 7 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -2,3 +2,5 @@
|
|||
*.log
|
||||
node_modules/
|
||||
.env
|
||||
.claude
|
||||
.CLAUDE.md
|
|
@ -153,6 +153,62 @@
|
|||
justify-self: stretch;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
/* Hero buttons for anonymous users */
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-login-btn,
|
||||
.hero-register-btn {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.hero-login-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: #fff;
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-login-btn:hover {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero-register-btn {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.hero-register-btn:hover {
|
||||
background-color: #fff;
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hero-login-btn,
|
||||
.hero-register-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* CTA szekció a hero alatt */
|
||||
.cta-section {
|
||||
|
|
|
@ -7,11 +7,13 @@ import { eq, and, not } from "truth-helpers";
|
|||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
|
||||
import SearchMenu from "discourse/components/search-menu";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import icon from "discourse-common/helpers/d-icon";
|
||||
|
||||
export default class WelcomeBanner extends Component {
|
||||
@service router;
|
||||
@service site;
|
||||
@service currentUser;
|
||||
|
||||
get displayForRoute() {
|
||||
const showOnPages = settings.show_on_pages || "homepage_only";
|
||||
|
@ -33,6 +35,22 @@ export default class WelcomeBanner extends Component {
|
|||
return this.site.mobileView;
|
||||
}
|
||||
|
||||
get isAnonymous() {
|
||||
return !this.currentUser;
|
||||
}
|
||||
|
||||
get heroTitle() {
|
||||
return this.isAnonymous
|
||||
? settings.hero_title_anonymous_html
|
||||
: settings.hero_title_html;
|
||||
}
|
||||
|
||||
get heroContent() {
|
||||
return this.isAnonymous
|
||||
? settings.hero_content_anonymous_html
|
||||
: settings.hero_content_html;
|
||||
}
|
||||
|
||||
didInsert() {
|
||||
document.documentElement.classList.add("display-welcome-banner");
|
||||
}
|
||||
|
@ -57,15 +75,30 @@ export default class WelcomeBanner extends Component {
|
|||
<div class="hero-deco"></div>
|
||||
<div class="hero-content">
|
||||
<h2 class="hero-title">
|
||||
{{htmlSafe settings.hero_title_html}}
|
||||
{{htmlSafe this.heroTitle}}
|
||||
</h2>
|
||||
<div class="hero-description">
|
||||
{{htmlSafe settings.hero_content_html}}
|
||||
{{htmlSafe this.heroContent}}
|
||||
</div>
|
||||
{{#if (and settings.enable_hero_search (not this.isMobile))}}
|
||||
<div class="search-container" role="search">
|
||||
<SearchMenu @searchInputId="welcome-banner-search" />
|
||||
{{#if this.isAnonymous}}
|
||||
<div class="hero-buttons">
|
||||
<DButton
|
||||
@action={{this.router.transitionTo "login"}}
|
||||
@label={{settings.login_button_text}}
|
||||
class="btn-primary hero-login-btn"
|
||||
/>
|
||||
<DButton
|
||||
@action={{this.router.transitionTo "signup"}}
|
||||
@label={{settings.register_button_text}}
|
||||
class="btn-default hero-register-btn"
|
||||
/>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if (and settings.enable_hero_search (not this.isMobile))}}
|
||||
<div class="search-container" role="search">
|
||||
<SearchMenu @searchInputId="welcome-banner-search" />
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
36
settings.yml
36
settings.yml
|
@ -84,8 +84,40 @@ hero_content_html:
|
|||
type: string
|
||||
textarea: true
|
||||
description:
|
||||
en: Hero section content (HTML allowed)
|
||||
hu: Hero szekció tartalma (HTML használható)
|
||||
en: Hero section content for logged-in users (HTML allowed)
|
||||
hu: Hero szekció tartalma bejelentkezett felhasználóknak (HTML használható)
|
||||
|
||||
hero_title_anonymous_html:
|
||||
default: "👋 Üdvözlünk a <strong>Nyíltvilág</strong> fórumon!"
|
||||
type: string
|
||||
textarea: true
|
||||
description:
|
||||
en: Hero section title for anonymous users (HTML allowed)
|
||||
hu: Hero szekció címe nem bejelentkezett felhasználóknak (HTML használható)
|
||||
|
||||
hero_content_anonymous_html:
|
||||
default: |
|
||||
<p>Ez a közösségi tér mindazoknak szól, akiket lelkesít a technológia világa – legyen szó nyílt forráskódról, kiberbiztonságról, adatvédelemről vagy mesterséges intelligenciáról.</p>
|
||||
<p>Csatlakozz hozzánk, és légy részese egy nyitott és inspiráló közösségnek, ahol megoszthatod a tudásod, kérdezhetsz, vagy tapasztalatokat cserélhetsz másokkal! 🌍✨</p>
|
||||
type: string
|
||||
textarea: true
|
||||
description:
|
||||
en: Hero section content for anonymous users (HTML allowed)
|
||||
hu: Hero szekció tartalma nem bejelentkezett felhasználóknak (HTML használható)
|
||||
|
||||
login_button_text:
|
||||
default: "Belépés"
|
||||
type: string
|
||||
description:
|
||||
en: Login button text for anonymous users
|
||||
hu: Belépés gomb szövege nem bejelentkezett felhasználóknak
|
||||
|
||||
register_button_text:
|
||||
default: "Regisztráció"
|
||||
type: string
|
||||
description:
|
||||
en: Register button text for anonymous users
|
||||
hu: Regisztráció gomb szövege nem bejelentkezett felhasználóknak
|
||||
|
||||
# =============================================================================
|
||||
# 🔍 SEARCH SETTINGS
|
||||
|
|
Loading…
Reference in a new issue