Skip to content

Commit 6764d25

Browse files
fmontesfmontes
committed
feat(layout): Enhance layout and components for improved UI
- Added utility container styles for consistent spacing. - Refactored navigation component for better styling and responsiveness. - Updated activity and banner content types with improved HTML structure and styling. - Removed external CSS dependency for a more streamlined approach.
1 parent fe23184 commit 6764d25

7 files changed

Lines changed: 115 additions & 42 deletions

File tree

‎examples/dotcms-laravel/resources/css/app.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
@source "../**/*.js";
77
@source "../**/*.vue";
88

9+
@utility container {
10+
margin-inline: auto;
11+
padding-inline: 2rem;
12+
}
13+
914
@theme {
1015
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
1116
'Segoe UI Symbol', 'Noto Color Emoji';

‎examples/dotcms-laravel/resources/views/dotcms/components/navigation.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{-- Navigation component for DotCMS --}}
2-
<nav class="container">
3-
<ul>
2+
<nav>
3+
<ul class="flex space-x-4 text-white">
44
@if(isset($navigation) && $navigation->hasChildren())
55
@foreach($navigation->getChildren() as $item)
66
<li>
77
<a href="{{ $item->href ?? $item['href'] }}" target="{{ $item->target ?? $item['target'] }}">{{ $item->title ?? $item['title'] }}</a>
88
@if($item->hasChildren())
9-
<ul>
9+
<ul class="flex gap-4 mt-2">
1010
@foreach($item->getChildren() as $child)
1111
<li>
1212
<a href="{{ $child->href ?? $child['href'] }}" target="{{ $child->target ?? $child['target'] }}">{{ $child->title ?? $child['title'] }}</a>

‎examples/dotcms-laravel/resources/views/dotcms/content-types/activity.blade.php‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
11
@php
2-
$imageHtml = '';
2+
$imagePath = null;
33
if (isset($content['image'])) {
4-
$imageHtml = '<img src="https://demo.dotcms.com/dA/' . $content['identifier'] . '/image"
5-
alt="' . htmlspecialchars($content['title'] ?? '', ENT_QUOTES, 'UTF-8') . '">';
4+
$imagePath = 'https://demo.dotcms.com/dA/' . $content['identifier'] . '/image';
65
}
6+
$title = $content['title'] ?? '';
7+
$description = $content['description'] ?? '';
8+
$urlTitle = $content['urlTitle'] ?? '#';
79
@endphp
810

9-
<article>
10-
{!! $imageHtml !!}
11-
<div>
12-
<h3>{{ $content['title'] ?? '' }}</h3>
13-
<p>{{ $content['description'] ?? '' }}</p>
14-
<a href="/activities/{{ $content['urlTitle'] ?? '#' }}">Link to detail →</a>
11+
<article class="p-4 overflow-hidden bg-white rounded shadow-lg">
12+
@if($imagePath)
13+
<img
14+
class="w-full"
15+
src="{{ $imagePath }}"
16+
width="100"
17+
height="100"
18+
alt="Activity Image">
19+
@endif
20+
<div class="px-6 py-4">
21+
<p class="mb-2 text-xl font-bold">{{ $title }}</p>
22+
<p class="text-base line-clamp-3">{{ $description }}</p>
23+
</div>
24+
<div class="px-6 pt-4 pb-2">
25+
<a
26+
href="/activities/{{ $urlTitle }}"
27+
class="inline-block px-4 py-2 font-bold text-white bg-purple-500 rounded-full hover:bg-purple-700"
28+
>
29+
Link to detail →
30+
</a>
1531
</div>
1632
</article>

‎examples/dotcms-laravel/resources/views/dotcms/content-types/banner.blade.php‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
@php
2-
$imageHtml = '';
2+
$imagePath = null;
33
if (isset($content['image'])) {
4-
$imageHtml = '<img src="https://demo.dotcms.com/dA/' . $content['identifier'] . '/image"
5-
alt="' . htmlspecialchars($content['title'] ?? '', ENT_QUOTES, 'UTF-8') . '">';
4+
$imagePath = 'https://demo.dotcms.com/dA/' . $content['identifier'] . '/image';
65
}
6+
$title = $content['title'] ?? '';
7+
$caption = $content['caption'] ?? '';
8+
$buttonText = $content['buttonText'] ?? '';
9+
$link = $content['link'] ?? '#';
710
@endphp
811

