Skip to content

Commit c97213a

Browse files
author
nejc
committed
feat: Add modal wrapper for whats-new popup and usage documentation
1 parent 03dcce6 commit c97213a

File tree

4 files changed

+269
-1
lines changed

4 files changed

+269
-1
lines changed

‎HOME_MODAL_USAGE.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# Using Modal Popup with Whats-New Component
2+
3+
This guide shows you how to use the modal wrapper to display the whats-new component as a popup on your home.blade.php page.
4+
5+
## Option 1: Simple Modal Wrapper
6+
7+
Add this to your `home.blade.php` file:
8+
9+
```blade
10+
<!-- Include the modal wrapper -->
11+
<x-version-platform-manager::modal-wrapper id="whats-new-modal" :autoShow="true">
12+
<!-- Your whats-new component inside the modal -->
13+
<x-version-platform-manager::whats-new :autoShow="false"></x-version-platform-manager::whats-new>
14+
15+
<!-- Optional footer with buttons -->
16+
<x-slot name="footer">
17+
<button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
18+
Got it!
19+
</button>
20+
<button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
21+
Close
22+
</button>
23+
</x-slot>
24+
</x-version-platform-manager::modal-wrapper>
25+
```
26+
27+
## Option 2: Manual Trigger Modal
28+
29+
If you want to trigger the modal manually (e.g., with a button):
30+
31+
```blade
32+
<!-- Button to trigger modal -->
33+
<button onclick="showModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
34+
Show Updates
35+
</button>
36+
37+
<!-- Modal wrapper -->
38+
<x-version-platform-manager::modal-wrapper id="whats-new-modal" :autoShow="false">
39+
<x-version-platform-manager::whats-new :autoShow="false"></x-version-platform-manager::whats-new>
40+
41+
<x-slot name="footer">
42+
<button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
43+
Got it!
44+
</button>
45+
</x-slot>
46+
</x-version-platform-manager::modal-wrapper>
47+
```
48+
49+
## Option 3: Custom Styled Modal
50+
51+
For a more customized appearance:
52+
53+
```blade
54+
<x-version-platform-manager::modal-wrapper id="announcement-modal" :autoShow="true" maxWidth="max-w-4xl">
55+
<div class="text-center">
56+
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
57+
<svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
58+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2l4 -4" />
59+
</svg>
60+
</div>
61+
62+
<h2 class="text-2xl font-bold text-gray-900 mb-6">
63+
🎉 Exciting News: 🎉 <br> Major Updates to Improve Your Experience!
64+
</h2>
65+
66+
<!-- Your whats-new component -->
67+
<x-version-platform-manager::whats-new :autoShow="false"></x-version-platform-manager::whats-new>
68+
69+
<div class="bg-green-50 border-l-4 border-green-400 p-4 rounded mt-6">
70+
<p class="text-green-800 mb-2">We're excited for you to experience these updates.</p>
71+
<p class="text-green-800">If you have any questions or comments, please don't hesitate to reach out.</p>
72+
<p class="text-green-900 font-semibold mt-3">Best regards,<br>Kitio Internacional d.o.o.</p>
73+
</div>
74+
</div>
75+
76+
<x-slot name="footer">
77+
<button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
78+
Got it!
79+
</button>
80+
<button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
81+
Close
82+
</button>
83+
</x-slot>
84+
</x-version-platform-manager::modal-wrapper>
85+
```
86+
87+
## Configuration Options
88+
89+
### Modal Wrapper Props:
90+
- `id`: Unique identifier for the modal (default: 'modal-wrapper')
91+
- `show`: Whether to show the modal initially (default: false)
92+
- `autoShow`: Whether to auto-show the modal after page load (default: false)
93+
- `maxWidth`: Tailwind max-width class (default: 'max-w-2xl')
94+
95+
### Available Functions:
96+
- `showModal()`: Show the modal
97+
- `closeModal()`: Close the modal
98+
99+
## Features:
100+
- ✅ Auto-shows after page load (if autoShow is true)
101+
- ✅ Closes when clicking outside
102+
- ✅ Closes with Escape key
103+
- ✅ Responsive design
104+
- ✅ Customizable width
105+
- ✅ Optional footer with buttons
106+
- ✅ Works with any content, including whats-new component
107+
108+
## Example: Complete home.blade.php
109+
110+
```blade
111+
@extends('layouts.app')
112+
113+
@section('content')
114+
<div class="container mx-auto px-4 py-8">
115+
<h1 class="text-3xl font-bold text-gray-900 mb-8">Welcome to Our Platform</h1>
116+
117+
<!-- Your existing content here -->
118+
119+
<!-- Modal with whats-new component -->
120+
<x-version-platform-manager::modal-wrapper id="whats-new-modal" :autoShow="true">
121+
<x-version-platform-manager::whats-new :autoShow="false"></x-version-platform-manager::whats-new>
122+
123+
<x-slot name="footer">
124+
<button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
125+
Got it!
126+
</button>
127+
</x-slot>
128+
</x-version-platform-manager::modal-wrapper>
129+
</div>
130+
@endsection
131+
```

