add transcript to a tab

adrienpoly · Jul 9, 2024 · 2dee75c · 2dee75c
1 parent ec24373
commit 2dee75c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/app/views/talks/_talk.html.erb b/app/views/talks/_talk.html.erb
@@ -20,20 +20,29 @@
 
   <div class="py-4 flex flex-col gap-4">
     <h1><%= talk.title %></h1>
+    <div role="tablist" class="tabs tabs-lifted">
+      <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Description" checked>
+      <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+        <p><%= simple_format auto_link(talk.description, html: {target: "_blank", class: "link"}) %></p>
 
-    <p><%= simple_format auto_link(talk.description, html: {target: "_blank"}) %></p>
+        <p class="flex">
+          <span><%= talk.event_name %></span>
+          <span><%#= talk.event_edition %></span>
+        </p>
 
-    <p class="flex">
-      <span><%= talk.event_name %></span>
-      <span><%#= talk.event_edition %></span>
-    </p>
+      </div>
+
+      <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Transcript">
+      <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+        <%= render "transcript", talk: talk %>
+      </div>
+    </div>
 
     <% if action_name != "show" %>
       <%= link_to "Show this talk", talk, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
       <%= link_to "Edit this talk", edit_talk_path(talk), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
     <% end %>
 
-    <%= render "transcript", talk: talk %>
 
   </div>
 <% end %>

diff --git a/app/views/talks/_transcript.html.erb b/app/views/talks/_transcript.html.erb
@@ -1,10 +1,12 @@
 <%# locals: talk: -%>
 
-<% talk.transcript.cues.each do |cue| %>
-  <div class="flex gap-2">
-    <span class="cursor-pointer" data-action="click->video-player#seekTo" data-video-player-time-param="<%= cue.start_time_in_seconds %>">
-      <%= cue.start_time %>
-    </span>
-    <span><%= cue.text %></span>
-  </div>
-<% end %>
+<div class="flex flex-col gap-2">
+  <% talk.transcript.cues.each do |cue| %>
+    <div class="flex gap-4">
+      <span class="cursor-pointer" data-action="click->video-player#seekTo" data-video-player-time-param="<%= cue.start_time_in_seconds %>">
+        <%= cue.start_time %>
+      </span>
+      <span><%= cue.text %></span>
+    </div>
+  <% end %>
+</div>