Skip to content

Commit 3fa8cc4

Browse files
secondnetworksecondnetwork
committed
style: add component with dynamic fields and styling; enhance existing block components for improved layout and functionality
1 parent 8174917 commit 3fa8cc4

11 files changed

Lines changed: 197 additions & 85 deletions

File tree

‎stubs/resources/css/main.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ License URI: http://opensource.org/licenses/mit-license.php
1919

2020

2121
@import "tailwindcss";
22+
@plugin "@tailwindcss/typography";
2223
@source "../views";
2324
@source "../views/";
2425
@source "../../app/";
@@ -31,7 +32,7 @@ License URI: http://opensource.org/licenses/mit-license.php
3132

3233
@import "./base/base.css";
3334
@import "./base/fonts.css";
34-
@import "./base/typography.css";
35+
/* @import "./base/typography.css"; */
3536
@import "./base/grid_layout.css";
3637

3738
@import "./components/header_hero.css";

‎stubs/resources/js/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11

2-
// import '/resources/sass/neworbit.scss'
2+

‎stubs/resources/views/components/blocks/button.blade.php‎

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,25 @@
11
@props([
22
'item' => '',
3-
'field' => null,
43
])
5-
4+
@if($item->type == 'button')
5+
<div>
66
@php
7-
if ($field) {
8-
$btn = is_array($field->data) ? $field->data : (array) $field->data;
9-
} else {
10-
$btn = [];
11-
foreach ($item->datafield as $f) {
12-
if ($f->type === 'link' && is_array($f->data)) {
13-
$btn = array_merge($btn, $f->data);
14-
} else {
15-
$btn[$f->type] = $f->data;
16-
}
17-
}
7+
8+
foreach ($item->datafield as $item) {
9+
$button[] = array(
10+
'type' => $item->type,
11+
'data' => $item->data,
12+
);
1813
}
19-
$iconPosition = $btn['iconposition'] ?? 'left';
20-
$layoutgrid = is_object($item) ? ($item->layoutgrid ?? 12) : 12;
21-
$gridCols = 'md:grid-cols-' . $layoutgrid;
22-
$colSpan = is_object($item) && $item->layoutgrid ? 'md:col-span-' . $item->layoutgrid : '';
23-
@endphp
14+
$btn = collect($button)->mapWithKeys(function ($item) {
15+
return [$item['type'] => $item['data']];
16+
});;
2417
25-
@if ($field || $item->type == 'button')
26-
<span {{ $attributes->merge(['class' => 'w-full block mx-auto ' . $gridCols . ' ' . $colSpan]) }}>
27-
<a class="btn btn-primary btn-lg fill-current mx-auto flex" href="{{ $btn['url'] ?? '#' }}">
28-
@if (!empty($btn['iconclass']))
29-
@if($iconPosition === 'left')
30-
@svg($btn['iconclass'], 'w-8 h-8 mr-2')
31-
@endif
32-
@endif
33-
{{ $btn['title'] ?? '' }}
34-
@if (!empty($btn['iconclass']))
35-
@if($iconPosition === 'right')
36-
@svg($btn['iconclass'], 'w-8 h-8 ml-2')
37-
@endif
18+
@endphp
19+
<a class="btn inline-flex fill-current" href="{{ $btn->get('text_url') }}">{{ $btn->get('text') }}
20+
@if (!empty($btn->get('icon')))
21+
@svg($btn->get('icon'))
3822
@endif
3923
</a>
40-
</span>
41-
24+
</div>
4225
@endif

‎stubs/resources/views/components/blocks/card.blade.php‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@props(['item' => ''])
2+
3+
@if ($item->type == 'card')
4+
@php
5+
$fieldData = collect($item->datafield);
6+
$cssclassname = $item->getMeta('css-classname') ?? 'bg-white';
7+
// Find image field
8+
$imageField = $fieldData->firstWhere('type', 'image');
9+
$imageId = null;
10+
if ($imageField) {
11+
$imageData = is_array($imageField) ? $imageField['data'] ?? null : $imageField->data ?? null;
12+
// Image data might be just an ID or an object with id
13+
if (is_numeric($imageData)) {
14+
$imageId = $imageData;
15+
} elseif (is_object($imageData) && isset($imageData->id)) {
16+
$imageId = $imageData->id;
17+
}
18+
}
19+
20+
// Find title (wysiwyg)
21+
$titleField = $fieldData->firstWhere('type', 'wysiwyg');
22+
$titleData = null;
23+
if ($titleField) {
24+
$rawTitle = is_array($titleField) ? $titleField['data'] ?? null : $titleField->data ?? null;
25+
$titleData = is_string($rawTitle) ? json_decode($rawTitle) : (object) $rawTitle;
26+
}
27+
28+
// Find text content
29+
$textField = $fieldData->firstWhere('type', 'text');
30+
$text = null;
31+
if ($textField) {
32+
$rawText = is_array($textField) ? $textField['data'] ?? null : $textField->data ?? null;
33+
$text = is_string($rawText) ? json_decode($rawText) : $rawText;
34+
}
35+
36+
// Find link button
37+
$linkField = $fieldData->firstWhere('type', 'link');
38+
$link = null;
39+
if ($linkField) {
40+
$rawLink = is_array($linkField) ? $linkField['data'] ?? null : $linkField->data ?? null;
41+
$link = is_string($rawLink) ? json_decode($rawLink) : (object) $rawLink;
42+
}
43+
@endphp
44+
45+
<div class="card {{ $cssclassname }} rounded">
46+
47+
48+
<div class="card-body flex flex-col p-0 rounded">
49+
<div class="p-10 pb-0">
50+
@if ($titleData && isset($titleData->blocks))
51+
@foreach ($titleData->blocks as $block)
52+
@php
53+
$block = (object) $block;
54+
$blockData = (object) $block->data;
55+
@endphp
56+
@switch($block->type)
57+
@case('header')
58+
<h{{ $blockData->level }} class="text-4xl md:text-6xl font-bold mb-4">
59+
{!! $blockData->text !!}
60+
</h{{ $blockData->level }}>
61+
@break
62+
63+
@case('paragraph')
64+
<p class="text-xl mb-4">{!! $blockData->text !!}</p>
65+
@break
66+
@endswitch
67+
@endforeach
68+
@endif
69+
70+
</div>
71+
72+
73+
@if ($text)
74+
<p>{!! $text !!}</p>
75+
@endif
76+
77+
@if ($link)
78+
<div class="card-actions justify-end">
79+
<a href="{{ $link->url ?? '#' }}" class="btn btn-primary">
80+
{{ $link->title ?? ' Mehr erfahren' }}
81+
</a>
82+
</div>
83+
@endif
84+
@if ($imageId)
85+
<div class="mt-auto">
86+
<x-image :id="$imageId" class="w-full h-full rounded" />
87+
</div>
88+
@endif
89+
</div>
90+
91+
</div>
92+
@endif

‎stubs/resources/views/components/blocks/download.blade.php‎

Lines changed: 61 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,68 @@
1-
@props([
2-
'item' => '',
3-
])
1+
@props(['item' => ''])
42

5-
@use('Secondnetwork\Kompass\Models\File' , 'Files')
3+
@php
4+
// Normalizing item to object access for consistency if passed as array
5+
$item = (object) $item;
6+
$fieldData = collect($item->datafield);
67
7-
@if ('download' == $item->type)
8-
<div {{ $attributes }}>
8+
// Find image ID (from 'Bild' field)
9+
$imageField = $fieldData->firstWhere('type', 'image');
10+
$imageId = null;
11+
if ($imageField) {
12+
$imageData = is_array($imageField) ? $imageField['data'] ?? null : $imageField->data ?? null;
13+
// Image data might be just an ID or an object with id
14+
if (is_numeric($imageData)) {
15+
$imageId = $imageData;
16+
} elseif (is_object($imageData) && isset($imageData->id)) {
17+
$imageId = $imageData->id;
18+
}
19+
}
20+
21+
// Find Text content (wysiwyg)
22+
$textField = $fieldData->firstWhere('name', 'Text');
23+
$textData = null;
24+
if ($textField) {
25+
$rawData = is_array($textField) ? $textField['data'] : $textField->data;
26+
$textData = is_array($rawData) ? (object) $rawData : json_decode($rawData);
27+
}
28+
29+
// Find link (button)
30+
$linkField = $fieldData->firstWhere('type', 'link');
31+
$link = null;
32+
if ($linkField) {
33+
$rawData = is_array($linkField) ? $linkField['data'] : $linkField->data;
34+
$link = is_array($rawData) ? (object) $rawData : json_decode($rawData);
35+
}
36+
@endphp
937

10-
<div class="">
11-
@foreach ($item->datafield as $image)
12-
13-
@php
14-
$image = $image['data'];
15-
16-
$file = Cache::rememberForever('kompass_imgId_'.$image, function () use ($image) {
17-
return files::where('id', $image)->first();
18-
});
19-
@endphp
20-
21-
<div class="bg-white p-6 mb-4 md:ml-16 rounded-lg text-black flex justify-between ">
22-
{{ $file->name }}
23-
<a class="flex items-center gap-4 text-black font-bold" download="" href="{{ asset('storage'.$file->path.'/'.$file->slug.'.'.$file->extension) }}">Download <x-tabler-download class="text-[var(--primary)]" /></a>
24-
</div>
25-
26-
@endforeach
38+
@if($item->type == 'download')
39+
<div class="p-6 rounded-lg shadow-sm flex flex-col items-center justify-between gap-6 text-center mx-5">
40+
@if ($imageId)
41+
<div class="mt-auto">
42+
<x-image :id="$imageId" class="w-full h-full rounded" />
43+
</div>
44+
@endif
45+
46+
<div class="">
47+
@if($textData && isset($textData->blocks))
48+
<div class="prose max-w-none">
49+
@foreach ($textData->blocks as $block)
50+
@php $block = (object) $block; $blockData = (object) $block->data; @endphp
51+
@if($block->type === 'paragraph')
52+
<p class="text-gray-700 m-0">{!! $blockData->text !!}</p>
53+
@endif
54+
@endforeach
55+
</div>
56+
@endif
2757
</div>
2858

29-
<div class="max-lg:hidden flex place-content-center -mt-20">
30-
<img src="{{ asset('images/download.svg') }}" alt="download">
31-
32-
</div>
59+
@if($link)
60+
<div class="flex-shrink-0">
61+
<a href="{{ $link->url ?? '#' }}" class="btn btn-primary flex items-center gap-2">
62+
{{ $link->title ?? 'Download' }}
63+
<x-tabler-download class="w-5 h-5" />
64+
</a>
65+
</div>
66+
@endif
3367
</div>
34-
3568
@endif

‎stubs/resources/views/components/blocks/gallery.blade.php‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@
55
@use('Secondnetwork\Kompass\Models\File', 'Files')
66

77
@if ('gallery' == $item->type)
8-
9-
<div {{ $attributes }} >
10-
<div class="grid gap-4 transition-all ease-in-out duration-500 md:grid-cols-{{ $item->grid }} one-image {{ $item->getMeta('css-classname') }}">
8+
@php
9+
$layoutgrid = is_object($item) ? ($item->layoutgrid ?? 12) : 12;
10+
$gridCols = 'md:grid-cols-' . $layoutgrid;
11+
$colSpan = is_object($item) && $item->layoutgrid ? 'md:col-span-' . $item->layoutgrid : '';
12+
@endphp
13+
<div {{ $attributes->merge(['class' => 'relative group ' . $gridCols . ' ' . $colSpan]) }} >
14+
<div class="md:grid gap-4 transition-all ease-in-out duration-500 grid-cols-{{ $item->grid }} one-image {{ $item->getMeta('css-classname') }}">
1115

1216
@foreach ($item->datafield as $image)
1317

‎stubs/resources/views/components/blocks/group.blade.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
@endphp
1111

1212
<div
13-
class="grid gap-6 transition-all ease-in-out duration-500 {{ $gridCols }} {{ $colSpan }} {{ $item->getMeta('alignment') }}"
14-
>
13+
class="group md:grid gap-6 transition-all ease-in-out duration-500 {{ $gridCols }} {{ $colSpan }} {{ $item->getMeta('css-classname') ?? '' }} {{ $item->getMeta('layout') ?? '' }} {{ $item->getMeta('alignment') }}">
1514

1615
@foreach ($item->children as $item)
1716
<x-blocks.components :item="$item" />

‎stubs/resources/views/components/blocks/statbar.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
// Debug toggle: allow debugging from meta or query param
77
$debugStatbar = (bool) ($item->getMeta('debug_statbar') ?? request()->query('debug_statbar') ?? false);
88
$gridCols = 'grid-cols-' . $layoutgrid;
9-
$colSpan = $item->layoutgrid ? 'md:col-span-' . $item->layoutgrid : '';
9+
$colSpan = $item->layoutgrid ? 'col-span-' . $item->layoutgrid : '';
1010
@endphp
1111

1212
<div class="statbar py-6 {{ $gridCols }} {{ $colSpan }}">
@@ -28,7 +28,7 @@
2828
$hasNumber = true;
2929
}
3030
@endphp
31-
<div class="stat-item text-center">
31+
<div class="stat-item">
3232
@if($index == 0)
3333
<h3>{!! $str !!}</h3>
3434
@else

