feat(podcast-planner): adjust layout and verbiage changes

app/views/podcast_planner/_form_side.html.erb

@@ -1,56 +1,51 @@
-<div class="card my-4 mx-2 g-0">
-  <div class="card-header-info">
-    <h5 class="card-title"><%= t(".header.preview") %></h5>
+<%= form_with(
+  url: podcast_planner_path(@podcast),
+  method: :post
+) do |form| %>
+  <div class="mb-4">
+    <h3 class="mb-3"><%= t(".header.publish_time") %></h3>
+    <div class="col-lg-12">
+      <div class="form-floating">
+        <%= form.select :publish_time, time_options %>
+        <%= form.label :publish_time %>
+      </div>
+    </div>
   </div>
 
-  <%= form_with(
-        url: podcast_planner_path(@podcast),
-        method: :post
-      ) do |form| %>
-      <div class="card-body">
-        <div class="row mb-4">
-          <div class="col-lg-6">
-            <h3 class="fw-bold"><%= t(".header.publish_time") %></h3>
-            <div class="form-floating">
-              <%= form.select :publish_time, time_options %>
-              <%= form.label :publish_time %>
-            </div>
-          </div>
-
-          <div class="col-lg-6">
-            <h3 class="fw-bold"><%= t(".header.audio_segments") %></h3>
-            <div class="form-floating">
-              <%= form.number_field :segment_count, {min: 1, max: 10, step: 1, value: 2} %>
-              <%= form.label :segment_count %>
-            </div>
-          </div>
-        </div>
-
-        <div class="col-lg">
-          <div data-controller="pager" data-pager-range-value="6">
-            <div class="mb-2">
-              <%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageBackward", pager_target: "prev"}, disabled: true do %>
-                <span class="material-icons">arrow_left</span>
-                Month
-              <% end %>
-              <%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageForward", pager_target: "next"} do %>
-                Month
-                <span class="material-icons">arrow_right</span>
-              <% end %>
-            </div>
+  <div class="mb-4">
+    <h3 class="mb-3"><%= t(".header.audio_segments") %></h3>
+    <div class="col-lg-12">
+      <div class="form-floating">
+        <%= form.number_field :segment_count, {min: 1, max: 10, step: 1, value: 2} %>
+        <%= form.label :segment_count %>
+      </div>
+    </div>
+  </div>
 
-            <%= turbo_frame_tag "preview", target: "_top" do %>
-              <div class="row">
-                <% 24.times do |i| %>
-                  <%= render "calendar", form: form, start_date: Date.today.beginning_of_month + i.months, planner: @planner, index: i, range: 6 %>
-                <% end %>
-              </div>
-            <% end %>
-          </div>
+  <div class="card p-4 mt-4mb-4">
+    <div data-controller="pager" data-pager-range-value="6">
+      <div class="d-flex justify-content-between">
+        <h3 class="mb-3"><%= t(".header.number_of_drafts") %></h3>
+        <div class="mb-2">
+          <%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageBackward", pager_target: "prev"}, disabled: true do %>
+            <span class="material-icons">arrow_left</span>
+            Month
+          <% end %>
+          <%= button_tag type: "button", class: "btn btn-primary btn-sm", data: {action: "click->pager#pageForward", pager_target: "next"} do %>
+            Month
+            <span class="material-icons">arrow_right</span>
+          <% end %>
         </div>
       </div>
-      <div class="card-footer">
-        <%= form.submit t(".label.submit"), class: "btn btn-primary" %>
+      <%= turbo_frame_tag "preview", target: "_top" do %>
+        <div class="row">
+          <% 24.times do |i| %>
+            <%= render "calendar", form: form, start_date: Date.today.beginning_of_month + i.months, planner: @planner, index: i, range: 6 %>
+          <% end %>
+        </div>
+      <% end %>
       </div>
-  <% end %>
-</div>
+    </div>
+  </div>
+  <%= form.submit t(".label.submit"), class: "btn btn-primary mb-4" %>
+<% end %>

app/views/podcast_planner/show.html.erb

@@ -1,9 +1,6 @@
 <%= render "podcasts/tabs" %>
 
-<div class="col col-md-12 my-4 px-2">
+<div class="my-4 px-2">
   <%= render "form_main" %>
-</div>
-
-<div class="col col-md-12">
-    <%= render "form_side" %>
+  <%= render "form_side" %>
 </div>

config/locales/en.yml

@@ -254,11 +254,11 @@ en:
         date_range_condition: Calculate the end of the batch by
     form_side:
       header:
-        preview: 4. Preview Draft Schedule
-        publish_time: Publish Time
-        audio_segments: Audio Segments
+        preview: Preview Draft Schedule
+        publish_time: What time of day do you plan to publish the episodes?
+        audio_segments: How many audio segments?
         segment_count: Number of segments
-        number_of_drafts: "Number of Draft Episodes: %{count}"
+        number_of_drafts: "Planning %{count} drafts"
         help:
           segment_count: Enter the number of original audio segments. The number of segments helps determine the number and location of ad breaks for this episode.
       help:
@@ -277,10 +277,10 @@ en:
         third: Third
         fourth: Fourth
         fifth: Fifth
-      episodes: number of episodes
-      end_date: end date
-      month: month
-      period: interval
+      episodes: Number of episodes
+      end_date: End date
+      month: Weeks of the Month
+      period: Weekly interval
   podcast_switcher:
     dropdown:
       all: View all my Podcasts