682 search results

Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Twig Components
43 lines | templates/voyage/index.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
<div
class="flex justify-between"
>
// ... lines 10 - 11
<twig:Button
href="{{ path('app_voyage_new') }}"
data-turbo-frame="modal"
class="flex items-center space-x-1 font-bold"
>
<span>New Voyage</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 inline" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M9 12h6" /><path d="M12 9v6" /></svg>
</twig:Button>
</div>
// ... lines 21 - 40
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Modal Twig Component
97 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 51
<div
data-controller="modal"
data-action="turbo:before-cache@window->modal#close"
>
<dialog
class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
data-modal-target="dialog"
data-action="close->modal#close click->modal#clickOutside"
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
id="modal"
data-modal-target="dynamicContent"
data-action="turbo:before-fetch-request->modal#showLoading"
class="aria-busy:opacity-50 transition-opacity"
>
{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
</turbo-frame>
</div>
</div>
</dialog>
<template data-modal-target="loadingTemplate">
<div class="bg-space-pattern bg-cover rounded-lg p-8">
<div class="space-y-2">
<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
<div class="h-4"></div>
<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
<div class="h-4"></div>
<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
</div>
</div>
</template>
</div>
// ... lines 91 - 94
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Modal Twig Component
67 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 54
<twig:Modal>
<turbo-frame
id="modal"
data-modal-target="dynamicContent"
data-action="turbo:before-fetch-request->modal#showLoading"
class="aria-busy:opacity-50 transition-opacity"
>
{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
</turbo-frame>
</twig:Modal>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Modal Twig Component
82 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 54
<twig:Modal>
<turbo-frame
// ... lines 57 - 62
</turbo-frame>
<twig:block name="loading_template">
<div class="bg-space-pattern bg-cover rounded-lg p-8">
<div class="space-y-2">
<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
<div class="h-4"></div>
<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
<div class="h-4"></div>
<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
</div>
</div>
</twig:block>
</twig:Modal>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Modal Twig Component
19 lines | templates/voyage/_row.html.twig
<tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
// ... lines 2 - 4
<td class="px-6 py-4 whitespace-nowrap">
// ... lines 6 - 11
<a
href="{{ path('app_voyage_edit', {'id': voyage.id}) }}"
class="ml-4 text-yellow-400 hover:text-yellow-600"
data-turbo-frame="modal"
>edit</a>
</td>
</tr>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Modal Twig Component
149 lines | templates/main/homepage.html.twig
// ... lines 1 - 27
{% block body %}
<div class="flex">
// ... lines 30 - 36
<section class="flex-1 ml-10">
<form
method="GET"
action="{{ path('app_homepage') }}"
class="mb-6 flex justify-between"
data-controller="autosubmit"
data-turbo-frame="voyage-list"
>
<div class="w-1/3 flex">
<input
type="search"
name="query"
value="{{ app.request.query.get('query') }}"
aria-label="Search voyages"
placeholder="Search voyages"
class="px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
data-action="autosubmit#debouncedSubmit"
autofocus
>
</div>
// ... lines 57 - 59
</form>
// ... lines 61 - 145
</section>
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Modal Twig Component
169 lines | templates/main/homepage.html.twig
// ... lines 1 - 27
{% block body %}
<div class="flex">
// ... lines 30 - 36
<section class="flex-1 ml-10">
<form
method="GET"
action="{{ path('app_homepage') }}"
class="mb-6 flex justify-between"
data-controller="autosubmit"
data-turbo-frame="voyage-list"
>
<div class="w-1/3 flex">
<input
type="search"
name="query"
value="{{ app.request.query.get('query') }}"
aria-label="Search voyages"
placeholder="Search voyages"
class="px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400"
data-action="autosubmit#debouncedSubmit"
autofocus
>
<twig:Modal>
<twig:block name="trigger">
<twig:Button
variant="link"
type="button"
data-action="modal#open"
>Options</twig:Button>
</twig:block>
<h3 class="text-white text-lg font-semibold mb-2">Search Options</h3>
<hr class="mb-4">
<div class="flex justify-end">
<twig:Button
variant="success"
data-action="modal#close"
>See Results</twig:Button>
</div>
</twig:Modal>
</div>
// ... lines 77 - 79
</form>
// ... lines 81 - 165
</section>
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Live Components
89 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
<div class="container mx-auto min-h-screen flex flex-col">
<header class="my-8 px-4">
<nav class="flex items-center justify-between mb-4">
// ... lines 20 - 31
<twig:Modal :closeButton="true" padding="" :fixedTop="true" data-turbo-permanent id="global-search-modal">
// ... lines 33 - 43
</twig:Modal>
</nav>
</header>
// ... lines 47 - 56
</div>
// ... lines 58 - 86
</body>
</html>
See Code Block in Script
Comment

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Drive
…other than I know that the web debug toolbar, sometimes, gets confused by Turbo. I mean, I know this happens when you add the preload attribute - but I haven't seen it without that preload (which I remove at the end of the chapter). Either…
weaverryan
weaverryan
Read Full Comment
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

AJAX Modal!
93 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
data-controller="modal"
data-action="turbo:before-cache@window->modal#close"
>
<dialog
class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
data-modal-target="dialog"
data-action="close->modal#close click->modal#clickOutside"
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<div class="text-white space-y-4">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold">Create new Voyage</h2>
<form method="dialog">
<button class="text-lg absolute top-5 right-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
</button>
</form>
</div>
<p class="text-gray-400">
Join us on an exciting journey through the cosmos! Discover the
mysteries of the universe and explore distant galaxies.
</p>
<div class="flex justify-end">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Let's Go!
</button>
</div>
</div>
</div>
</div>
</dialog>
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

AJAX Modal!
74 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
data-controller="modal"
data-action="turbo:before-cache@window->modal#close"
>
<dialog
class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
data-modal-target="dialog"
data-action="close->modal#close click->modal#clickOutside"
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame id="modal"></turbo-frame>
</div>
</div>
</dialog>
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

AJAX Modal!
51 lines | templates/voyage/index.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
<div
class="flex justify-between"
>
<h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>
<a
href="{{ path('app_voyage_new') }}"
data-turbo-frame="modal"
class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
>
// ... lines 17 - 18
</a>
</div>
// ... lines 21 - 48
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

AJAX Modal!
74 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
// ... lines 57 - 58
>
<dialog
// ... lines 61 - 63
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame id="modal" data-modal-target="dynamicContent"></turbo-frame>
</div>
</div>
</dialog>
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fancy things on Modal Form Success
99 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
// ... lines 57 - 58
>
<dialog
// ... lines 61 - 63
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
id="modal"
// ... lines 69 - 71
>
<turbo-stream action="append" target="flash-container">
// ... line 74
</turbo-stream>
</turbo-frame>
</div>
</div>
</dialog>
// ... lines 80 - 95
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fancy things on Modal Form Success
99 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
// ... lines 57 - 58
>
<dialog
// ... lines 61 - 63
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
id="modal"
// ... lines 69 - 71
>
<turbo-stream action="append" target="flash-container">
<template>{{ include('_flashes.html.twig') }}</template>
</turbo-stream>
</turbo-frame>
</div>
</div>
</dialog>
// ... lines 80 - 95
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fancy things on Modal Form Success
99 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 51
<div
data-controller="modal"
data-action="turbo:before-cache@window->modal#close"
>
// ... lines 56 - 91
</div>
<div id="flash-container">
{{ include('_flashes.html.twig') }}
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fancy things on Modal Form Success
106 lines | src/Controller/VoyageController.php
// ... lines 1 - 15
class VoyageController extends AbstractController
{
// ... lines 18 - 25
#[Route('/new', name: 'app_voyage_new', methods: ['GET', 'POST'])]
public function new(Request $request, EntityManagerInterface $entityManager): Response
{
// ... lines 29 - 32
if ($form->isSubmitted() && $form->isValid()) {
// ... lines 34 - 38
if ($request->headers->has('turbo-frame')) {
$stream = $this->renderBlockView('voyage/new.html.twig', 'stream_success', [
'voyage' => $voyage
]);
$this->addFlash('stream', $stream);
}
// ... lines 46 - 47
}
// ... lines 49 - 53
}
// ... lines 55 - 104
}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fancy things on Modal Form Success
102 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 51
<div
// ... lines 53 - 54
>
<dialog
// ... lines 57 - 59
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
id="modal"
// ... lines 65 - 67
>
// ... lines 69 - 71
{% for stream in app.flashes('stream') %}
{{ stream|raw }}
{% endfor %}
</turbo-frame>
</div>
</div>
</dialog>
// ... lines 79 - 94
</div>
// ... lines 96 - 99
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

More with fun Modals! Editing & Deleting
122 lines | src/Controller/VoyageController.php
// ... lines 1 - 15
class VoyageController extends AbstractController
{
// ... lines 18 - 91
public function delete(Request $request, Voyage $voyage, EntityManagerInterface $entityManager): Response
{
if ($this->isCsrfTokenValid('delete'.$voyage->getId(), $request->request->get('_token'))) {
$id = $voyage->getId();
// ... lines 96 - 100
if ($request->headers->has('turbo-frame')) {
$stream = $this->renderBlockView('voyage/delete.html.twig', 'success_stream', [
'id' => $id,
]);
$this->addFlash('stream', $stream);
}
}
// ... lines 109 - 110
}
// ... lines 112 - 120
}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

More with fun Modals! Editing & Deleting
14 lines | templates/voyage/_row.html.twig
<tr class="even:bg-gray-700 odd:bg-gray-600">
// ... lines 2 - 4
<td class="px-6 py-4 whitespace-nowrap">
// ... line 6
<a
href="{{ path('app_voyage_edit', {'id': voyage.id}) }}"
class="ml-4 text-yellow-400 hover:text-yellow-600"
data-turbo-frame="modal"
>edit</a>
</td>
</tr>
See Code Block in Script
20 21 22 23 24