Skip to content

Commit

Permalink
Filter Seats based on their Price
Browse files Browse the repository at this point in the history
This commit adds static HTML to render a set of `<input type="radio">`
buttons styled with `<label>` elements that wrap `<svg>` elements.

The values of those filters are static for the time being, and the
selection of a filter does not yet affect the page. The values have been
chosen as `500` cents ($5.00), `1000` cents ($10.00), and `1500` cents
($15.00). They're underscored to resemble their price in dollars, and
are iterated over with [`Array#each_cons`][each_cons] to iterate over
pairs consecutively.

Where there is a `nil` value for `next_maximum`, that indicates that
it's the highest possible value, so the `<input>` should have the
[`checked` attribute][checked].

Desktop
---

![price filtering form](https://user-images.githubusercontent.com/2575027/77386361-03217100-6d61-11ea-9115-9c69a33308f3.png)

[each_cons]: https://ruby-doc.org/core-2.6.3/Enumerable.html#method-i-each_cons
[checked]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/radio#checked
  • Loading branch information
seanpdoyle committed May 29, 2020
1 parent 1f53ca7 commit 752ef6d
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 0 deletions.
1 change: 1 addition & 0 deletions app/assets/images/icons/check-circle.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/assets/images/icons/circle.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions app/views/seats/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,50 @@
</div>

<div class="syos-frame__sidebar">
<form>
<fieldset class="syos-u-margin-bottom-6">
<legend class="syos-u-margin-bottom-2 syos-inline-stack">
<h2 class="syos-inline-stack__item">
Filter by max price
</h2>

<input class="syos-button syos-button--transparent" type="reset" value="Clear Filters">
</legend>

<div class="syos-tile-controls">
<% [5_00, 10_00, 15_00, nil].each_cons(2) do |maximum, next_maximum| %>
<input
id="filter-<%= maximum %>"
class="syos-tile-controls__input"
type="radio"
name="maximum"
value="<%= maximum %>"
<% if next_maximum.nil? %>
checked
<% end %>
>
<label class="syos-tile-controls__control" for="filter-<%= maximum %>">
<%= inline_svg_tag(
"icons/circle.svg",
aria_hidden: true,
class: "syos-icon syos-tile-controls__icon syos-tile-controls__icon--unselected",
) %>
<%= inline_svg_tag(
"icons/check-circle.svg",
aria_hidden: true,
class: "syos-icon syos-tile-controls__icon syos-tile-controls__icon--selected",
) %>
<%= number_to_currency(maximum / 100.0) %>
</label>
<% end %>
</div>

<input type="submit" class="syos-button syos-u-margin-top-2" value="Apply Filters">
</fieldset>
</form>

<div id="cart-summary">
<h2 class="syos-u-margin-bottom-2">
Your seat selections
Expand Down

0 comments on commit 752ef6d

Please sign in to comment.