Podcast Planner verbiage and layout #628

brandonhundt · 2023-04-27T20:29:58Z

closes: #606

Now that we have a working calendar (!!!EXCITING!!!) I thought we could take a pass at the verbiage and the layout of the calendar. This PR's changes will get us closer to what exists in Publish currently where we've received a lot of neutral to positive feedback. (NOTE: I think we can open a new ticket to explore enhancements to this feature that go beyond the existing functionality in this PR.)

There were a lot of places where we had help text, headers, and field labels that felt a little redundant or overly technical in its use, so I attempted to clean It up.

Also, I reverted this to a single column layout like we have now. I think this will serve our producers finely enough until we get the time to really rethink the feature in the future.

brandonhundt · 2023-04-27T20:30:48Z

app/views/podcast_planner/_form_date_calculator.html.erb

-  <div class="mb-4">
-    <h3 class="fw-bold"><%= t(".header.day_select") %></h3>
-    <p><%= t(".help.day_select") %></p>
+    <h3 class="mb-3"><%= t(".header.day_select") %></h3>


Example of simplifying the text presented to the user.

brandonhundt · 2023-04-27T20:31:47Z

app/views/podcast_planner/_form_date_calculator.html.erb

+          <%= form.date_field :start_date, min: DateTime.tomorrow, max: DateTime.tomorrow + 1.years, value: DateTime.tomorrow, data: {action: "click#submit"} %>
+          <%= form.label :start_date %>
+        </div>
+      </div>


I adjusted the layout of this field so that the selector field is full width, with two variable fields appearing below. This is more consistent with our UI patterns.

brandonhundt · 2023-04-27T20:32:10Z

app/views/podcast_planner/_form_main.html.erb

@@ -8,7 +8,7 @@
      }
    ) do |form| %>
    <h1 class="text-black fw-bold d-flex flex-fill"><%= t(".header") %></h1>
-    <p><%= t(".help_html", url: new_podcast_episode_path(@podcast)) %></p>
+    <p class="lh-sm"><%= t(".help_html", url: new_podcast_episode_path(@podcast)) %></p>


Line-height was really tall, looked weird.

brandonhundt · 2023-04-27T20:32:58Z

app/views/podcast_planner/_form_side.html.erb

+        <%= form.select :publish_time, time_options %>
+        <%= form.label :publish_time %>
+      </div>
+    </div>


This file was reworked since its no longer technically a sidebar card

Functionally there shouldn't be any different. All presentational here.

brandonhundt · 2023-04-27T20:34:25Z

config/locales/en.yml

@@ -230,13 +230,13 @@ en:
      success: Episode drafts generated.
    form_main:
      header: Plan Episodes
-      help_html: Save yourself some time by automatically creating multiple episode drafts to create a production schedule, it may also help your revenue as our sales teams will have access to dropdates to sell against. If you only wish to add a single episode, <a href="%{url}">go here</a>.
+      help_html: Add multiple episode drafts to create a production schedule. Episode drafts improve the accuracy of your podcast's forecasts. If you only need to add a single episode, <a href="%{url}">go here</a>.


A verbiage review in this file is very appreciated!!!

radical-ube · 2023-05-02T13:58:55Z

app/views/podcast_planner/_form_side.html.erb

+  <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>


this needs a count variable to pass through to the yml file in order to display the correct number.

you can probably pass through @planner.dates.count but that would only reflect the dates generated through the calculator, not selected manually. i could probably figure out a helper method to add to the stimulus controller that would update every time a manual date has been clicked as well. is this an important feature for parity?

radical-ube

in general i have no comments on verbiage since this is a return to parity verbiage and we're not planning on the improvements until post-launch. the only comment i made was regarding the count variable for that one header label. the only other comment i would make is figuring out a color key since that is one thing new to the calendar.

radical-ube

should have put previous comment under request changes for the count variable.

radical-ube · 2023-05-02T15:37:07Z

app/helpers/podcast_planner_helper.rb

@@ -5,6 +5,7 @@ module PodcastPlannerHelper
  MONTHLY_WEEKS = I18n.t([:first, :second, :third, :fourth, :fifth], scope: [:podcast_planner, :helper, :monthly_options])
  DATE_CONTROLLER = "date"
  TOGGLE_ACTION = "click->date#toggleSelect"
+  RECOUNT_ACTION = "click->count#recount"


this and the counterTarget below are additions for the new stimulus count_controller. Essentially adds a counter to each date. the controller counts the ones that are selected.

moved counterTarget to the input in the _calendar partial.

app/javascript/controllers/count_controller.js

radical-ube · 2023-05-02T15:41:03Z

config/locales/en.yml

+        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: "Drafts planned: "


changed this so it no longer needs to pass in a count variable. the count is displayed in the view in the innerHTML of a new span in the h3 that uses this label.

radical-ube · 2023-05-02T15:41:56Z

app/views/podcast_planner/_form_side.html.erb

-              <%= form.label :segment_count %>
-            </div>
+  <div class="card p-4 mt-4mb-4">
+    <%= turbo_frame_tag "preview", target: "_top" do %>


