…debug toolbar is being morphed to empty... but then not being reinitialized. If I'm correct, I'll have to play with this at some point and see what needs to be done - we may need to tell Turbo to ignore that morph element :).
Cheers!
…added, for both the back and front parts, a data-turbo-track="reload" attribute so that the browser reloads the page when I switch from the backend to the frontend and vice versa.
When I launch a flash message from the backend, for example, or…
…a "Frontend" part, each with its own asset system, we have to put a data-turbo-track attribute for the page to completely reload.
So, if we emit a flash message from the backend for it to display on the frontend, there's a kind…
…I initially thought I could achieve this with Turbo Streams, but it seems that the approach you taught for a normal Symfony controller doesn't work directly within a LiveComponent. How can I address this issue and selectively update Turbo Frames within a Live Component…
Blog
Live Stream #8: Live Component JavaScript Internals
…UX 2.14.1 version 1:30
Pull request for the icon package! 3:30
Monthly release structure for UX 9:30
The new Type component for Symfony 11:45
Turbo 8 is out! 15:00
Hello LiveComponents JavaScript 18:40
What happens when a…
…avoid using Turbo visit but try to use the HTML response that the server gives you after the form is submitted and successfully validated
This is interesting. What you're basically wanting is for the `` in the modal to submit via a turbo-frame and…
Blog
Live Stream #7: Let's build some Twig UI Components
…audio 11:15
New proposed Twig components attribute syntax 13:40
UI Recipes: What is all this? 18:45
The WIP recipes site with starting recipes 29:15
Building a Dropdown component 41:15
Why teleporting is probably not needed & using Turbo Streams 51:00
…just focus on the differences between the previous and the new version?
TOP: you keep your courses up to date, going into latest developments (like Turbo for instance)
TIP: Symfony 7 goes into SPA, could you also include PWA (Progressive Web App)?
Keep on rocking…
…modal with turbo frame opens but the loading time is longer then expected. During this process the user presses the Escape key, the modal closes BUT (there it is) the fetch call is still running, when it's finished it still replaces the turbo-frame…
…user interaction just with Stimulus & Turbo. So even if I created a TwigComponent (because maybe I want something to be reusable, or provide its own variables), if I need some interactivity (like submitting a form via Ajax), I might just use Turbo & Stimulus for that…
…m not familiar with this "smart admin" theme system. But, generally-speaking, that does sound a lot like what Turbo offers: changing the URL on click, ability to AJAX-load contents.... it's all there.
Anyway, that's a weak answer - so let me know…
…Back" button to "undo" that, then the click needs to "advance" the navigation. For example, if you're navigating a turbo frame, by default, those link clicks to not advance the navigation (and so they also do not change the URL). But in that case…
…more and see what patterns develop) the ultimate solution will be in Turbo 8. In Turbo 8, I believe we'll be able to send back a ``. This will simply tell whatever page you're on to "refresh". But combined with Turbo 8's morphing…
|
|
// ... lines 1 - 4
|
|
{% block body %} |
|
<div class="flex"> |
|
|
// ... lines 7 - 13
|
|
<section class="flex-1 ml-10"> |
|
|
// ... lines 15 - 29
|
|
<div class="bg-gray-800 p-4 rounded"> |
|
<table class="w-full text-white"> |
|
|
// ... lines 32 - 38
|
|
<tbody> |
|
{% for voyage in voyages %} |
|
<tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}"> |
|
|
// ... line 42
|
|
<td class="px-2 whitespace-nowrap"> |
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
</td> |
|
|
// ... line 67
|
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
|
// ... lines 73 - 76
|
|
</section> |
|
</div> |
|
{% endblock %} |
See Code Block in Script
|
|
// ... lines 1 - 4
|
|
{% block body %} |
|
<div class="flex"> |
|
|
// ... lines 7 - 13
|
|
<section class="flex-1 ml-10"> |
|
|
// ... lines 15 - 29
|
|
<div class="bg-gray-800 p-4 rounded"> |
|
<table class="w-full text-white"> |
|
|
// ... lines 32 - 38
|
|
<tbody> |
|
{% for voyage in voyages %} |
|
<tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}"> |
|
|
// ... line 42
|
|
<td class="px-2 whitespace-nowrap"> |
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
</td> |
|
|
// ... line 67
|
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
|
// ... lines 73 - 76
|
|
</section> |
|
</div> |
|
{% endblock %} |
See Code Block in Script
|
|
// ... lines 1 - 43
|
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<div data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</div> |
|
</div> |
|
|
// ... lines 66 - 80
|
See Code Block in Script
|
|
// ... lines 1 - 43
|
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<div data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</div> |
|
</div> |
|
|
// ... lines 66 - 80
|
See Code Block in Script
|
|
// ... lines 1 - 43
|
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
|
// ... lines 66 - 80
|
See Code Block in Script
|
|
// ... lines 1 - 59
|
|
<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"> |
|
<div class="p-10"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" 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> |
|
<path d="M12 3a9 9 0 1 0 9 9"></path> |
|
</svg> |
|
</div> |
|
</turbo-frame> |
|
|
// ... lines 70 - 87
|
See Code Block in Script
…in React, use React's tools & ecosystem". But if you're building a web app that returns HTML, AssetMapper + Stimulus + Turbo can give you a great UX & DX. So, there are 2 paths and both are valid.
Let me know if that makes sense :).
Cheers!
x
682