9-
<article>
10-
{!! $imageHtml !!}
11-
@if(isset($content['title']))<h2>{{ $content['title'] }}</h2>@endif
12-
@if(isset($content['caption']))<p>{{ $content['caption'] }}</p>@endif
13-
@if(isset($content['buttonText']))
14-
<a href="{{ $content['link'] ?? '#' }}">{{ $content['buttonText'] }}</a>
12+
<div class="relative w-full p-4 bg-gray-200 h-96">
13+
@if($imagePath)
14+
<div class="absolute inset-0">
15+
<img src="{{ $imagePath }}" class="object-cover w-full h-full" alt="{{ $title }}">
16+
</div>
1517
@endif
16-
</article>
18+
<div class="absolute inset-0 flex flex-col items-center justify-center p-4 text-center text-white">
19+
<h2 class="mb-2 text-6xl font-bold text-shadow">
20+
{{ $title }}
21+
</h2>
22+
<p class="mb-4 text-xl text-shadow">{{ $caption }}</p>
23+
<a
24+
class="p-4 text-xl transition duration-300 bg-purple-500 rounded hover:bg-purple-600"
25+
href="{{ $link }}">
26+
{{ $buttonText }}
27+
</a>
28+
</div>
29+
</div>

‎examples/dotcms-laravel/resources/views/dotcms/content-types/product.blade.php‎

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,58 @@
11
@php
2-
$imageHtml = '';
2+
$imagePath = null;
33
if (isset($content['image'])) {
4-
$imageHtml = '<img src="https://demo.dotcms.com/dA/' . $content['identifier'] . '/image"
5-
alt="' . htmlspecialchars($content['title'] ?? '', ENT_QUOTES, 'UTF-8') . '">';
4+
$imagePath = 'https://demo.dotcms.com/dA/' . $content['identifier'] . '/image';
65
}
6+
$title = $content['title'] ?? '';
7+
$retailPrice = $content['retailPrice'] ?? null;
8+
$salePrice = $content['salePrice'] ?? null;
9+
$urlTitle = $content['urlTitle'] ?? '#';
10+
11+
// Format price
12+
$formatPrice = function($price) {
13+
return '$' . number_format((float)$price, 2, '.', ',');
14+
};
715
@endphp
816

9-
<article>
10-
{!! $imageHtml !!}
11-
<div>
12-
<h3>{{ $content['title'] ?? '' }}</h3>
13-
<div>{{ $content['retailPrice'] ?? '' }}</div>
14-
<div>{{ $content['salePrice'] ?? '' }}</div>
15-
<a href="/store/products/{{ $content['urlTitle'] ?? '#' }}">Buy Now</a>
17+
<div class="overflow-hidden bg-white rounded shadow-lg">
18+
<div class="p-4">
19+
@if($imagePath)
20+
<img
21+
class="object-contain w-full max-h-60"
22+
src="{{ $imagePath }}"
23+
width="100"
24+
height="100"
25+
alt="Product Image">
26+
@endif
27+
</div>
28+
<div class="px-6 py-4 bg-slate-100">
29+
<div class="mb-2 text-xl font-bold line-clamp-1">
30+
{{ $title }}
31+
</div>
32+
@if($retailPrice && $salePrice)
33+
<div class="text-gray-500 line-through">
34+
{{ $formatPrice($retailPrice) }}
35+
</div>
36+
<div class="text-3xl font-bold">
37+
{{ $formatPrice($salePrice) }}
38+
</div>
39+
@else
40+
<div class="min-h-6"></div>
41+
<div class="text-3xl font-bold">
42+
@if($retailPrice)
43+
{{ $formatPrice($retailPrice) }}
44+
@elseif($salePrice)
45+
{{ $formatPrice($salePrice) }}
46+
@else
47+
$0.00
48+
@endif
49+
</div>
50+
@endif
51+
<a
52+
href="/store/products/{{ $urlTitle }}"
53+
class="inline-block px-4 py-2 mt-4 text-white bg-green-500 rounded hover:bg-green-600"
54+
>
55+
Buy Now
56+
</a>
1657
</div>
17-
</article>
58+
</div>

‎examples/dotcms-laravel/resources/views/layouts/app.blade.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
88

99
@section('stylesheets')
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
1110
@vite(['resources/css/app.css', 'resources/js/app.js'])
1211
@show
1312
</head>

‎examples/dotcms-laravel/resources/views/layouts/header.blade.php‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
<header class="container">
2-
<div class="grid">
3-
<div>
4-
<h1>{{ $pageAsset->page->title ?? 'DotCMS Laravel' }}</h1>
5-
</div>
6-
<div>
7-
@include('dotcms.components.navigation')
8-
</div>
1+
<header class="p-4 bg-purple-500">
2+
<div class="flex items-center justify-between container">
3+
<h2 class="text-3xl font-bold text-white">
4+
<a href="/">TravelLux in Laravel</a>
5+
</h2>
6+
7+
@include('dotcms.components.navigation')
98
</div>
109
</header>

0 commit comments

Comments
 (0)