e3377ab93d
Previously, we used media queries to set the number of columns. However, media columns are based on entire viewport width. When we start to use more of the viewport area, for example with a second sidebar for submenus, the grid columns will not be correct anymore. We can change the numbers we set in the grid columns to accomodate new remaining space, but that would break the places where there is no second sidebar. The solution is to use grid-template-columns instead of media queries, because they are based on the width of the container.
42 lines
1.7 KiB
Plaintext
42 lines
1.7 KiB
Plaintext
<%# locals: (name:, label:, options:, attributes:) %>
|
|
<% selected = flash.dig("old", name) || selected
|
|
error = flash.dig("errors", name)
|
|
is_content_array = options[0][1].is_a?(Array) %>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium leading-6 text-gray-900"><%= label %></label>
|
|
<fieldset class="radio-small-cards">
|
|
<legend class="sr-only"><%= label %></legend>
|
|
<div class="grid gap-3 grid-cols-[repeat(auto-fill,minmax(285px,1fr))]">
|
|
<% options.each_with_index do |(opt_val, opt_text, opt_classes, opt_attrs), idx| %>
|
|
<label class="<%= opt_classes %>">
|
|
<input
|
|
type="radio"
|
|
name="<%= name %>"
|
|
value="<%= opt_val %>"
|
|
class="peer sr-only"
|
|
<%== html_attrs(**attributes, **opt_attrs) %>
|
|
>
|
|
<% if is_content_array %>
|
|
<span class="radio-small-card justify-between p-4">
|
|
<span class="flex flex-col">
|
|
<span class="text-md font-semibold"><%= opt_text[0] %></span>
|
|
<span class="text-sm opacity-80"><span class="block sm:inline"><%= opt_text[1] %></span></span>
|
|
</span>
|
|
<span class="mt-2 flex text-sm sm:ml-4 sm:mt-0 sm:flex-col sm:text-right">
|
|
<span class="font-medium"><%= opt_text[2] %></span>
|
|
<span class="ml-1 opacity-50 sm:ml-0"><%= opt_text[3] %></span>
|
|
</span>
|
|
</span>
|
|
<% else %>
|
|
<span class="radio-small-card justify-center p-3 text-sm font-semibold"><%= opt_text %></span>
|
|
<% end %>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
</fieldset>
|
|
<% if error %>
|
|
<p class="text-sm text-red-600 leading-6" id="<%= name %>-error"><%= error %></p>
|
|
<% end %>
|
|
</div>
|