Skip to content

Commit

Permalink
views/listings etc i18n (#15040)
Browse files Browse the repository at this point in the history
* views/listings etc i18n

* helper labels

* remove ja.yml

* Update edit.html.erb

* Apply suggestions from code review

Co-authored-by: Michael Kohl <citizen428@forem.com>

* Update delete_confirm.html.erb

* Update edit.html.erb

* Update fr.yml

* Update edit.html.erb

Co-authored-by: Michael Kohl <citizen428@forem.com>
  • Loading branch information
yheuhtozr and Michael Kohl committed Oct 27, 2021
1 parent 3c204c2 commit 824397b
Show file tree
Hide file tree
Showing 15 changed files with 412 additions and 84 deletions.
48 changes: 24 additions & 24 deletions app/views/listings/_form.html.erb
Expand Up @@ -10,27 +10,27 @@
<div class="grid gap-6">
<div class="crayons-field">
<%= form.label "title", class: "crayons-label" %>
<%= form.text_field "title", placeholder: "128 characters max, plain text", class: "crayons-textfield" %>
<%= form.text_field "title", placeholder: t("views.listings.form.title.placeholder"), class: "crayons-textfield" %>
</div>

<div class="crayons-field">
<%= form.label "body_markdown", "Body Markdown", class: "crayons-field__label" %>
<%= form.text_area "body_markdown", placeholder: "...", class: "crayons-textfield" %>
<p class="crayons-field__description">400 characters max, 12 line break max, no images allowed, *markdown is encouraged*</p>
<%= form.label "body_markdown", class: "crayons-field__label" %>
<%= form.text_area "body_markdown", placeholder: t("views.listings.form.body_markdown.placeholder"), class: "crayons-textfield" %>
<p class="crayons-field__description"><%= t("views.listings.form.body_markdown.description") %></p>
</div>

<div>
<div class="crayons-field mb-4">
<label class="crayons-field__label" id="listing_category_placeholder">Category</label>
<label class="crayons-field__label" id="listing_category_placeholder"><%= t("views.listings.form.category.label") %></label>
<select class="crayons-select" id="listing_category_placeholder">
<option>
Conference CFP (1 Credit)
<%= t("views.listings.form.category.placeholder") %>
</option>
</select>
</div>

<details>
<summary>Category details/rules</summary>
<summary><%= t("views.listings.form.category.summary") %></summary>
</details>
</div>
<%# The following tag_list field is overriden by the Tags JS component
Expand All @@ -39,15 +39,15 @@
we prevent the screen from "jumping" once the deferred JS is loaded
and executed. %>
<div class="crayons-field">
<%= form.label "tag_list", "Tags", class: "crayons-field__label" %>
<%= form.text_field "tag_list", placeholder: "Add up to 8 tags...", class: "crayons-textfield" %>
<%= form.label "tag_list", class: "crayons-field__label" %>
<%= form.text_field "tag_list", placeholder: t("views.listings.form.tags.placeholder"), class: "crayons-textfield" %>
</div>

<div class="crayons-field">
<label class="crayons-field__label" for="expires_at_placeholder">
Custom Expire Date
<%= t("helpers.label.listing.expires_at") %>
<p class="crayons-field__description">
If applicable for time sensitive events, deadlines, etc.
<%= t("views.listings.form.expiry.description") %>
</p>
</label>
<input
Expand All @@ -58,9 +58,9 @@

<% if @organizations.present? && @organizations.size > 0 %>
<div class="crayons-field">
<%= form.label "organization_id", "Post under an organization", class: "crayons-field__label" %>
<%= form.select :organization_id, { "None" => "None" }, {}, { class: "crayons-select m:max-w-50" } %>
<p class="crayons-field__description">Posting on behalf of an organization spends the organization's credits.</p>
<%= form.label "organization_id", class: "crayons-field__label" %>
<%= form.select :organization_id, { t("views.listings.form.organization.none") => "None" }, {}, { class: "crayons-select m:max-w-50" } %>
<p class="crayons-field__description"><%= t("views.listings.form.organization.description") %></p>
</div>
<% end %>

Expand All @@ -72,8 +72,8 @@
checked=true />

<label class="crayons-field__label" for="contact_via_connect_placeholder">
Connect messaging
<p class="crayons-field__description">Allow Users to message me via Connect.</p>
<%= t("views.listings.form.connect.subtitle") %>
<p class="crayons-field__description"><%= t("views.listings.form.connect.description") %></p>
</label>
</div>
</div>
Expand All @@ -84,25 +84,25 @@
<% end %>

<div class="crayons-field">
<%= form.label "location", "Location (If applicable for events, etc.)", class: "crayons-field__label" %>
<%= form.text_field "location", placeholder: "New York", class: "crayons-textfield m:max-w-50" %>
<p class="crayons-field__description">32 characters max, plain text</p>
<%= form.label "location", t("views.listings.form.location.label"), class: "crayons-field__label" %>
<%= form.text_field "location", placeholder: t("views.listings.form.location.placeholder"), class: "crayons-textfield m:max-w-50" %>
<p class="crayons-field__description"><%= t("views.listings.form.location.description") %></p>
</div>
</div>

<div class="px-4 m:px-0">
<% unless @credits.size > 0 || (@organizations.present? && @organizations.sum(:unspent_credits_count) > 0) %>
<div class="crayons-notice mb-4" aria-live="polite">You need at least one credit to create a listing.</div>
<div class="crayons-notice mb-4" aria-live="polite"><%= t("views.listings.form.no_credit") %></div>
<% end %>
<div class="flex mb-4 items-center">
<% if @credits.size > 0 || (@organizations.present? && @organizations.sum(:unspent_credits_count) > 0) %>
<%= form.submit "Publish listing", class: "crayons-btn mr-2" %>
<%= form.submit t("views.listings.form.publish"), class: "crayons-btn mr-2" %>
<% else %>
<a href="/credits/new" class="crayons-btn mr-2" data-no-instant>Purchase credits</a>
<a href="/credits/new" class="crayons-btn mr-2" data-no-instant><%= t("views.listings.form.purchase") %></a>
<% end %>
<%= form.button "Save draft", type: "submit", name: "listing[action]", class: "crayons-btn crayons-btn--secondary", value: "draft" %>
<%= form.button t("views.listings.form.save"), type: "submit", name: "listing[action]", class: "crayons-btn crayons-btn--secondary", value: "draft" %>
</div>

<p class="fs-s color-base-70 mb-6">You will not be charged credits to save a draft.</p>
<p class="fs-s color-base-70 mb-6"><%= t("views.listings.form.save_notice") %></p>
</div>
<% end %>
2 changes: 1 addition & 1 deletion app/views/listings/_form_errors.html.erb
@@ -1,6 +1,6 @@
<% if listing.errors.any? %>
<div class="crayons-notice crayons-notice--danger" role="alert">
<h2 class="fs-l"><%= pluralize(listing.errors.count, "error") %> prohibited this listing from being saved:</h2>
<h2 class="fs-l"><%= t("views.listings.errors", count: listing.errors.count) %></h2>
<ul>
<% listing.errors.full_messages.each do |message| %>
<li><%= message %></li>
Expand Down
2 changes: 1 addition & 1 deletion app/views/listings/_liquid.html.erb
Expand Up @@ -3,7 +3,7 @@
<div class="ltag__listing-content">
<h3>
<a href="/listings">
This listing has expired.
<%= t("views.listings.expired") %>
</a>
</h3>
</div>
Expand Down
14 changes: 5 additions & 9 deletions app/views/listings/delete_confirm.html.erb
@@ -1,22 +1,18 @@
<main id="main-content" class="crayons-layout crayons-layout--limited-l gap-0">
<main id="main-content" class="crayons-layout crayons-layout--limited-l gap-0">
<div class="crayons-card crayons-card--secondary text-styles text-styles--secondary text-padding -mb-1 mx-3 m:mx-6 mt-3">
<%= @listing.title %>
</div>
<div class="crayons-card text-padding">
<h1 class="crayons-subtitle-1 mb-2">Are you sure you want to delete this listing?</h1>
<h1 class="crayons-subtitle-1 mb-2"><%= t("views.listings.delete.subtitle") %></h1>
<p class="fs-l mb-4">
You cannot undo this action, perhaps you just want to
<a data-no-instant href="<%= edit_listing_path(@listing) %>">
<%= @listing.published ? "unpublish" : "edit" %>
</a>
instead?
<%= t("views.listings.delete.description.text_html", action: link_to(@listing.published ? t("views.listings.delete.description.unpublish") : t("views.listings.delete.description.edit"), edit_listing_path(@listing), data: { no_instant: "" })) %>
</p>

<%= form_tag listing_path(@listing), method: :delete do %>
<button class="crayons-btn crayons-btn--danger">Delete</button>
<button class="crayons-btn crayons-btn--danger"><%= t("views.listings.delete.submit") %></button>

<a data-no-instant href="<%= edit_listing_path(@listing) %>" class="crayons-btn crayons-btn--secondary">
<%= @listing.published ? "Unpublish" : "Edit" %>
<%= @listing.published ? t("views.listings.delete.unpublish") : t("views.listings.delete.edit") %>
</a>
<% end %>
</div>
Expand Down
60 changes: 30 additions & 30 deletions app/views/listings/edit.html.erb
@@ -1,55 +1,55 @@
<% title "Edit Listing" %>
<% title t("views.listings.edit.heading") %>

<header class="crayons-layout crayons-layout--limited-l flex items-center justify-between p-2 l:p-4 l:pb-0">
<h1 class="crayons-title">Edit Listing</h1>
<h1 class="crayons-title"><%= t("views.listings.edit.heading") %></h1>
</header>

<main class="crayons-layout crayons-layout--2-cols crayons-layout--2-cols--inverted crayons-layout--limited-l">
<div class="crayons-layout__content">
<div class="crayons-card mb-6 p-6">
<%= form_for(@listing, html: { class: "grid gap-6 mb-6" }) do |f| %>
<div class="crayons-notice" aria-live="polite">You can only edit title/body/tags of drafts or within the first 24 hours of listing or bumping</div>
<div class="crayons-notice" aria-live="polite"><%= t("views.listings.edit.notice") %></div>

<%= render partial: "form_errors", locals: { listing: @listing } %>
<% if (@listing.bumped_at && @listing.bumped_at > 24.hours.ago) || @listing.updated_at && !@listing.published %>
<div class="crayons-field">
<%= f.label "title", "Title", class: "crayons-field__label" %>
<%= f.text_field "title", maxlength: 128, placeholder: "128 characters max, plain text", class: "crayons-textfield" %>
<%= f.label "title", class: "crayons-field__label" %>
<%= f.text_field "title", maxlength: 128, placeholder: t("views.listings.form.title.placeholder"), class: "crayons-textfield" %>
</div>
<div class="crayons-field">
<%= f.label "body_markdown", "Body Markdown", class: "crayons-field__label" %>
<%= f.text_area "body_markdown", maxlength: 400, placeholder: "...", class: "crayons-textfield" %>
<p class="crayons-field__description">400 characters max, 12 line break max, no images allowed, *markdown is encouraged*</p>
<%= f.label "body_markdown", class: "crayons-field__label" %>
<%= f.text_area "body_markdown", maxlength: 400, placeholder: t("views.listings.form.body_markdown.placeholder"), class: "crayons-textfield" %>
<p class="crayons-field__description"><%= t("views.listings.form.body_markdown.description") %></p>
</div>
<div class="crayons-field">
<%= f.label "tag_list", "Tags", class: "crayons-field__label" %>
<%= f.text_field "tag_list", value: @listing.cached_tag_list, placeholder: "8 tags max, comma separated, no spaces or special characters", class: "crayons-textfield" %>
<%= f.label "tag_list", class: "crayons-field__label" %>
<%= f.text_field "tag_list", value: @listing.cached_tag_list, placeholder: t("views.listings.form.tags.placeholder"), class: "crayons-textfield" %>
</div>
<div class="crayons-field">
<%= f.label "expires_at", "Custom Expire Date", class: "crayons-field__label" %>
<%= f.date_field "expires_at", min: Date.tomorrow, max: @listing.natural_expiration_date, class: "crayons-textfield m:max-w-50" %>
<p class="crayons-field__description">
If applicable for time sensitive events, deadlines, etc.
<%= t("views.listings.form.expiry.description") %>
</p>
</div>
<div class="crayons-field crayons-field--checkbox">
<%= f.check_box "contact_via_connect", class: "crayons-checkbox" %>
<label class="crayons-field__label" for="contact_via_connect">
Connect messaging
<p class="crayons-field__description">Allow Users to message me via Connect.</p>
<%= t("views.listings.form.connect.subtitle") %>
<p class="crayons-field__description"><%= t("views.listings.form.connect.description") %></p>
</label>
</div>
<div class="crayons-field">
<%= f.label "location", "Location", class: "crayons-field__label" %>
<%= f.text_field "location", maxlength: 32, placeholder: "New York", class: "crayons-textfield m:max-w-50" %>
<p class="crayons-field__description">32 characters max, plain text</p>
<%= f.label "location", class: "crayons-field__label" %>
<%= f.text_field "location", maxlength: 32, placeholder: t("views.listings.form.location.placeholder"), class: "crayons-textfield m:max-w-50" %>
<p class="crayons-field__description"><%= t("views.listings.form.location.description") %></p>
</div>
<div>
<% if @listing.published %>
<%= f.submit "Update listing", class: "crayons-btn" %>
<%= f.submit t("views.listings.edit.update"), class: "crayons-btn" %>
<% else %>
<%= f.submit "Update draft", class: "crayons-btn crayons-btn--secondary" %>
<%= f.submit t("views.listings.edit.update_draft"), class: "crayons-btn crayons-btn--secondary" %>
<% end %>
</div>
<% end %>
Expand All @@ -58,24 +58,24 @@
<%= form_for(@listing, html: { class: "pt-6 mt-6 border-t-1 border-solid border-0 border-base-20 flex items-center" }) do |f| %>
<% if @listing.published == false %>
<input type="hidden" name="listing[action]" value="publish" />
<%= f.submit "Publish listing", class: "crayons-btn mr-4" %>
<p>This listing is <strong class="color-accent-danger">not</strong> published.</p>
<%= f.submit t("views.listings.edit.publish"), class: "crayons-btn mr-4" %>
<p><%= t("views.listings.edit.not_published.text_html", not: tag.strong(t("views.listings.edit.not_published.not"), class: "color-accent-danger")) %></p>
<% else %>
<input type="hidden" name="listing[action]" value="unpublish" />
<%= f.submit "Unpublish listing", class: "crayons-btn crayons-btn--danger" %>
<%= f.submit t("views.listings.edit.unpublish"), class: "crayons-btn crayons-btn--danger" %>
<% end %>
<% end %>
</div>

<% if @listing.bumped_at %>
<%= form_for(@listing, html: { class: "crayons-card grid gap-6 p-6 mb-6" }) do |f| %>
<header>
<h2 class="mb-2">Bump your listing</h2>
<p>You can bump your listing for the same price as the original listing</p>
<h2 class="mb-2"><%= t("views.listings.edit.bump.subtitle") %></h2>
<p><%= t("views.listings.edit.bump.description") %></p>
</header>
<div class="flex items-center">
<%= f.submit "Bump listing", class: "crayons-btn crayons-btn--secondary mr-4" %>
<p class="color-base-70">Last Published/Bumped: <%= time_ago_in_words @listing.bumped_at %> ago</p>
<%= f.submit t("views.listings.edit.bump.button"), class: "crayons-btn crayons-btn--secondary mr-4" %>
<p class="color-base-70"><%= t("views.listings.edit.bump.last", date: time_ago_in_words(@listing.bumped_at, scope: :'datetime.distance_in_words_ago')) %></p>
</div>
<input type="hidden" name="listing[action]" value="bump" />
<% end %>
Expand All @@ -86,24 +86,24 @@
<% unless @listing.published %>
<%= form_for(@listing, html: { class: "crayons-card crayons-card--secondary p-3 m:p-4 mb-2 m:mb-4" }) do |f| %>
<p class="pb-4">
This listing is <strong class="color-accent-danger">not</strong> published
<%= t("views.listings.edit.not_published.aside_html", not: tag.strong(t("views.listings.edit.not_published.not"), class: "color-accent-danger")) %>
</p>
<input type="hidden" name="listing[action]" value="publish" />
<%= f.submit "Publish listing", class: "crayons-btn w-100" %>
<%= f.submit t("views.listings.edit.publish"), class: "crayons-btn w-100" %>
<% end %>
<% end %>

<div class="crayons-card crayons-card--secondary p-3 m:p-4 mb-2 m:mb-4">
<p>
<% if (@listing.natural_expiration_date) < Date.today %>
Expired <%= time_ago_in_words @listing.natural_expiration_date %> ago
<%= time_ago_in_words @listing.natural_expiration_date, scope: :"datetime.expired_ago" %>
<% else %>
Expires in <%= time_ago_in_words @listing.natural_expiration_date %>
<%= time_ago_in_words @listing.natural_expiration_date, scope: :"datetime.expires_in" %>
<% end %>
</p>
<% if @listing.bumped_at %>
<p class="pt-3 mt-3 border-t-1 border-solid border-0 border-base-10">
Last Published/Bumped: <%= time_ago_in_words @listing.bumped_at %> ago
<%= t("views.listings.edit.bump.last", date: time_ago_in_words(@listing.bumped_at, scope: :"datetime.distance_in_words_ago")) %>
</p>
<% end %>
</div>
Expand Down
14 changes: 7 additions & 7 deletions app/views/listings/index.html.erb
@@ -1,5 +1,5 @@
<%= content_for :page_meta do %>
<% title t("core.listings").to_s %>
<% title t("views.listings.heading") %>

<link rel="canonical" href="<%= app_url(request.path) %>" />
<meta name="description" content="<%= Settings::Community.community_description %>">
Expand All @@ -10,10 +10,10 @@
<meta property="og:site_name" content="<%= community_name %>" />
<% if @displayed_listing %>
<meta property="og:title" content="<%= truncate @displayed_listing.title, length: 54 %>">
<meta property="og:description" content="<%= community_name %> Listing" />
<meta property="og:description" content="<%= t("views.listings.meta.description", community: community_name) %>" />
<meta property="og:image" content="<%= listing_social_image_url @displayed_listing %>">
<meta name="twitter:title" content="<%= truncate @displayed_listing.title, length: 54 %>">
<meta name="twitter:description" content="<%= community_name %> Listing">
<meta name="twitter:description" content="<%= t("views.listings.meta.description", community: community_name) %>">
<meta name="twitter:image:src" content="<%= listing_social_image_url @displayed_listing %>">
<% else %>
<meta property="og:title" content="Listings" />
Expand All @@ -30,12 +30,12 @@
<main id="main-content">

<header class="crayons-page-header s:pb-0">
<h1 class="crayons-title"><%= t("core.listings") %></h1>
<h1 class="crayons-title"><%= t("views.listings.heading") %></h1>

<nav class="flex items-center" aria-label="Listings">
<nav class="flex items-center" aria-label="<%= t("views.listings.nav.aria_label") %>">
<ul class="list-none flex">
<li><a href="<%= new_listing_path %>" class="crayons-btn crayons-btn--secondary">Create</a></li>
<li><a href="<%= listings_dashboard_path %>" class="crayons-btn crayons-btn--secondary ml-2">Manage</a></li>
<li> <a href="<%= new_listing_path %>" class="crayons-btn crayons-btn--secondary"><%= t("views.listings.nav.create") %></a></li>
<li> <a href="<%= listings_dashboard_path %>" class="crayons-btn crayons-btn--secondary ml-2"><%= t("views.listings.nav.manage") %></a></li>
</ul>
</nav>
</header>
Expand Down

0 comments on commit 824397b

Please sign in to comment.