‎stubs/resources/views/components/blocks/wysiwyg.blade.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@php
1818
$linkUrl = (is_object($item) && method_exists($item, 'getMeta')) ? $item->getMeta('link-url') : null;
1919
$alignment = (is_object($item) && method_exists($item, 'getMeta')) ? $item->getMeta('alignment') : null;
20+
$cssclassname = $item->getMeta('css-classname') ?? '' ;
2021
$alignmentClass = match($alignment) {
2122
'align-left' => 'text-left ',
2223
'align-center' => 'text-center ',
@@ -27,11 +28,11 @@
2728
$gridCols = 'md:grid-cols-' . $layoutgrid;
2829
$colSpan = is_object($item) && $item->layoutgrid ? 'md:col-span-' . $item->layoutgrid : '';
2930
@endphp
30-
<div {{ $attributes->merge(['class' => 'relative group ' . $alignmentClass . ' ' . $gridCols . ' ' . $colSpan]) }}>
31+
<div {{ $attributes->merge(['class' => 'relative group ' . $cssclassname . ' ' . $alignmentClass . ' ' . $gridCols . ' ' . $colSpan]) }}>
3132
@if($linkUrl)
3233

3334
<a href="{{ $linkUrl }}" class=" block absolute inset-0 z-10"></a>
34-
<div class="transition block absolute inset-0 rounded-2xl -z-10"></div>
35+
<div class="group-hover:bg-violet-900/60 transition block absolute inset-0 rounded-2xl -z-10"></div>
3536

3637
@endif
3738
@if($data)

0 commit comments

Comments
 (0)