feat: design change to hero and add stats element
This commit is contained in:
@@ -2,4 +2,4 @@ default_prompt_blocks:
|
||||
- "basic-prompt"
|
||||
- "typo3-development"
|
||||
directories:
|
||||
- "packages/base/ContentBlocks"
|
||||
- "packages"
|
||||
|
||||
@@ -1,79 +1,74 @@
|
||||
##############
|
||||
#### PAGE ####
|
||||
##############
|
||||
# Include existing configuration
|
||||
<INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
|
||||
|
||||
page = PAGE
|
||||
page {
|
||||
typeNum = 0
|
||||
shortcutIcon = EXT:base/Resources/Public/Icons/favicon.ico
|
||||
|
||||
10 = PAGEVIEW
|
||||
10 {
|
||||
paths {
|
||||
0 = EXT:base/Resources/Private/PageView/
|
||||
1 = {$page.pageview.paths}
|
||||
typeNum = 0
|
||||
shortcutIcon = EXT:base/Resources/Public/Icons/favicon.ico
|
||||
10 = PAGEVIEW
|
||||
10 {
|
||||
paths {
|
||||
0 = EXT:base/Resources/Private/PageView/
|
||||
1 = {$page.pageview.paths}
|
||||
}
|
||||
dataProcessing {
|
||||
10 = files
|
||||
10 {
|
||||
references.fieldName = media
|
||||
}
|
||||
dataProcessing {
|
||||
10 = files
|
||||
10 {
|
||||
references.fieldName = media
|
||||
}
|
||||
20 = menu
|
||||
20 {
|
||||
levels = 2
|
||||
includeSpacer = 1
|
||||
as = mainnavigation
|
||||
}
|
||||
30 = page-content
|
||||
20 = menu
|
||||
20 {
|
||||
levels = 2
|
||||
includeSpacer = 1
|
||||
as = mainnavigation
|
||||
}
|
||||
30 = page-content
|
||||
}
|
||||
}
|
||||
|
||||
meta {
|
||||
viewport = {$page.meta.viewport}
|
||||
robots = {$page.meta.robots}
|
||||
apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
|
||||
meta {
|
||||
viewport = {$page.meta.viewport}
|
||||
robots = {$page.meta.robots}
|
||||
apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
|
||||
|
||||
X-UA-Compatible = {$page.meta.compatible}
|
||||
X-UA-Compatible {
|
||||
attribute = http-equiv
|
||||
}
|
||||
X-UA-Compatible = {$page.meta.compatible}
|
||||
X-UA-Compatible {
|
||||
attribute = http-equiv
|
||||
}
|
||||
}
|
||||
|
||||
includeCSSLibs {
|
||||
includeCSS {
|
||||
main = EXT:base/Resources/Public/Scss/main.scss
|
||||
}
|
||||
|
||||
}
|
||||
includeJSLibs {
|
||||
navigation = EXT:base/Resources/Public/JavaScript/navigation.js
|
||||
}
|
||||
|
||||
includeCSS {
|
||||
main = EXT:base/Resources/Public/Scss/main.scss
|
||||
}
|
||||
|
||||
includeJSLibs {
|
||||
navigation = EXT:base/Resources/Public/JavaScript/navigation.js
|
||||
|
||||
}
|
||||
|
||||
includeJS {
|
||||
|
||||
}
|
||||
|
||||
includeJSFooterlibs {
|
||||
|
||||
}
|
||||
|
||||
includeJSFooter {
|
||||
test_scripts = EXT:base/Resources/Public/JavaScript/main.js
|
||||
}
|
||||
includeJSFooter {
|
||||
test_scripts = EXT:base/Resources/Public/JavaScript/main.js
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
|
||||
lib.contentElement {
|
||||
layoutRootPaths {
|
||||
0 = EXT:base/Resources/Private/ContentElements/Layouts/
|
||||
}
|
||||
layoutRootPaths {
|
||||
0 = EXT:base/Resources/Private/ContentElements/Layouts/
|
||||
}
|
||||
}
|
||||
lib.contentBlock {
|
||||
partialRootPaths.0 < lib.contentElement.partialRootPaths.0
|
||||
layoutRootPaths.0 < lib.contentElement.layoutRootPaths.0
|
||||
|
||||
settings < lib.contentElement.settings
|
||||
lib.contentBlock {
|
||||
partialRootPaths.0 < lib.contentElement.partialRootPaths.0
|
||||
layoutRootPaths.0 < lib.contentElement.layoutRootPaths.0
|
||||
settings < lib.contentElement.settings
|
||||
}
|
||||
|
||||
# Ensure parseFunc removes empty paragraphs and whitespace
|
||||
lib.parseFunc_RTE {
|
||||
nonTypoTagStdWrap.encapsLines.stripEmptyLines = 1
|
||||
nonTypoTagStdWrap.trim = 1
|
||||
externalBlocks {
|
||||
p {
|
||||
stdWrap.stripNL = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
<?php
|
||||
defined('TYPO3') or die();
|
||||
|
||||
// $GLOBALS['TCA']['tt_content']['columns']['cloonar_hero_bodytext']['config']['enableRichText'] = true;
|
||||
// Add the new fields for the stats element to TCA if needed:
|
||||
// This is only necessary if we need special configuration. By default Content Blocks handles field creation.
|
||||
// Here we simply ensure that the fields appear in the backend form.
|
||||
|
||||
// Register the content element type in tt_content (only if needed, Content Blocks typically handle this automatically):
|
||||
// $GLOBALS['TCA']['tt_content']['types']['cloonar_stats'] = [
|
||||
// 'showitem' => 'header, number1, label1, number2, label2, number3, label3, number4, label4'
|
||||
// ];
|
||||
|
||||
// The above is optional if Content Blocks extension is in use and config.yaml fields are applied automatically.
|
||||
|
||||
@@ -1,9 +1,21 @@
|
||||
.frame-type-cloonar_hero {
|
||||
background: #f9f9f9;
|
||||
padding: 1rem; /* Mobile-first padding */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: #cecece;
|
||||
}
|
||||
|
||||
|
||||
.frame-type-cloonar_hero + .frame {
|
||||
margin-top: -10rem;
|
||||
}
|
||||
|
||||
/* Inner container with white background and padding */
|
||||
.frame-type-cloonar_hero .hero-inner {
|
||||
padding: 3rem 1rem;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Mobile-first: stacked layout */
|
||||
.frame-type-cloonar_hero .hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -68,7 +80,6 @@
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Medium devices (≥768px) - slightly larger text and icons */
|
||||
@media (min-width: 768px) {
|
||||
.frame-type-cloonar_hero .hero-subheader {
|
||||
font-size: 1.2rem;
|
||||
@@ -94,13 +105,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (≥992px): Switch to 3-column layout */
|
||||
@media (min-width: 992px) {
|
||||
.frame-type-cloonar_hero {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Three-column grid: text (left), image (middle), icons (right) */
|
||||
.frame-type-cloonar_hero .hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
@@ -150,6 +155,6 @@
|
||||
}
|
||||
|
||||
.frame-type-cloonar_hero .hero-image {
|
||||
max-width: 300px; /* Slightly larger on desktop, but not too big */
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,27 +6,28 @@
|
||||
<f:section name="Main">
|
||||
<f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero-subheader">{data.subheader}</div>
|
||||
<h2 class="hero-title">{data.header}</h2>
|
||||
<div class="hero-text">
|
||||
<f:format.html>{data.bodytext}</f:format.html>
|
||||
<div class="hero-inner">
|
||||
<div class="hero">
|
||||
<div class="hero-subheader">{data.subheader}</div>
|
||||
<h2 class="hero-title">{data.header}</h2>
|
||||
<div class="hero-text">
|
||||
<f:format.html>{data.bodytext}</f:format.html>
|
||||
</div>
|
||||
<div class="hero-social-icons">
|
||||
<a href="#" class="social-icon">X</a>
|
||||
<a href="#" class="social-icon">Instagram</a>
|
||||
<a href="#" class="social-icon">TikTok</a>
|
||||
</div>
|
||||
<div class="hero-image-wrapper">
|
||||
<f:if condition="{data.image}">
|
||||
<f:then>
|
||||
<f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<p>No image available</p>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-social-icons">
|
||||
<a href="#" class="social-icon">X</a>
|
||||
<a href="#" class="social-icon">Instagram</a>
|
||||
<a href="#" class="social-icon">TikTok</a>
|
||||
</div>
|
||||
<div class="hero-image-wrapper">
|
||||
<f:if condition="{data.image}">
|
||||
<f:then>
|
||||
<f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
|
||||
</f:then>
|
||||
<f:else>
|
||||
<p>No image available</p>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="next-section-overlap"></div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
.frame-type-cloonar_stats .stats-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 10; /* Ensure it's on top of the hero container */
|
||||
background: #fff;
|
||||
padding: 3rem 1rem;
|
||||
max-width: 1140px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Each paragraph is treated as a column */
|
||||
.frame-type-cloonar_stats .stats-wrapper p {
|
||||
flex: 1 1 calc(25% - 2rem);
|
||||
min-width: 150px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Lead paragraphs have larger text for numbers */
|
||||
.frame-type-cloonar_stats .stats-wrapper p.lead {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #3c6418;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.frame-type-cloonar_stats .stats-wrapper p:not(.lead) {
|
||||
font-size: 0.9rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.frame-type-cloonar_stats .stats-wrapper {
|
||||
gap: 1rem;
|
||||
padding: 2rem 1rem;
|
||||
margin-top: -5rem; /* Adjust as needed for smaller screens */
|
||||
}
|
||||
.frame-type-cloonar_stats .stats-wrapper p {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
name: cloonar/stats
|
||||
typeName: cloonar_stats
|
||||
group: default
|
||||
prefixFields: true
|
||||
prefixType: full
|
||||
fields:
|
||||
- identifier: bodytext
|
||||
type: Textarea
|
||||
enableRichtext: true
|
||||
useExistingField: true
|
||||
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0"?>
|
||||
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
|
||||
<file datatype="plaintext" original="labels.xlf" source-language="en" product-name="cloonar/stats">
|
||||
<header/>
|
||||
<body>
|
||||
<trans-unit id="title">
|
||||
<source>Statistics Block</source>
|
||||
</trans-unit>
|
||||
<trans-unit id="description">
|
||||
<source>A responsive statistics content block with four editable columns.</source>
|
||||
</trans-unit>
|
||||
</body>
|
||||
</file>
|
||||
</xliff>
|
||||
@@ -0,0 +1,16 @@
|
||||
<html
|
||||
xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true"
|
||||
>
|
||||
<f:layout name="Preview"/>
|
||||
|
||||
<f:section name="Header">
|
||||
<be:link.editRecord uid="{data.uid}" table="{data.mainType}">
|
||||
Statistics Preview
|
||||
</be:link.editRecord>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Content">
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<f:layout name="Default" />
|
||||
|
||||
<f:section name="Header" />
|
||||
|
||||
<f:section name="Main">
|
||||
<f:asset.css identifier="CBStats" href="{cb:assetPath()}/frontend.css" />
|
||||
|
||||
<div class="stats-wrapper">
|
||||
<f:format.html>
|
||||
{data.bodytext}
|
||||
</f:format.html>
|
||||
</div>
|
||||
</f:section>
|
||||
Reference in New Issue
Block a user