mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
wrap up filter bar styling for now
This commit is contained in:
drusepth
parent
10e7998c10
commit
0ac4bcf75f
9
app/helpers/heroicons_helper.rb
Normal file
9
app/helpers/heroicons_helper.rb
Normal file
@ -0,0 +1,9 @@
|
||||
module HeroiconsHelper
|
||||
def chevron_down
|
||||
'''
|
||||
<svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
'''.html_safe
|
||||
end
|
||||
end
|
||||
@ -1,3 +1,4 @@
|
||||
<!-- header -->
|
||||
<div class="bg-white pb-2">
|
||||
<div>
|
||||
<%= image_tag asset_path("card-headers/#{@content_type_name.downcase.pluralize}.webp"), class: 'h-32 w-full object-cover lg:h-48' %>
|
||||
@ -52,7 +53,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white">
|
||||
<!-- new filter bar -->
|
||||
<div class="bg-white mb-4">
|
||||
<!--
|
||||
Mobile filter dialog
|
||||
|
||||
@ -227,24 +229,10 @@
|
||||
<div data-controller="dropdown" class="relative inline-block text-left">
|
||||
<div>
|
||||
<button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
Sort
|
||||
<!-- Heroicon name: solid/chevron-down -->
|
||||
<svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Sort <%= chevron_down %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
|
||||
<div class="py-1" role="none">
|
||||
<!--
|
||||
@ -252,11 +240,10 @@
|
||||
|
||||
Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
|
||||
-->
|
||||
<a href="#" class="font-medium text-gray-900 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0"> Most Popular </a>
|
||||
|
||||
<a href="#" class="text-gray-500 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1"> Best Rating </a>
|
||||
|
||||
<a href="#" class="text-gray-500 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2"> Newest </a>
|
||||
<a href="#" data-action="dropdown#toggle" class="font-medium text-gray-900 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">Favorites First</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">Alphabetical</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Recently-edited</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Order created</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -267,124 +254,37 @@
|
||||
<div class="hidden sm:block">
|
||||
<div class="flow-root">
|
||||
<div class="-mx-4 flex items-center divide-x divide-gray-200">
|
||||
<div class="px-4 relative inline-block text-left">
|
||||
<button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
|
||||
<span>Tag</span>
|
||||
|
||||
<span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs font-semibold text-gray-700 tabular-nums">1</span>
|
||||
<!-- Heroicon name: solid/chevron-down -->
|
||||
<svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div data-controller="dropdown" class="px-4 relative inline-block text-left">
|
||||
<button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
|
||||
<span>Tagged</span>
|
||||
<span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-100 text-xs font-semibold text-gray-700 tabular-nums">
|
||||
<%= @filtered_page_tags.try(:count) || 0 %>
|
||||
</span>
|
||||
<%= chevron_down %>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
'Category' dropdown, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div data-dropdown-target="menu" class="w-64 origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<form class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-category-0" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-category-0" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> All New Arrivals </label>
|
||||
</div>
|
||||
<% @page_tags.each do |page_tag| %>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-tag-<%= page_tag.id %>" name="tag[]" value="<%= page_tag.slug %>" type="checkbox" class="h-4 w-4 border-gray-300 rounded <%= @content_type_class.text_color %> focus:ring-notebook-blue">
|
||||
<label for="filter-tag-<%= page_tag.id %>" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"><%= page_tag.tag %></label>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-category-1" name="category[]" value="tees" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-category-1" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Tees </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-category-2" name="category[]" value="objects" type="checkbox" checked class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-category-2" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Objects </label>
|
||||
</div>
|
||||
<% if @page_tags.any? %>
|
||||
<div class="flex text-right">
|
||||
<button data-action="dropdown#toggle" class="bg-notebook-blue hover:bg-blue-500 text-white rounded w-full px-2 py-1">Submit</button>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="bg-blue-50 p-4">
|
||||
Add tags to your <%= @content_type_name %> pages to be able to filter them here.
|
||||
</div>
|
||||
<% end %>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 relative inline-block text-left">
|
||||
<button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
|
||||
<span>Color</span>
|
||||
<!-- Heroicon name: solid/chevron-down -->
|
||||
<svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
'Color' dropdown, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<form class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-color-0" name="color[]" value="white" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-color-0" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> White </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-color-1" name="color[]" value="beige" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-color-1" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Beige </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-color-2" name="color[]" value="blue" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-color-2" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Blue </label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 relative inline-block text-left">
|
||||
<button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
|
||||
<span>Sizes</span>
|
||||
<!-- Heroicon name: solid/chevron-down -->
|
||||
<svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!--
|
||||
'Sizes' dropdown, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<form class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-sizes-0" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-sizes-0" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> S </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-sizes-1" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-sizes-1" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> M </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-sizes-2" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-sizes-2" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> L </label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -392,37 +292,36 @@
|
||||
</div>
|
||||
|
||||
<!-- Active filters -->
|
||||
<div class="bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
|
||||
Filters
|
||||
<span class="sr-only">, active</span>
|
||||
</h3>
|
||||
<% if @filtered_page_tags %>
|
||||
<div class="bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
|
||||
Showing only <%= @content_type_name.pluralize %> with tags
|
||||
<span class="sr-only">, active</span>
|
||||
</h3>
|
||||
|
||||
<div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
|
||||
<div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
|
||||
|
||||
<div class="mt-2 sm:mt-0 sm:ml-4">
|
||||
<div class="-m-1 flex flex-wrap items-center">
|
||||
<span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
|
||||
<span>Objects</span>
|
||||
<button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
|
||||
<span class="sr-only">Remove filter for Objects</span>
|
||||
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="mt-2 sm:mt-0 sm:ml-4">
|
||||
<div class="-m-1 flex flex-wrap items-center">
|
||||
<span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
|
||||
<span>Objects</span>
|
||||
<button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
|
||||
<span class="sr-only">Remove filter for Objects</span>
|
||||
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50">
|
||||
list filter bar
|
||||
<%= render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
|
||||
</div>
|
||||
<%# render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
|
||||
|
||||
<%# to be made into new card list partial? %>
|
||||
<div class="flex flex-wrap mb-32 container mx-auto">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user