Skip to content

Commit

Permalink
feat: add item list layout module (#298)
Browse files Browse the repository at this point in the history
  • Loading branch information
JimSeven authored Sep 25, 2024
1 parent ef3f1ea commit 82000c3
Show file tree
Hide file tree
Showing 12 changed files with 239 additions and 5 deletions.
33 changes: 33 additions & 0 deletions app/View/Components/Elements/Element.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<?php

namespace App\View\Components\Elements;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Element extends Component
{
/**
* Create a new component instance.
*/
public function __construct(public string $element_id, public string $type, public $context)
{
$this->element_id = $element_id;
$this->type = $type;
$this->context = $context;
}

public function data()
{
return array_merge(parent::data(), $this->context->toArray());
}

/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.elements.info-box');
}
}
18 changes: 18 additions & 0 deletions app/View/Components/Elements/InfoItem.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php

namespace App\View\Components\Elements;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class InfoItem extends Element
{
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.elements.info-item');
}
}
18 changes: 18 additions & 0 deletions app/View/Components/LayoutModules/ItemList.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php

namespace App\View\Components\LayoutModules;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class ItemList extends Module
{
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.layout-modules.item-list');
}
}
88 changes: 87 additions & 1 deletion content/collections/pages/home.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: 763e6082-7a1f-4da4-994b-68f51aff53e5
blueprint: page
title: Startseite
updated_by: 7b2bf1c2-0b8e-44d9-a774-98d3580bee37
updated_at: 1727193151
updated_at: 1727266404
layout_modules:
-
id: m1glzvry
Expand All @@ -27,6 +27,92 @@ layout_modules:
enabled: true
type: adaptive_split
enabled: true
-
id: m1hp8kx3
overline: 'Get the help you need'
headline: 'Support center'
intro_text: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.'
items:
-
id: m1hpapam
headline: 'Sicherheit für Dein Projekt'
icon: lock-closed
text:
-
type: paragraph
content:
-
type: text
text: 'Vermeide Unsicherheiten und gehe mit klaren, durchdachten Projektplänen voran. Unsere Beratung gibt Dir die Sicherheit, dass Dein Projekt von Anfang an auf dem richtigen Weg ist.'
type: info_item
enabled: true
-
id: m1hpbl6t
headline: 'Fokus auf Deine Ziele'
icon: viewfinder-circle
text:
-
type: paragraph
content:
-
type: text
text: 'Wir richten uns nach Deinen Nutzerbedürfnissen und Geschäftsanforderungen, um eine Strategie zu entwickeln, die Dein Team vereint und Produkte schafft, die Deine Kunden begeistern.'
type: info_item
enabled: true
-
id: m1hpdhc2
headline: 'Nutze unsere Erfahrung'
icon: user-group
text:
-
type: paragraph
content:
-
type: text
text: 'Profitiere von über einem Jahrzehnt Erfahrung in der Gestaltung, Entwicklung und Bereitstellung maßgeschneiderter Softwarelösungen. Mit uns an Deiner Seite bist Du bestens gerüstet, um Deine digitalen Projekte erfolgreich umzusetzen.'
type: info_item
enabled: true
-
id: m1htqgvh
headline: 'Nutzerzentrierte Lösungen'
icon: arrow-down-on-square
text:
-
type: paragraph
content:
-
type: text
text: 'Durch fundierte Nutzerforschung und detaillierte Erkenntnisse stellen wir sicher, dass wir die richtigen Probleme für die richtigen Menschen lösen. So erreichst Du mit Deinem Produkt genau Deine Zielgruppe.'
type: info_item
enabled: true
-
id: m1htsbfv
headline: 'Klare Vision'
icon: fire
text:
-
type: paragraph
content:
-
type: text
text: 'Mit einer klaren Vision kannst Du Dein Team von Anfang bis Ende ausrichten. So entstehen großartige Funktionen und Ideen, die in die Design- und Entwicklungsproduktion umgesetzt werden.'
type: info_item
enabled: true
-
id: m1htt048
headline: 'Effiziente Priorisierung'
icon: numbered-list
text:
-
type: paragraph
content:
-
type: text
text: 'Wir unterstützen Dich bei der Priorisierung von Kundenanforderungen und Stakeholder-Ideen. So stellst Du sicher, dass die wichtigsten Aspekte Deines Projekts im Fokus stehen und optimal umgesetzt werden.'
type: info_item
enabled: true
type: item_list
enabled: true
page_title: 'Von Deiner Vision zur digitalen Erfolgsgeschichte'
intro_text: '21st digital ist Dein Partner für die Entwicklung innovativer digitaler Produkte. Wir begleiten Dich durch die digitale Transformation, hinterfragen bestehende Prozesse und entwickeln maßgeschneiderte Strategien, um sowohl digitale Produkte als auch Geschäftsmodelle erfolgreich zu gestalten.'
cta: 'https://calendly.com/21stdigital/meeting?month=2024-09'
Expand Down
2 changes: 1 addition & 1 deletion resources/css/config/_sizes.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

