-
Notifications
You must be signed in to change notification settings - Fork 0
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
Changes from 5 commits
3c6fe95
ed6af4d
5c45094
fb9bae9
9a6e816
20dcbcd
07adb0c
ddd53d4
f4d431b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Naming is a bit misleading ... |
||
} | ||
} |
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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 %> | ||
|
@@ -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") %> | ||
|
@@ -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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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"}} %> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 %> | ||
|
||
|
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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This file was reworked since its no longer technically a sidebar card There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 %> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 %> |
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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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>. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
|
@@ -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: " | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. changed this so it no longer needs to pass in a |
||
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: | ||
|
@@ -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 | ||
|
There was a problem hiding this comment.
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 stimuluscount_controller
. Essentially adds a counter to each date. the controller counts the ones that are selected.There was a problem hiding this comment.
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.