mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
reuse new foldered index view across content pages and documents
This commit is contained in:
drusepth
parent
90359c8cc0
commit
ec55782873
@ -55,6 +55,7 @@ class ContentController < ApplicationController
|
||||
end
|
||||
|
||||
@content = @content.sort_by {|x| [x.favorite? ? 0 : 1, x.name] }
|
||||
@folders = []
|
||||
|
||||
@questioned_content = @content.sample
|
||||
@attribute_field_to_question = SerendipitousService.question_for(@questioned_content)
|
||||
|
||||
@ -57,6 +57,7 @@ class DocumentsController < ApplicationController
|
||||
page_id: @documents.map(&:id)
|
||||
).order(:tag)
|
||||
|
||||
@filtered_page_tags = []
|
||||
if params.key?(:tag)
|
||||
@filtered_page_tags = @page_tags.where(slug: params[:tag])
|
||||
@documents = @documents.to_a.select { |document| @filtered_page_tags.pluck(:page_id).include?(document.id) }
|
||||
|
||||
@ -4,6 +4,9 @@ module ApplicationHelper
|
||||
# If we pass in a class (e.g. Character instead of "Character") by mistake, just return it
|
||||
return class_name if class_name.is_a?(Class)
|
||||
|
||||
# Extra whitelisting for some other classes we don't necessarily want in the content_types array
|
||||
return Folder if class_name == Folder.name
|
||||
|
||||
Rails.application.config.content_types_by_name[class_name]
|
||||
end
|
||||
|
||||
|
||||
693
app/views/content/display/_tailwind_foldered_index.html.erb
Normal file
693
app/views/content/display/_tailwind_foldered_index.html.erb
Normal file
@ -0,0 +1,693 @@
|
||||
<%
|
||||
if mixed_content_types
|
||||
content_counts_per_type = { content_type_name: content.count }
|
||||
else
|
||||
content_counts_per_type = Hash.new(0)
|
||||
content.each { |page| content_counts_per_type[page.is_a?(ContentPage) ? page['page_type'] : page.class.name] += 1 }
|
||||
end
|
||||
|
||||
if @folders.any?
|
||||
content_counts_per_type[Folder.name] = @folders.count
|
||||
end
|
||||
%>
|
||||
|
||||
|
||||
<div class="h-full flex">
|
||||
<!-- Static for desktop -->
|
||||
<div class="flex flex-col min-w-0 flex-1 overflow-hidden">
|
||||
<!-- mobile second header -->
|
||||
<div class="lg:hidden">
|
||||
<div class="flex items-center justify-between bg-gray-50 border-b border-gray-200 px-4 py-1.5">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-pink-500.svg" alt="Workflow">
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="-mr-3 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-600">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<!-- Heroicon name: outline/menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 relative z-0 flex bg-gray-50 overflow-hidden">
|
||||
<main class="flex-1 relative z-0 bg-gray-200 overflow-y-auto focus:outline-none xl:order-last">
|
||||
|
||||
|
||||
|
||||
<!-- content area -->
|
||||
<div class="bg-white pb-2">
|
||||
<div>
|
||||
<%= image_tag asset_path(header_image), class: 'h-32 w-full object-cover lg:h-48' %>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
|
||||
<div class="flex">
|
||||
<% if @universe_scope %>
|
||||
<%= link_to @universe_scope do %>
|
||||
<%= image_tag @universe_scope.random_image_including_private(format: :hero), class: 'h-24 w-24 rounded-full ring-4 ring-purple-800 sm:h-32 sm:w-32' %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= image_tag current_user.image_url, class: 'h-24 w-24 rounded-full ring-4 ring-green-800 sm:h-32 sm:w-32' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
|
||||
<div class="sm:hidden md:block mt-6 min-w-0 flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 truncate">
|
||||
Showing <%= pluralize content.count, content_type_name.downcase %>
|
||||
</h1>
|
||||
<% if @universe_scope %>
|
||||
<div class="text-gray-400 text-sm">
|
||||
in <%= link_to @universe_scope.name, @universe_scope, class: Universe.text_color %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
|
||||
<%= link_to attribute_customization_path(content_type_name.downcase) do %>
|
||||
<button type="button" class="inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<span>Customize template</span>
|
||||
</button>
|
||||
<% end %>
|
||||
|
||||
<% if current_user.can_create?(content_type_class) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: content_type_class.name) %>
|
||||
<%= link_to new_polymorphic_path(content_type_class) do %>
|
||||
<button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white <%= content_type_class.color %> focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<i class="material-icons text-sm mr-2">add</i>
|
||||
<span>New <%= content_type_name %></span>
|
||||
</button>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to subscription_path do %>
|
||||
<button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-gray-400 hover:bg-notebook-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<span>Upgrade</span>
|
||||
</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:block md:hidden mt-6 min-w-0 flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 truncate">Ricardo Cooper</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- new filter bar -->
|
||||
<div class="bg-white mb-4">
|
||||
<!--
|
||||
Mobile filter dialog
|
||||
|
||||
Off-canvas filters for mobile, show/hide based on off-canvas filters state.
|
||||
-->
|
||||
<div class="fixed inset-0 flex z-40 sm:hidden" role="dialog" aria-modal="true">
|
||||
<!--
|
||||
Off-canvas menu overlay, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>
|
||||
|
||||
<!--
|
||||
Off-canvas menu, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-full"
|
||||
To: "translate-x-0"
|
||||
Leaving: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-0"
|
||||
To: "translate-x-full"
|
||||
-->
|
||||
<div class="ml-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto">
|
||||
<div class="px-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-medium text-gray-900">Filters</h2>
|
||||
<button type="button" class="-mr-2 w-10 h-10 bg-white p-2 rounded-md flex items-center justify-center text-gray-400">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<form class="mt-4">
|
||||
<div class="border-t border-gray-200 px-4 py-6">
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<!-- Expand/collapse section button -->
|
||||
<button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-0" aria-expanded="false">
|
||||
<span class="font-medium text-gray-900"> Tag </span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<!--
|
||||
Expand/collapse icon, toggle classes based on section open state.
|
||||
|
||||
Heroicon name: solid/chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-5 w-5 transform" 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>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
<!-- Filter section, show/hide based on section state. -->
|
||||
<div class="pt-6" id="filter-section-0">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-category-0" class="ml-3 text-sm text-gray-500"> All New Arrivals </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-category-1" class="ml-3 text-sm text-gray-500"> Tees </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-category-2" class="ml-3 text-sm text-gray-500"> Objects </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 px-4 py-6">
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<!-- Expand/collapse section button -->
|
||||
<button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-1" aria-expanded="false">
|
||||
<span class="font-medium text-gray-900"> Color </span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<!--
|
||||
Expand/collapse icon, toggle classes based on section open state.
|
||||
|
||||
Heroicon name: solid/chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-5 w-5 transform" 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>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
<!-- Filter section, show/hide based on section state. -->
|
||||
<div class="pt-6" id="filter-section-1">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-color-0" class="ml-3 text-sm text-gray-500"> White </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-color-1" class="ml-3 text-sm text-gray-500"> Beige </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-color-2" class="ml-3 text-sm text-gray-500"> Blue </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 px-4 py-6">
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<!-- Expand/collapse section button -->
|
||||
<button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-2" aria-expanded="false">
|
||||
<span class="font-medium text-gray-900"> Sizes </span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<!--
|
||||
Expand/collapse icon, toggle classes based on section open state.
|
||||
|
||||
Heroicon name: solid/chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-5 w-5 transform" 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>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
<!-- Filter section, show/hide based on section state. -->
|
||||
<div class="pt-6" id="filter-section-2">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-sizes-0" class="ml-3 text-sm text-gray-500"> S </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-sizes-1" class="ml-3 text-sm text-gray-500"> M </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-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-mobile-sizes-2" class="ml-3 text-sm text-gray-500"> L </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<section aria-labelledby="filter-heading">
|
||||
<h2 id="filter-heading" class="sr-only">Filters</h2>
|
||||
|
||||
<div class="relative z-10 bg-white border-b border-gray-200 pb-4">
|
||||
<div class="max-w-7xl mx-auto px-4 flex items-center justify-between sm:px-6 lg:px-8">
|
||||
<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 <%= chevron_down %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<!--
|
||||
Active: "bg-gray-100", Not Active: ""
|
||||
|
||||
Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
|
||||
-->
|
||||
<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>
|
||||
|
||||
<!-- Mobile filter dialog toggle, controls the 'mobileFiltersOpen' state. -->
|
||||
<button type="button" class="inline-block text-sm font-medium text-gray-700 hover:text-gray-900 sm:hidden">Filters</button>
|
||||
|
||||
<div class="hidden sm:block">
|
||||
<div class="flow-root">
|
||||
<div class="-mx-4 flex items-center divide-x divide-gray-200">
|
||||
<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 active:bg-white" 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>
|
||||
|
||||
<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">
|
||||
<% page_tags.each do |page_tag| %>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-tag-<%= page_tag.id %>" name="slug[]" <%= 'checked' if filtered_page_tags.map(&:slug).include?(page_tag.slug) %> 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 %>
|
||||
|
||||
<% 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">
|
||||
Filter
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active filters -->
|
||||
<% if filtered_page_tags.any? %>
|
||||
<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 <%= 'tag'.pluralize(filtered_page_tags.count) %>
|
||||
<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 class="mt-2 sm:mt-0 sm:ml-4">
|
||||
<div class="-m-1 flex flex-wrap items-center">
|
||||
<% filtered_page_tags.each do |page_tag| %>
|
||||
<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><%= page_tag.tag %></span>
|
||||
<%= link_to(polymorphic_path(content_type_class, { slug: params.fetch(:slug, []) - [page_tag.slug] })) do %>
|
||||
<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 <%= page_tag.tag %></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>
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<%# render partial: 'content/components/list_filter_bar', locals: { content_type: content_type_class } %>
|
||||
|
||||
<%# to be made into new card list partial? %>
|
||||
<% if content.any? %>
|
||||
<div class="flex flex-wrap mb-32 px-2 container mx-auto">
|
||||
<% content.each do |content| %>
|
||||
<div class="xl:w-1/4 md:w-1/2 p-2 group">
|
||||
<%= link_to content.is_a?(ContentPage) ? content.view_path : content do %>
|
||||
<div class="bg-white hover:shadow-lg rounded-lg transition">
|
||||
<%= image_tag content.random_image_including_private(format: :small), class: 'h-64 rounded-t w-full object-cover object-center mb-6' %>
|
||||
<div class="pl-4 pb-1">
|
||||
<i class="material-icons float-right text-2xl mr-3">star_outline</i>
|
||||
<h3 class="tracking-widest <%= content.text_color %> text-xs uppercase font-medium title-font">
|
||||
<%= content.page_type %>
|
||||
</h3>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-4">
|
||||
<%= content.name %>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if content.empty? %>
|
||||
<div class="container mx-auto flex">
|
||||
<div class="w-1/2 text-center p-6">
|
||||
<button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<i class="material-icons text-6xl <%= content_type_class.text_color %>">list</i>
|
||||
<div class="mt-2 block text-sm font-medium text-gray-900 mb-1">
|
||||
Customize your <%= content_type_name.downcase %> page template
|
||||
</div>
|
||||
<span class="rounded bg-notebook-blue text-white px-2 py-1 text-xs">
|
||||
recommended before creating your first <%= content_type_name.downcase %>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-1/2 text-center p-6">
|
||||
<button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<i class="material-icons text-6xl <%= content_type_class.text_color %>"><%= content_type_class.icon %></i>
|
||||
<span class="mt-2 block text-sm font-medium text-gray-900">Create your first <%= content_type_name.downcase %></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<!-- second sidebar -->
|
||||
<aside class="hidden xl:order-first xl:flex xl:flex-col flex-shrink-0 w-88 border-r border-gray-200">
|
||||
<div class="px-6 pt-4 pb-4 bg-white">
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
<i class="material-icons float-left <%= content_type_class.text_color %> text-xl mr-2"><%= content_type_class.icon %></i>
|
||||
Your <%= content_type_name.pluralize %>
|
||||
</h2>
|
||||
|
||||
<!--
|
||||
<p class="mt-4 text-xs tracking-wider font-bold text-gray-500">
|
||||
Includes <%= pluralize content.count, 'item' %>
|
||||
</p>
|
||||
<ul class="mt-1 text-gray-600">
|
||||
<li class="">
|
||||
<i class="material-icons float-left mr-2 <%= Folder.text_color %>"><%= Folder.icon %></i>
|
||||
<span class="text-sm"><%= pluralize content.count, 'folder' %></span>
|
||||
</li>
|
||||
<li class="">
|
||||
<i class="material-icons float-left mr-2 <%= Document.text_color %>"><%= Document.icon %></i>
|
||||
<span class="text-sm"><%= pluralize content.count, 'document' %></span>
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
|
||||
<!-- todo put filter/search bar here -->
|
||||
<!--
|
||||
<form class="mt-6 flex space-x-4" action="#">
|
||||
<div class="flex-1 min-w-0">
|
||||
<label for="search" class="sr-only">Search</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="search" name="search" id="search" class="focus:ring-pink-500 focus:border-pink-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<form class="mt-6 flex space-x-2" action="#">
|
||||
<button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<i class="material-icons float-left mr-2 text-sm <%= Folder.text_color %>"><%= Folder.icon %></i>
|
||||
New Folder
|
||||
</button>
|
||||
<button type="submit" class="inline-flex justify-center px-3.5 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<i class="material-icons float-left mr-2 text-sm <%= Document.text_color %>"><%= Document.icon %></i>
|
||||
New <%= content_type_name %>
|
||||
</button>
|
||||
</form>
|
||||
-->
|
||||
</div>
|
||||
<!-- Directory list -->
|
||||
<nav class="flex-1 min-h-0 overflow-y-auto" aria-label="Directory">
|
||||
<div class="relative">
|
||||
<div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-100 px-6 py-1 text-sm font-medium text-gray-500">
|
||||
<h3>
|
||||
<i class="material-icons float-left text-sm mr-1 <%= Folder.text_color %>"><%= Folder.icon %></i>
|
||||
Folders
|
||||
<span class="float-right bg-gray-100 rounded px-1 text-xs mt-0.5">
|
||||
<%= folders.count %>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<ul role="list" class="relative z-0 divide-y divide-gray-200">
|
||||
<% folders.each do |folder| %>
|
||||
<li>
|
||||
<div class="relative px-6 py-2 flex items-center space-x-3 hover:bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-500">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons pt-4 text-4xl <%= Folder.text_color %>"><%= Folder.icon %></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<%= link_to folder, class: 'focus:outline-none' do %>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<p class="text-sm font-medium text-gray-900 w-48"><%= folder.title %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<div class="relative px-6 flex items-center space-x-3 hover:bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-500">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons pt-4 text-4xl <%= Folder.text_color %>">add</i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<%= link_to '', class: 'focus:outline-none' do %>
|
||||
<!-- Extend touch target to entire panel -->
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<p class="text-sm font-medium text-gray-900">Add a folder</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-100 px-6 py-1 text-sm font-medium text-gray-500">
|
||||
<h3>
|
||||
<i class="material-icons float-left text-sm mr-1 <%= DocumentAnalysis.text_color %>"><%= DocumentAnalysis.icon %></i>
|
||||
Stats
|
||||
</h3>
|
||||
</div>
|
||||
<div class="px-6 leading-relaxed pt-4">
|
||||
<% content_counts_per_type.each do |content_type, count| %>
|
||||
<div class="inline-block mr-4">
|
||||
<i class="material-icons float-left mr-0.5 <%= content_class_from_name(content_type).text_color %>"><%= content_class_from_name(content_type).icon %></i>
|
||||
<span class="text-sm">
|
||||
<span class="font-bold text-gray-700"><%= count %></span>
|
||||
<%= content_type.pluralize count %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="inline-block mr-4">
|
||||
<i class="material-icons float-left mr-0.5 <%= DocumentAnalysis.text_color %>">spellcheck</i>
|
||||
<% total_word_count = 0 %>
|
||||
<span class="text-sm">
|
||||
<strong class="font-bold text-gray-700"><%= number_with_delimiter total_word_count %></strong>
|
||||
<%= 'total word'.pluralize(total_word_count) %>
|
||||
</span>
|
||||
</div>
|
||||
in
|
||||
<div class="inline-block mr-4">
|
||||
<i class="material-icons float-left mr-0.5 <%= Universe.text_color %>"><%= Universe.icon %></i>
|
||||
<% total_universe_count = content.select { |doc| doc.universe_id? }.count %>
|
||||
<span class="text-sm">
|
||||
<strong class="font-bold text-gray-700"><%= number_with_delimiter total_universe_count %></strong>
|
||||
<%= 'universe'.pluralize(total_universe_count) %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="mx-8 my-8">
|
||||
<h2 class="text-gray-500 text-sm font-medium uppercase tracking-wide">
|
||||
Folders
|
||||
<span class="text-gray-400 ml-2"><%= folders.count %></span>
|
||||
|
||||
<%= link_to '#', class: "float-right text-xs #{Folder.color} hover:bg-teal-500 text-white rounded-lg px-2 py-1" do %>
|
||||
Create folder
|
||||
<% end %>
|
||||
</h2>
|
||||
<ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<% folders.each do |folder| %>
|
||||
<%= link_to folder, class: 'group' do %>
|
||||
<li class="col-span-1 flex shadow-sm rounded-md">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-16 <%= Folder.color %> group-hover:bg-teal-500 text-white text-sm font-medium rounded-l-md">
|
||||
<i class="material-icons"><%= Folder.icon %></i>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
|
||||
<div class="flex-1 px-4 py-2 text-sm truncate">
|
||||
<p class="text-gray-900 font-medium group-hover:text-gray-600"><%= folder.title %></p>
|
||||
<p class="text-gray-500">16 documents</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 pr-2">
|
||||
<button type="button" class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<span class="sr-only">Open options</span>
|
||||
<!-- Heroicon name: solid/dots-vertical -->
|
||||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mx-8 my-8">
|
||||
<h2 class="text-gray-500 text-sm font-medium uppercase tracking-wide">
|
||||
Documents
|
||||
<span class="text-gray-400 ml-2"><%= folders.count %></span>
|
||||
|
||||
<%= link_to '#', class: "float-right text-xs #{Document.color} hover:bg-teal-600 text-white rounded-lg px-2 py-1" do %>
|
||||
Create document
|
||||
<% end %>
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col mt-3">
|
||||
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 h-10 w-10">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">Jane Cooper</div>
|
||||
<div class="text-sm text-gray-500">jane.cooper@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
|
||||
<div class="text-sm text-gray-500">Optimization</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> Active </span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Admin</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- More people... -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,26 @@
|
||||
<%= render partial: 'content/display/tailwind_foldered_index', locals: {
|
||||
header_image: "card-headers/documents.webp",
|
||||
content: @documents,
|
||||
mixed_content_types: false,
|
||||
folders: @folders,
|
||||
content_type_class: Document,
|
||||
content_type_name: Document.name,
|
||||
filtered_page_tags: @filtered_page_tags,
|
||||
page_tags: @page_tags
|
||||
} %>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="h-full flex">
|
||||
<!-- Static for desktop -->
|
||||
<div class="flex flex-col min-w-0 flex-1 overflow-hidden">
|
||||
@ -30,6 +53,11 @@
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- content area -->
|
||||
<article>
|
||||
<!-- Profile header -->
|
||||
<div>
|
||||
@ -197,6 +225,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
<aside class="hidden xl:order-first xl:flex xl:flex-col flex-shrink-0 w-96 border-r border-gray-200">
|
||||
<div class="px-6 pt-6 pb-4">
|
||||
@ -261,6 +295,7 @@
|
||||
<h3>
|
||||
<i class="material-icons float-left text-sm mr-1 <%= Folder.text_color %>"><%= Folder.icon %></i>
|
||||
Folders
|
||||
<% if true && 'folder#show partial' %>in this folder<% end %>
|
||||
<span class="float-right bg-gray-100 rounded px-1 text-xs mt-0.5">
|
||||
<%= @folders.count %>
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user