682 search results

Code

Learn Symfony

 >

30 Days with LAST Stack

 >

More with fun Modals! Editing & Deleting
97 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
// ... lines 64 - 67
>
{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
</turbo-frame>
</div>
</div>
</dialog>
// ... lines 74 - 89
</div>
// ... lines 91 - 94
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

More with fun Modals! Editing & Deleting
113 lines | src/Controller/VoyageController.php
// ... lines 1 - 15
class VoyageController extends AbstractController
{
// ... lines 18 - 64
public function edit(Request $request, Voyage $voyage, EntityManagerInterface $entityManager): Response
{
// ... lines 67 - 69
if ($form->isSubmitted() && $form->isValid()) {
// ... lines 71 - 73
if ($request->headers->has('turbo-frame')) {
$stream = $this->renderBlockView('voyage/edit.html.twig', 'stream_success', [
'voyage' => $voyage
]);
$this->addFlash('stream', $stream);
}
// ... lines 81 - 82
}
// ... lines 84 - 88
}
// ... lines 90 - 111
}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fantastic Modal UX with a Loading State
94 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"
data-action="turbo:before-fetch-request->modal#showLoading"
></turbo-frame>
</div>
</div>
</dialog>
// ... lines 75 - 90
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Fantastic Modal UX with a Loading State
95 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
// ... lines 68 - 70
class="aria-busy:opacity-50 transition-opacity"
></turbo-frame>
</div>
</div>
</dialog>
// ... lines 76 - 91
</div>
</body>
</html>
See Code Block in Script
Comment

Learn Symfony

 >

30 Days with LAST Stack

 >

Data Tables with Turbo Frames
…is submitted via Turbo Frames - we put a frame around the ``. So, this only means that any JavaScript behavior inside the *frame* needs to be written in Stimulus. The rest of your site should be ok without it. So, you would disable Turbo Drive (like…
weaverryan
weaverryan
Read Full Comment
Comment

Learn Symfony

 >

30 Days with LAST Stack

 >

View Transitions
Hey @Fracsi! Ahhh... that's WAY cool yea! And I think we can use async / await too, right? ``` document.addEventListener('turbo:before-frame-render', async (event) => { // ... skipNextRenderTransition = true; await performTransition(event.target, event.detail.newFrame, async () => { await event.detail.resume(); }); skipNextRenderTransition =…
weaverryan
weaverryan
Read Full Comment
Comment

Learn JS

 >

Symfony UX: Turbo

 >

Smart Frame Redirecting with the Server
…Ryan, Thank you very much for your detailed answer. Ok I see the fastest solutions are not always the best :-) At the moment I am using the solution with `data-turbo-action`. But I am looking forward to your solution in the last stack tutorial…
Tom-R
Tom-R
Read Full Comment
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
63 lines | templates/main/homepage.html.twig
// ... lines 1 - 4
{% block body %}
<div class="flex">
<aside class="hidden md:block md:w-64 bg-gray-900 px-2 py-6">
// ... line 8
<turbo-frame id="planet-info">
{{ include('main/_planet_list.html.twig') }}
</turbo-frame>
</aside>
// ... lines 13 - 60
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
50 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
<table class="min-w-full bg-gray-800 text-white">
// ... lines 11 - 33
</table>
</turbo-frame>
// ... lines 36 - 47
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
54 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
<table class="min-w-full bg-gray-800 text-white">
// ... lines 11 - 33
</table>
<div class="mt-2">
<a href="{{ path('app_homepage') }}">&lt;-- Back</a>
</div>
</turbo-frame>
// ... lines 40 - 51
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
56 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
// ... lines 10 - 35
<div class="mt-2">
<a href="{{ path('app_homepage') }}">&lt;-- Back</a>
<a href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
</div>
</turbo-frame>
// ... lines 42 - 53
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
56 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
// ... lines 10 - 35
<div class="mt-2">
// ... lines 37 - 38
<a data-turbo-frame="_top" href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
</div>
</turbo-frame>
// ... lines 42 - 53
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
19 lines | tailwind.config.js
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
// ... lines 5 - 12
plugins: [
plugin(function({ addVariant }) {
addVariant('turbo-frame', 'turbo-frame[src] &')
}),
],
}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Frames
56 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
// ... lines 10 - 35
<div class="mt-2 hidden turbo-frame:block" >
<a href="{{ path('app_homepage') }}">&lt;-- Back</a>
<a data-turbo-frame="_top" href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
</div>
</turbo-frame>
// ... lines 42 - 53
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Turbo Drive
52 lines | templates/base.html.twig
// ... lines 1 - 14
<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">
<div class="flex items-center">
// ... lines 20 - 27
<a href="{{ path('app_voyage_index') }}" data-turbo-preload class="ml-6 hover:text-gray-400">Voyages</a>
// ... line 29
</div>
// ... lines 31 - 36
</nav>
</header>
// ... lines 39 - 48
</div>
</body>
</html>
See Code Block in Script
Comment

Learn Symfony

 >

30 Days with LAST Stack

 >

Data Tables with Turbo Frames
Hello! I have a few questions about this "homemade datatable" :) 1. Requests are submitted via Ajax using Turbo Drive (if I understood correctly). But if our application is not ready to accommodate Turbo Drive (since all our Javascript must use Stimulus), what should we do…
Fabrice
Fabrice
Read Full Comment
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Data Tables with Turbo Frames
138 lines | templates/main/homepage.html.twig
// ... lines 1 - 27
{% block body %}
<div class="flex">
// ... lines 30 - 36
<section class="flex-1 ml-10">
// ... lines 38 - 55
<turbo-frame id="voyage-list">
<div class="bg-gray-800 p-4 rounded">
<table class="w-full text-white">
// ... lines 59 - 120
</table>
</div>
<div class="flex items-center mt-6 space-x-4">
// ... lines 124 - 132
</div>
</turbo-frame>
</section>
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Data Tables with Turbo Frames
139 lines | templates/main/homepage.html.twig
// ... lines 1 - 27
{% block body %}
<div class="flex">
// ... lines 30 - 36
<section class="flex-1 ml-10">
// ... lines 38 - 56
<turbo-frame id="voyage-list" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
// ... lines 58 - 134
</turbo-frame>
</section>
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony

 >

30 Days with LAST Stack

 >

Popover!
11 lines | templates/planet/_card.html.twig
<turbo-frame id="planet-card-{{ planet.id }}">
<div class="px-6 py-4">
<h4>
<a class="hover:text-blue-300 transition-colors duration-100" href="{{ path('app_planet_show', { id: planet.id }) }}">
{{ planet.name }}
</a>
</h4>
<small>{{ planet.lightYearsFromEarth|round|number_format }} ly</small>
</div>
</turbo-frame>
See Code Block in Script
Comment

Learn JS

 >

Symfony UX: Turbo

 >

Smart Frame Redirecting with the Server
…In more recent versions of turbo, you can (in general) make a `turbo-frame` change the URL when it navigates by adding `data-turbo-action="advance"` ... and this is really awesome. B) If you add `target="_top"` inside the frame (or `data-turbo-frame="_top"…
weaverryan
weaverryan
Read Full Comment
21 22 23 24 25