Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: add Home Page layout and styles, including header behavior and language support

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-21 12:24:16 +02:00
parent b1cb4d0208
commit 7ef39874e5
8 changed files with 206 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/HomePage.tsconfig Normal file
View File

@@ -0,0 +1,22 @@
mod.web_layout.BackendLayouts {
home_page {
title = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.home_page
icon = EXT:base/Resources/Public/Images/BackendLayouts/default.png
config {
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.column.content
colPos = 0
}
}
}
}
}
}
}
}

40
packages/base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript Normal file
View File

@@ -0,0 +1,40 @@
# PAGE CLASS
lib.page.class = COA
lib.page.class {
// Page alias or id as fallback
10 = TEXT
10 {
field = alias // uid
noTrimWrap = |page-||
}
// Current level of the page within the tree structure
20 = TEXT
20 {
data = level:1
noTrimWrap = | pagelevel-||
}
// Language
30 = TEXT
30 {
data = siteLanguage:languageId
noTrimWrap = | language-||
}
// Backend layout
40 = TEXT
40 {
data = pagelayout
replacement.10 {
search = pagets__
replace =
}
ifEmpty = default
noTrimWrap = | backendlayout-||
}
// Layout
50 = TEXT
50 {
field = layout
noTrimWrap = | layout-||
ifEmpty = default
}
}

16
packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript
View File

@@ -3,10 +3,24 @@
# Include constants
#<INCLUDE_TYPOSCRIPT: source="FILE:EXT:base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript">
# HELPER
@import 'EXT:base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript'
page = PAGE
page {
typeNum = 0
shortcutIcon = EXT:base/Resources/Public/Favicons/favicon-96x96.png
bodyTagCObject = COA
bodyTagCObject {
10 = TEXT
10.data = TSFE:id
10.noTrimWrap = | id="p|"|
20 =< lib.page.class
20.stdWrap.noTrimWrap = | class="|"|
wrap = <body|>
}
10 = PAGEVIEW
10 {
paths {
@@ -32,6 +46,7 @@ page {
as = metanavigation
}
}
}
meta {
@@ -88,6 +103,7 @@ page {
}
footerMenuPid = {$footerMenuPid}
}
lib.contentElement {

10
packages/base/Resources/Private/Language/locallang_be.xlf
View File

@@ -18,6 +18,16 @@
<trans-unit id="backend_layout.column.right">
<source>Right</source>
</trans-unit>
<trans-unit id="backend_layout.home_page">
<source>Home Page</source>
</trans-unit>
<trans-unit id="backend_layout.column.hero">
<source>Hero</source>
</trans-unit>
<trans-unit id="backend_layout.column.content">
<source>Content</source>
</trans-unit>
</body>
</file>
</xliff>

6
packages/base/Resources/Private/PageView/Pages/Home_page.html Normal file
View File

@@ -0,0 +1,6 @@
<f:layout name="Default" />
<f:section name="Main">
<f:comment> Render main content for colPos 0 (Home Page) </f:comment>
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0'}" />
</f:section>

33
packages/base/Resources/Public/JavaScript/navigation.js
View File

@@ -1,16 +1,39 @@
document.addEventListener('DOMContentLoaded', function () {
const nav = document.getElementById('mainNav');
const nav = document.getElementById('mainNav'); // Keep for mobile toggle
const header = document.querySelector('header'); // Get the header element
const toggle = document.getElementById('navToggle');
// Toggle menu on mobile
toggle.addEventListener('click', function () {
nav.classList.toggle('open');
nav.classList.toggle('open'); // Mobile menu still controlled by nav
toggle.classList.toggle('active');
});
// No need to add or remove sticky class here since CSS handles position: sticky
// We simply rely on the CSS-based sticky behavior and reserved space via body padding.
// Handle transparent header scroll effect for home page on desktop
const body = document.body;
const scrollThreshold = 50; // Pixels to scroll before changing background
function handleScroll() {
// Check if it's the home page layout and desktop view
if (header && body.classList.contains('backendlayout-home_page') && window.innerWidth >= 1024) { // 1024px is Tailwind's default lg breakpoint
if (window.scrollY > scrollThreshold) {
header.classList.add('scrolled'); // Add class to header
} else {
header.classList.remove('scrolled'); // Remove class from header
}
} else if (header) { // Check if header exists before trying to remove class
// Ensure scrolled class is removed if not on home page desktop or resized below lg
header.classList.remove('scrolled'); // Remove class from header
}
}
// Initial check in case the page loads already scrolled
handleScroll();
// Add scroll and resize listeners
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll); // Re-check on resize
const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
submenuParents.forEach(parent => {
parent.addEventListener('click', (e) => {

82
packages/base/Resources/Public/Scss/layouts/_home-page.scss Normal file
View File

@@ -0,0 +1,82 @@
// Styles specific to the Home Page layout (.backendlayout-home_page)
.backendlayout-home_page {
// --- Target the header element ---
header {
// --- Mobile First: Always Primary Background ---
@apply bg-primary text-white;
// Mobile link/icon colors (on primary background)
#mainNav .nav-link { // Target links within #mainNav
@apply text-white hover:text-gray-200;
}
#mainNav .nav-toggle-icon,
#mainNav .nav-toggle-icon::before,
#mainNav .nav-toggle-icon::after {
@apply bg-white; // Ensure mobile toggle is visible
}
// Adjust mobile submenu link colors if needed (depends on dropdown background)
#mainNav .sub-menu .nav-link {
@apply text-gray-700 hover:text-black; // Assuming light dropdown background
}
// --- Desktop Styles ---
@screen lg {
// Initial state: Transparent background, fixed position
@apply fixed top-0 left-0 right-0 z-50 bg-transparent transition-colors duration-300 ease-in-out;
// Initial link colors and background for transparent header (desktop)
#mainNav .nav-link {
@apply bg-white text-primary hover:text-brand px-3 py-1 rounded; // Add bg-white, padding, and rounded corners
}
// Ensure mobile toggle icon also uses primary color initially on desktop if visible (though usually hidden)
#mainNav .nav-toggle-icon,
#mainNav .nav-toggle-icon::before,
#mainNav .nav-toggle-icon::after {
@apply bg-primary;
}
// Desktop submenu link colors (assuming light dropdown background)
#mainNav .sub-menu .nav-link {
@apply text-gray-700 hover:text-black;
}
// Scrolled state: Primary background (desktop)
&.scrolled {
@apply bg-primary shadow-md;
// Link colors for primary background (desktop scrolled)
#mainNav .nav-link {
@apply text-white hover:text-gray-200;
}
// Submenu link colors likely don't need changing here if dropdown is consistent
}
}
}
}
// --- Default styles for header on NON-home pages ---
// Ensures header has a background and correct colors on other pages
body:not(.backendlayout-home_page) {
header {
@apply bg-primary text-white; // Or your desired default background/text
#mainNav .nav-link {
@apply text-white hover:text-gray-200;
}
#mainNav .nav-toggle-icon,
#mainNav .nav-toggle-icon::before,
#mainNav .nav-toggle-icon::after {
@apply bg-white;
}
#mainNav .sub-menu .nav-link {
@apply text-gray-700 hover:text-black; // Assuming light dropdown background
}
}
// On non-home pages, main content doesn't need extra padding-top
@screen lg {
main {
@apply pt-0; // Reset padding if needed
}
}
}

2
packages/base/Resources/Public/Scss/main.scss
View File

@@ -15,3 +15,5 @@
@import "components/news_detail";
@import 'components/footer';
@import 'components/buttons';
@import 'layouts/home-page';