moved turbo_frame up here so that the count display will update when the calculator changes selections.

app/views/podcast_planner/_form_side.html.erb

cavis

Couple minor suggestions @radical-ube. But all pretty much your call - they're slightly stylistic.

@brandonhundt one slight issue on wide viewports

It isn't going to be trivial to display 8 calendars magically as the user widens the viewport. So may just want to restrict the max-width of those for now? Or force maximum 3-per-row?

app/javascript/controllers/count_controller.js

cavis · 2023-05-02T20:09:40Z

app/javascript/controllers/count_controller.js

+    const selectedTargets = this.counterTargets.filter((el) => {
+      return el.firstElementChild.disabled
+    })
+    return this.counterTargets.length - selectedTargets.length


Naming is a bit misleading ... selectedTargets appears to be all the deselected hidden fields? Maybe invert the above filter to !disabled, and then just return .length?

app/views/podcast_planner/_form_side.html.erb

cavis · 2023-05-02T20:13:15Z

app/javascript/controllers/count_controller.js

+export default class extends Controller {
+  static targets = ["counter", "display"]
+  static values = {
+    selected: { type: Number, default: 0 },


Is this even being passed in anywhere, or are you getting the default?

I'd probably suggest omitting this entirely. The server should render the correct number in the HTML to start with. And then drop the connect() method here, and just wait until some action calls recount() to have this controller modify the innerHTML.

brandonhundt · 2023-05-03T18:04:57Z

@ube @ryan I've fixed the grid issue so that on the largest screens it will always display in 3 columns.

Also added a key for the calendar, and tweaked the hover state on the calendar dates.

brandonhundt · 2023-05-03T18:06:01Z

app/assets/stylesheets/app/calendar.scss

      color: $light;
+      cursor: pointer;


to let the user know they can click to add dates. chose the link color to emphasize clicking.

brandonhundt · 2023-05-03T18:06:25Z

app/views/podcast_planner/_calendar.html.erb

@@ -1,9 +1,9 @@
-<div class="col <%= "d-none" if index >= range %>" data-pager-target="page">
+<div class="col col-xl-4 <%= "d-none" if index >= range %>" data-pager-target="page">


Thats all it was to fix the grid issue.

cavis

👍

brandonhundt added 2 commits April 27, 2023 14:12

feat(podcast-planner): update verbiage and layout

3c6fe95

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

ed6af4d

brandonhundt requested a review from cavis April 27, 2023 20:29

brandonhundt commented Apr 27, 2023

View reviewed changes

lint

5c45094

radical-ube reviewed May 2, 2023

View reviewed changes

radical-ube requested changes May 2, 2023

View reviewed changes

Add counter controller to count selected items

fb9bae9

radical-ube reviewed May 2, 2023

View reviewed changes

Add count controller

9a6e816

radical-ube reviewed May 2, 2023

View reviewed changes

app/javascript/controllers/count_controller.js Show resolved Hide resolved

radical-ube reviewed May 2, 2023

View reviewed changes

app/views/podcast_planner/_form_side.html.erb Outdated Show resolved Hide resolved

Lint fix

20dcbcd

cavis requested changes May 2, 2023

View reviewed changes

Refactor counter controller for simplicity

07adb0c

radical-ube approved these changes May 3, 2023

View reviewed changes

brandonhundt added 2 commits May 3, 2023 12:45

feat(podcast_planner): fix calendar spacing

ddd53d4

feat(podcast_planner): added a key

f4d431b

brandonhundt commented May 3, 2023

View reviewed changes

cavis approved these changes May 3, 2023

View reviewed changes

cavis merged commit 86a1ac3 into main May 3, 2023
1 check passed

cavis deleted the feat/606-episode-drafts-sweep branch May 3, 2023 19:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Podcast Planner verbiage and layout #628

Podcast Planner verbiage and layout #628

brandonhundt commented Apr 27, 2023

brandonhundt Apr 27, 2023

brandonhundt Apr 27, 2023

brandonhundt Apr 27, 2023

brandonhundt Apr 27, 2023

brandonhundt Apr 27, 2023

brandonhundt Apr 27, 2023

radical-ube May 2, 2023

radical-ube left a comment

radical-ube left a comment

radical-ube May 2, 2023

radical-ube May 3, 2023

radical-ube May 2, 2023

radical-ube May 2, 2023

cavis left a comment

cavis May 2, 2023

cavis May 2, 2023

brandonhundt commented May 3, 2023

brandonhundt May 3, 2023

brandonhundt May 3, 2023

cavis left a comment

		@@ -1,9 +1,9 @@
		<div class="col <%= "d-none" if index >= range %>" data-pager-target="page">
		<div class="col col-xl-4 <%= "d-none" if index >= range %>" data-pager-target="page">

Podcast Planner verbiage and layout #628

Podcast Planner verbiage and layout #628

Conversation

brandonhundt commented Apr 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

radical-ube left a comment

Choose a reason for hiding this comment

radical-ube left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cavis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brandonhundt commented May 3, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cavis left a comment

Choose a reason for hiding this comment