add nested turbo frame

o-200 · Dec 20, 2024 · 95e5bbf · 95e5bbf
1 parent d6bc787
commit 95e5bbf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg bg-body-tertiary mb-3">
   <div class="container-fluid">
-    <%= link_to content_for(:title) || "Podcaster", root_path, class: 'navbar-brand' %>
+    <%= link_to content_for(:title) || "Podcaster", root_path, class: 'navbar-brand', data: { turbo_frame: 'podcast_frame' } %>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -37,7 +37,7 @@
               <li>
                 <%= link_to "My podcasts", load_podcasts_path(filter: 'my_podcasts'),
                   class: "dropdown-item btn btn-outline-success",
-                  data: { turbo_frame: 'podcasts_list' } %>
+                  data: { turbo_frame: 'podcast_frame' } %>
               </li>
               <li><%= link_to "Add new podcast", new_podcast_path, class: 'dropdown-item btn btn-outline-success' %></li>
               <li><hr class="dropdown-divider"></li>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -18,15 +18,17 @@
   </head>
 
   <body>
-    <div class="container">
-      <%= render "layouts/header" %>
-      <%= render "layouts/alert" %>
+    <%= turbo_frame_tag "main" do %>
+      <div class="container">
+        <%= render "layouts/header" %>
+        <%= render "layouts/alert" %>
 
-      <div class="mb-3">
-        <%= yield %>
-      </div>
+        <div class="mb-3">
+          <%= yield %>
+        </div>
 
-      <%= render "layouts/footer" %>
-    </div>
+        <%= render "layouts/footer" %>
+      </div>
+    <% end %>
   </body>
 </html>
diff --git a/app/views/podcasts/index.html.erb b/app/views/podcasts/index.html.erb
@@ -6,7 +6,11 @@
           <div class="card">
             <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9abc28136491393.61fa8bcfee8ce.png" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title"><%= link_to @last_podcast.title, @last_podcast, class: "text-decoration-none", data: { turbo: false } %></h5>
+              <h5 class="card-title">
+                <%= link_to @last_podcast.title, @last_podcast,
+                  class: "text-decoration-none",
+                  data: { turbo_frame: 'podcasts_list' } %>
+              </h5>
               <p class="card-text" style="max-width: 200px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;"><%= @last_podcast.description %></p>
             </div>
             <div class="card-footer">
@@ -16,7 +20,11 @@
           <div class="card">
             <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/c4c965136491393.6336af6811b4b.jpg" class="card-img-top" alt="...">
             <div class="card-body">
-              <h5 class="card-title"><%= link_to @random_podcast.title, @random_podcast, class: "text-decoration-none", data: { turbo: false } %></h5>
+              <h5 class="card-title">
+                <%= link_to @random_podcast.title, @random_podcast,
+                  class: "text-decoration-none",
+                  data: { turbo_frame: 'podcasts_list' } %>
+                </h5>
               <p class="card-text" style="max-width: 200px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;"><%= @random_podcast.description %></p>
             </div>
             <div class="card-footer">