/* grid sizes */
--grid-columns: 12;
--grid-gap: 2rem;
--grid-gap: 3.2rem;
--grid-gap-sum: calc(var(--grid-gap) * (var(--grid-columns) - 1));
--grid-col-width: calc((var(--container-width) - var(--grid-gap-sum)) / var(--grid-columns));

Expand Down
5 changes: 5 additions & 0 deletions resources/fieldsets/common.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,11 @@ fields:
fields:
-
import: layout_module_quote
item_list:
display: 'Item List'
fields:
-
import: layout_module_item_list
-
handle: elements
field:
Expand Down
18 changes: 18 additions & 0 deletions resources/fieldsets/element_info_item.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
title: '02 - Element | Info Item'
fields:
-
handle: headline
field:
type: text
display: Headline
width: 66
-
handle: icon
field: common.icon
config:
width: 33
-
handle: text
field: common.text_basic
config:
display: Text
19 changes: 19 additions & 0 deletions resources/fieldsets/layout_module_item_list.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
title: '03 - Layout Module | Item List'
fields:
-
import: element_section_header_with_text
-
handle: items
field:
type: replicator
display: Items
collapse: true
sets:
common:
display: Common
sets:
info_item:
display: 'Info Item'
fields:
-
import: element_info_item
11 changes: 11 additions & 0 deletions resources/views/components/elements/info-item.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<section class="grid-cols-info-item grid gap-20">
<header>
<x-utilities.svg :svg="$icon" class="h-auto w-[4rem] fill-current" />
</header>
<div class="space-y-4 sm:space-y-8">
<h3 class="text-h6">
{{ $headline }}
</h3>
<x-text :text="$text" />
</div>
</section>
24 changes: 24 additions & 0 deletions resources/views/components/layout-modules/item-list.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<section {{ $attributes->class(['layout-content']) }}>
@if ($headline)
<div class="grid-cols gap sm:mb-84 lg:mb-84 mb-32 mb-52 grid">
<x-section-header class="col-span-full" :overline="$overline" :intro_text="$intro_text"
alignment="center">
{{ $headline }}
</x-section-header>
</div>
@endif
<div class="grid-cols gap-x grid gap-y-32">

<ul
class="gap-x col-span-full grid gap-y-52 sm:grid-cols-2 md:max-xl:col-start-2 md:max-xl:-col-end-2 xl:grid-cols-3">

@foreach ($items as $element)
<li class="lg:col-span-1 sm:max-xl:[&:last-child:nth-child(odd)]:col-span-full">
<x-dynamic-component :component="'elements.' . $element['type']" :context="$element" :element_id="$element['id']"
:type="$element['type']" />
</li>
@endforeach
</ul>

</div>
</section>
5 changes: 3 additions & 2 deletions resources/views/components/section-header.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{!! nl2br(e($headline ?? $slot)) !!}
</h2>
@if ($intro_text)
<p class="text-c1 col-span-full mt-12 sm:col-span-8">
<p class="text-c1 col-span-full mt-12 md:col-span-10 lg:col-span-8">
{!! nl2br(e($intro_text)) !!}
</p>
@endif
Expand All @@ -32,7 +32,8 @@
{!! nl2br(e($headline ?? $slot)) !!}
</h2>
@if ($intro_text)
<p class="text-c1 col-span-full mt-12 whitespace-pre-line sm:col-span-8 sm:col-start-3">
<p
class="text-c1 col-span-full mt-12 md:col-span-10 md:col-start-2 lg:col-span-8 lg:col-start-3">
{!! nl2br(e($intro_text)) !!}
</p>
@endif
Expand Down
3 changes: 2 additions & 1 deletion tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,8 @@ const config: Config = {
extend: {
gridTemplateColumns: {
DEFAULT: 'repeat(var(--grid-columns), minmax(0, 1fr))',
'global-header': 'auto 1fr auto'
'global-header': 'auto 1fr auto',
'info-item': 'auto 1fr'
},
textColor: {
DEFAULT: 'rgb(var(--default-text-color) / <alpha-value>)'
Expand Down

0 comments on commit 82000c3

Please sign in to comment.