Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Podcast Planner verbiage and layout #628

Merged
merged 9 commits into from
May 3, 2023
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/assets/stylesheets/shared/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ body {
background-position: top left;
}

h3 {
color: $black;
}

.prx-main {
position: relative;
display: grid;
Expand Down
4 changes: 3 additions & 1 deletion app/helpers/podcast_planner_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved counterTarget to the input in the _calendar partial.


def day_options
DateTime::DAYNAMES.map.with_index { |day, i| [day, i] }
Expand Down Expand Up @@ -59,7 +60,8 @@ def calendar_day_tag(day:, month:, calendar:, &block)
data = {}
if date_is_in_month?(day, month)
data[:controller] = DATE_CONTROLLER
data[:action] = TOGGLE_ACTION
data[:action] = [TOGGLE_ACTION, RECOUNT_ACTION].join(" ")
data["count-target"] = "counter"
end

content_tag(:td, class: calendar.td_classes_for(day), data: data) do
Expand Down
25 changes: 25 additions & 0 deletions app/javascript/controllers/count_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Controller } from "@hotwired/stimulus"

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

connect() {
this.selectedValue = this.countSelectedTargets()
this.displayTarget.innerHTML = this.selectedValue
}

recount() {
this.selectedValue = this.countSelectedTargets()
this.displayTarget.innerHTML = this.selectedValue
}

countSelectedTargets() {
radical-ube marked this conversation as resolved.
Show resolved Hide resolved
const selectedTargets = this.counterTargets.filter(el => {
return el.firstElementChild.disabled
})
return this.counterTargets.length - selectedTargets.length
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

}
}
33 changes: 12 additions & 21 deletions app/views/podcast_planner/_form_date_calculator.html.erb
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<section>
<div class="mb-4">
<h2 class="fw-bold"><%= t(".header.date_calculation") %></h2>
<p><%= t(".help.date_calculation") %></p>
</div>

<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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example of simplifying the text presented to the user.

<div class="col-lg-12">
<div class="form-floating">
<%= form.select :selected_days, day_options, {include_blank: true}, data: {action: "click#submit"}, multiple: true %>
Expand All @@ -16,26 +10,22 @@
</div>

<div class="mb-4" data-controller="toggle-field">
<h3 class="fw-bold"><%= t(".header.week_select") %></h3>
<p><%= t(".help.week_select") %></p>
<h3 class="mb-3"><%= t(".header.week_select") %></h3>
<div class="row">
<div class="col-lg-6">
<p><%= t(".help.calculate_weeks") %></p>
<div class="form-floating">
<%= form.select :week_condition, week_condition_options, {}, data: {action: "toggle-field#displayOnlyThisField click#submit"} %>
<%= form.label t(".label.week_condition") %>
</div>
</div>
<div class="col-lg-6">
<div class="" data-toggle-field-target="field" field="monthly">
<p><%= t(".help.select_weeks") %></p>
<div class="form-floating">
<%= form.select :monthly_weeks, monthly_weeks_options, {include_blank: true}, data: {action: "click#submit"}, multiple: true %>
<%= form.label t(".label.week_of_month") %>
</div>
</div>
<div class="d-none" data-toggle-field-target="field" field="periodic">
<p><%= t(".help.select_period") %></p>
<div class="form-floating">
<%= form.select :period, periodic_weeks_options, {}, data: {action: "click#submit"} %>
<%= form.label t(".label.period") %>
Expand All @@ -46,25 +36,26 @@
</div>

<div class="mb-4" data-controller="toggle-field">
<h3 class="fw-bold"><%= t(".header.range_select") %></h3>
<p><%= t(".help.range_select") %></p>
<h3 class="mb-3"><%= t(".header.range_select") %></h3>
<div class="row mb-4">
<div class="col-lg-6">
<p><%= t(".help.calculate_range") %></p>
<div class="col-12">
<div>
<div class="form-floating">
<%= form.select :date_range_condition, end_condition_options, {}, data: {action: "toggle-field#displayOnlyThisField click#submit"} %>
<%= form.label t(".label.date_range_condition") %>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-lg-6">
<p><%= t(".help.select_range") %></p>
<div class="form-floating mb-2">
<%= 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 class="form-floating mb-2">
<%= 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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


<div class="col-lg-6">
<div data-toggle-field-target="field" field="episodes">
<div class="form-floating">
<%= form.number_field :number_of_episodes, {min: 1, max: 100, step: 1, value: 10, data: {action: "click#submit"}} %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/podcast_planner/_form_main.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line-height was really tall, looked weird.


<%= render "form_date_calculator", form: form %>

Expand Down
91 changes: 44 additions & 47 deletions app/views/podcast_planner/_form_side.html.erb
Original file line number Diff line number Diff line change
@@ -1,56 +1,53 @@
<div class="card">
<div class="card-header-primary">
<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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

</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="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>

<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 class="card p-4 mt-4mb-4">
<%= turbo_frame_tag "preview", target: "_top" do %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<div data-controller="pager count" data-pager-range-value="6">
<div class="d-flex justify-content-between">
<h3 class="mb-3"><%= t(".header.number_of_drafts") %>
<span data-count-target="display"></span>
radical-ube marked this conversation as resolved.
Show resolved Hide resolved
</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="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>

<%= 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>
<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>
</div>
</div>
<div class="card-footer">
<%= form.submit t(".label.submit"), class: "btn btn-primary" %>
</div>
<% end %>
</div>
<% end %>
</div>
<%= form.submit t(".label.submit"), class: "btn btn-primary mb-4" %>
<% end %>
10 changes: 3 additions & 7 deletions app/views/podcast_planner/show.html.erb
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<%= render "podcasts/tabs" %>

<div class="row my-4 px-2">
<div class="col-lg-4">
<%= render "form_main" %>
</div>
<div class="col-lg-8">
<%= render "form_side" %>
</div>
<div class="my-4 px-2">
<%= render "form_main" %>
<%= render "form_side" %>
</div>
35 changes: 19 additions & 16 deletions config/locales/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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>.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

form_date_calculator:
header:
date_calculation: Date Calculation of Draft Batch
day_select: Day Selection
week_select: Week Selection
range_select: Date Range Selection
day_select: Which day of the week do you plan to publish your episodes?
week_select: Which weeks of each month do you plan to publish on?
range_select: How long will episodes recur?
help:
date_calculation: Calculate release dates for your drafts by selecting which days and weeks you plan to publish, and then select a date range.
day_select: Which day of the week do you plan to publish your episodes? Select all that apply.
Expand All @@ -248,16 +248,19 @@ en:
calculate_range: Calculate the end of the batch by
select_range: Select range
label:
week_condition: Weekly rhythm
week_of_month: Week of the month
period: Interval
date_range_condition: End range
week_condition: Calculate the weeks by
week_of_month: Select Week of the month
period: Select weekly interval
date_range_condition: Calculate the end of the batch by
form_side:
header:
preview: Schedule Preview
publish_time: Publish Time
audio_segments: Audio Segments
number_of_drafts: "Number of Draft Episodes: %{count}"
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: "Drafts planned: "
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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:
preview: Select more options to get a schedule preview.
label:
Expand All @@ -274,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
Expand Down