Filter Seats based on their Price
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
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 .
Desktop
Collapse app/assets/images/icons/check-circle.svg
Expand app/assets/images/icons/check-circle.svg
app/assets/images/icons/check-circle.svg
diff --git a/app/assets/images/icons/check-circle.svg b/app/assets/images/icons/check-circle.svg
new file mode 100644
index 0000000..b29ec55
--- /dev/null
+++ b/app/assets/images/icons/check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
Collapse app/assets/images/icons/circle.svg
Expand app/assets/images/icons/circle.svg
app/assets/images/icons/circle.svg
diff --git a/app/assets/images/icons/circle.svg b/app/assets/images/icons/circle.svg
new file mode 100644
index 0000000..e5c5512
--- /dev/null
+++ b/app/assets/images/icons/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
Collapse app/views/seats/index.html.erb
Expand app/views/seats/index.html.erb
app/views/seats/index.html.erb
diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index efbc1b4..d290f97 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -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