feat: add Home Page layout and styles, including header behavior and language support
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -1,15 +1,38 @@
|
||||
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 => {
|
||||
|
||||
82
packages/base/Resources/Public/Scss/layouts/_home-page.scss
Normal file
82
packages/base/Resources/Public/Scss/layouts/_home-page.scss
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,3 +15,5 @@
|
||||
@import "components/news_detail";
|
||||
@import 'components/footer';
|
||||
@import 'components/buttons';
|
||||
@import 'layouts/home-page';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user