‎resources/views/components/announcement-modal.blade.php‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@props(['id' => 'announcement-modal', 'show' => false, 'autoShow' => false])
2+
3+
<div id="{{ $id }}" class="fixed inset-0 z-50 overflow-y-auto {{ $show || $autoShow ? 'block' : 'hidden' }}" aria-labelledby="modal-title" role="dialog" aria-modal="true">
4+
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
5+
<!-- Background overlay -->
6+
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
7+
8+
<!-- Modal panel -->
9+
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
10+
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
11+
<div class="text-center">
12+
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
13+
<svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
14+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2l4 -4" />
15+
</svg>
16+
</div>
17+
18+
<h2 class="text-2xl font-bold text-gray-900 mb-6">
19+
🎉 Exciting News: 🎉 <br> Major Updates to Improve Your Experience!
20+
</h2>
21+
22+
<div class="text-left mt-6 space-y-6">
23+
<!-- Include the whats-new component content here -->
24+
<x-version-platform-manager::whats-new :autoShow="false"></x-version-platform-manager::whats-new>
25+
26+
<div class="bg-green-50 border-l-4 border-green-400 p-4 rounded">
27+
<p class="text-green-800 mb-2">We're excited for you to experience these updates.</p>
28+
<p class="text-green-800">If you have any questions or comments, please don't hesitate to reach out.</p>
29+
<p class="text-green-900 font-semibold mt-3">Best regards,<br>Kitio Internacional d.o.o.</p>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
36+
<button type="button" onclick="closeAnnouncementModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
37+
Got it!
38+
</button>
39+
<button type="button" onclick="closeAnnouncementModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
40+
Close
41+
</button>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<script>
48+
function showAnnouncementModal() {
49+
document.getElementById('{{ $id }}').classList.remove('hidden');
50+
document.getElementById('{{ $id }}').classList.add('block');
51+
}
52+
53+
function closeAnnouncementModal() {
54+
document.getElementById('{{ $id }}').classList.remove('block');
55+
document.getElementById('{{ $id }}').classList.add('hidden');
56+
}
57+
58+
// Auto-show modal after page load (optional)
59+
document.addEventListener('DOMContentLoaded', function() {
60+
// Uncomment the line below if you want the modal to show automatically
61+
// setTimeout(showAnnouncementModal, 1000);
62+
});
63+
64+
// Close modal when clicking outside
65+
document.addEventListener('click', function(event) {
66+
const modal = document.getElementById('{{ $id }}');
67+
if (event.target === modal) {
68+
closeAnnouncementModal();
69+
}
70+
});
71+
72+
// Close modal with Escape key
73+
document.addEventListener('keydown', function(event) {
74+
if (event.key === 'Escape') {
75+
closeAnnouncementModal();
76+
}
77+
});
78+
</script>

‎resources/views/components/modal-wrapper.blade.php‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@props(['id' => 'modal-wrapper', 'show' => false, 'autoShow' => false, 'maxWidth' => 'max-w-2xl'])
2+
3+
<div id="{{ $id }}" class="fixed inset-0 z-50 overflow-y-auto {{ $show || $autoShow ? 'block' : 'hidden' }}" aria-labelledby="modal-title" role="dialog" aria-modal="true">
4+
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
5+
<!-- Background overlay -->
6+
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
7+
8+
<!-- Modal panel -->
9+
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle {{ $maxWidth }} sm:w-full">
10+
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
11+
{{ $slot }}
12+
</div>
13+
14+
@if(isset($footer))
15+
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
16+
{{ $footer }}
17+
</div>
18+
@endif
19+
</div>
20+
</div>
21+
</div>
22+
23+
<script>
24+
function showModal() {
25+
document.getElementById('{{ $id }}').classList.remove('hidden');
26+
document.getElementById('{{ $id }}').classList.add('block');
27+
}
28+
29+
function closeModal() {
30+
document.getElementById('{{ $id }}').classList.remove('block');
31+
document.getElementById('{{ $id }}').classList.add('hidden');
32+
}
33+
34+
// Auto-show modal after page load (optional)
35+
document.addEventListener('DOMContentLoaded', function() {
36+
@if($autoShow)
37+
setTimeout(showModal, 1000);
38+
@endif
39+
});
40+
41+
// Close modal when clicking outside
42+
document.addEventListener('click', function(event) {
43+
const modal = document.getElementById('{{ $id }}');
44+
if (event.target === modal) {
45+
closeModal();
46+
}
47+
});
48+
49+
// Close modal with Escape key
50+
document.addEventListener('keydown', function(event) {
51+
if (event.key === 'Escape') {
52+
closeModal();
53+
}
54+
});
55+
56+
// Make functions globally available
57+
window.showModal = showModal;
58+
window.closeModal = closeModal;
59+
</script>

‎resources/views/components/whats-new.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<div class="bg-green-50 border-l-4 border-green-400 p-4 rounded">
5959
<p class="text-green-800 mb-2">We're excited for you to experience these updates.</p>
6060
<p class="text-green-800">If you have any questions or comments, please don't hesitate to reach out.</p>
61-
<p class="text-green-900 font-semibold mt-3">Best regards,<br>Kitio Internacional d.o.o.</p>
61+
6262
</div>
6363
</div>
6464
</div>

0 commit comments

Comments
 (0)