feat: design change to hero and add stats element
This commit is contained in:
@@ -2,4 +2,4 @@ default_prompt_blocks:
|
|||||||
- "basic-prompt"
|
- "basic-prompt"
|
||||||
- "typo3-development"
|
- "typo3-development"
|
||||||
directories:
|
directories:
|
||||||
- "packages/base/ContentBlocks"
|
- "packages"
|
||||||
|
|||||||
@@ -1,79 +1,74 @@
|
|||||||
##############
|
# Include existing configuration
|
||||||
#### PAGE ####
|
<INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
|
||||||
##############
|
|
||||||
page = PAGE
|
page = PAGE
|
||||||
page {
|
page {
|
||||||
typeNum = 0
|
typeNum = 0
|
||||||
shortcutIcon = EXT:base/Resources/Public/Icons/favicon.ico
|
shortcutIcon = EXT:base/Resources/Public/Icons/favicon.ico
|
||||||
|
10 = PAGEVIEW
|
||||||
10 = PAGEVIEW
|
10 {
|
||||||
10 {
|
paths {
|
||||||
paths {
|
0 = EXT:base/Resources/Private/PageView/
|
||||||
0 = EXT:base/Resources/Private/PageView/
|
1 = {$page.pageview.paths}
|
||||||
1 = {$page.pageview.paths}
|
}
|
||||||
|
dataProcessing {
|
||||||
|
10 = files
|
||||||
|
10 {
|
||||||
|
references.fieldName = media
|
||||||
}
|
}
|
||||||
dataProcessing {
|
20 = menu
|
||||||
10 = files
|
20 {
|
||||||
10 {
|
levels = 2
|
||||||
references.fieldName = media
|
includeSpacer = 1
|
||||||
}
|
as = mainnavigation
|
||||||
20 = menu
|
|
||||||
20 {
|
|
||||||
levels = 2
|
|
||||||
includeSpacer = 1
|
|
||||||
as = mainnavigation
|
|
||||||
}
|
|
||||||
30 = page-content
|
|
||||||
}
|
}
|
||||||
|
30 = page-content
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
meta {
|
meta {
|
||||||
viewport = {$page.meta.viewport}
|
viewport = {$page.meta.viewport}
|
||||||
robots = {$page.meta.robots}
|
robots = {$page.meta.robots}
|
||||||
apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
|
apple-mobile-web-app-capable = {$page.meta.apple-mobile-web-app-capable}
|
||||||
|
|
||||||
X-UA-Compatible = {$page.meta.compatible}
|
X-UA-Compatible = {$page.meta.compatible}
|
||||||
X-UA-Compatible {
|
X-UA-Compatible {
|
||||||
attribute = http-equiv
|
attribute = http-equiv
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
includeCSSLibs {
|
includeCSS {
|
||||||
|
main = EXT:base/Resources/Public/Scss/main.scss
|
||||||
|
}
|
||||||
|
|
||||||
}
|
includeJSLibs {
|
||||||
|
navigation = EXT:base/Resources/Public/JavaScript/navigation.js
|
||||||
|
}
|
||||||
|
|
||||||
includeCSS {
|
includeJSFooter {
|
||||||
main = EXT:base/Resources/Public/Scss/main.scss
|
test_scripts = EXT:base/Resources/Public/JavaScript/main.js
|
||||||
}
|
}
|
||||||
|
|
||||||
includeJSLibs {
|
|
||||||
navigation = EXT:base/Resources/Public/JavaScript/navigation.js
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
includeJS {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
includeJSFooterlibs {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
includeJSFooter {
|
|
||||||
test_scripts = EXT:base/Resources/Public/JavaScript/main.js
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
<INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
|
|
||||||
lib.contentElement {
|
lib.contentElement {
|
||||||
layoutRootPaths {
|
layoutRootPaths {
|
||||||
0 = EXT:base/Resources/Private/ContentElements/Layouts/
|
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
|
<?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 {
|
.frame-type-cloonar_hero {
|
||||||
background: #f9f9f9;
|
position: relative;
|
||||||
padding: 1rem; /* Mobile-first padding */
|
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 {
|
.frame-type-cloonar_hero .hero {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -68,7 +80,6 @@
|
|||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Medium devices (≥768px) - slightly larger text and icons */
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.frame-type-cloonar_hero .hero-subheader {
|
.frame-type-cloonar_hero .hero-subheader {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -94,13 +105,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Large devices (≥992px): Switch to 3-column layout */
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.frame-type-cloonar_hero {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Three-column grid: text (left), image (middle), icons (right) */
|
|
||||||
.frame-type-cloonar_hero .hero {
|
.frame-type-cloonar_hero .hero {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr auto auto;
|
grid-template-columns: 1fr auto auto;
|
||||||
@@ -150,6 +155,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.frame-type-cloonar_hero .hero-image {
|
.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:section name="Main">
|
||||||
<f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
|
<f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
|
||||||
|
|
||||||
<div class="hero">
|
<div class="hero-inner">
|
||||||
<div class="hero-subheader">{data.subheader}</div>
|
<div class="hero">
|
||||||
<h2 class="hero-title">{data.header}</h2>
|
<div class="hero-subheader">{data.subheader}</div>
|
||||||
<div class="hero-text">
|
<h2 class="hero-title">{data.header}</h2>
|
||||||
<f:format.html>{data.bodytext}</f:format.html>
|
<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>
|
||||||
<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>
|
</div>
|
||||||
</f:section>
|
</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