mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
tweak doc table
This commit is contained in:
drusepth
parent
96c559f229
commit
3cc84fcbc8
@ -557,121 +557,3 @@
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
<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">Title</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Synopsis</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Length</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">History</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
<th scope="col" class="relative px-6 py-3">More</th>
|
||||
</tr>
|
||||
@ -29,11 +29,16 @@
|
||||
</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 class="px-6 py-4">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm text-gray-900">
|
||||
<%= number_with_delimiter document.cached_word_count %> words
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
~8 minute read
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -10,485 +10,4 @@
|
||||
page_tags: @page_tags
|
||||
} %>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="h-full flex">
|
||||
<!-- Static for desktop -->
|
||||
<div class="flex flex-col min-w-0 flex-1 overflow-hidden">
|
||||
<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 overflow-hidden">
|
||||
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none xl:order-last">
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="flex items-start px-4 py-3 sm:px-6 lg:px-8 xl:hidden" aria-label="Breadcrumb">
|
||||
<a href="#" class="inline-flex items-center space-x-3 text-sm font-medium text-gray-900">
|
||||
<!-- Heroicon name: solid/chevron-left -->
|
||||
<svg class="-ml-2 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="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span>Back</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- content area -->
|
||||
<article>
|
||||
<!-- Profile header -->
|
||||
<div>
|
||||
<div>
|
||||
<img class="h-32 w-full object-cover lg:h-48" src="https://images.unsplash.com/photo-1444628838545-ac4016a5418a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="">
|
||||
</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">
|
||||
<img class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
|
||||
</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 2xl:block mt-6 min-w-0 flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 truncate">Ricardo Cooper</h1>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
|
||||
<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">
|
||||
<!-- Heroicon name: solid/mail -->
|
||||
<svg class="-ml-1 mr-2 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 d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||
</svg>
|
||||
<span>Message</span>
|
||||
</button>
|
||||
<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">
|
||||
<!-- Heroicon name: solid/phone -->
|
||||
<svg class="-ml-1 mr-2 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 d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
||||
</svg>
|
||||
<span>Call</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:block 2xl:hidden mt-6 min-w-0 flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 truncate">Ricardo Cooper</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="mt-6 sm:mt-2 2xl:mt-5">
|
||||
<div class="border-b border-gray-200">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
|
||||
<!-- Current: "border-pink-500 text-gray-900", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
|
||||
<a href="#" class="border-pink-500 text-gray-900 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" aria-current="page"> Profile </a>
|
||||
|
||||
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> Calendar </a>
|
||||
|
||||
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"> Recognition </a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description list -->
|
||||
<div class="mt-6 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Phone</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">(555) 123-4567</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Email</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">ricardocooper@example.com</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Title</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">Senior Front-End Developer</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Team</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">Product Development</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Location</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">San Francisco</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Sits</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">Oasis, 4th floor</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Salary</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">$145,000</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">Birthday</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900">June 8, 1990</dd>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<dt class="text-sm font-medium text-gray-500">About</dt>
|
||||
<dd class="mt-1 max-w-prose text-sm text-gray-900 space-y-5">
|
||||
<p>Tincidunt quam neque in cursus viverra orci, dapibus nec tristique. Nullam ut sit dolor consectetur urna, dui cras nec sed. Cursus risus congue arcu aenean posuere aliquam.</p>
|
||||
<p>Et vivamus lorem pulvinar nascetur non. Pulvinar a sed platea rhoncus ac mauris amet. Urna, sem pretium sit pretium urna, senectus vitae. Scelerisque fermentum, cursus felis dui suspendisse velit pharetra. Augue et duis cursus maecenas eget quam lectus. Accumsan vitae nascetur pharetra rhoncus praesent dictum risus suspendisse.</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- Team member list -->
|
||||
<div class="mt-8 max-w-5xl mx-auto px-4 pb-12 sm:px-6 lg:px-8">
|
||||
<h2 class="text-sm font-medium text-gray-500">Team members</h2>
|
||||
<div class="mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-pink-500">
|
||||
<div class="flex-shrink-0">
|
||||
<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=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<a href="#" class="focus:outline-none">
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<p class="text-sm font-medium text-gray-900">Leslie Alexander</p>
|
||||
<p class="text-sm text-gray-500 truncate">Co-Founder / CEO</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-pink-500">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<a href="#" class="focus:outline-none">
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<p class="text-sm font-medium text-gray-900">Michael Foster</p>
|
||||
<p class="text-sm text-gray-500 truncate">Co-Founder / CTO</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-pink-500">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<a href="#" class="focus:outline-none">
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<p class="text-sm font-medium text-gray-900">Dries Vincent</p>
|
||||
<p class="text-sm text-gray-500 truncate">Manager, Business Relations</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-pink-500">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<a href="#" class="focus:outline-none">
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<p class="text-sm font-medium text-gray-900">Lindsay Walton</p>
|
||||
<p class="text-sm text-gray-500 truncate">Front-end Developer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<h2 class="text-lg font-medium text-gray-900">
|
||||
Your documents || Folder name
|
||||
</h2>
|
||||
|
||||
<!--
|
||||
<p class="mt-4 text-xs tracking-wider font-bold text-gray-500">
|
||||
Includes <%= pluralize @documents.count + @folders.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 @folders.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 @documents.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 Document
|
||||
</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-50 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
|
||||
<% 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>
|
||||
</h3>
|
||||
</div>
|
||||
<ul role="list" class="relative z-0 divide-y divide-gray-200">
|
||||
<% @folders.each do |folder| %>
|
||||
<li>
|
||||
<%= link_to folder do %>
|
||||
<div class="relative px-6 py-2 flex items-center space-x-3 hover:bg-gray-50 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"><%= folder.title %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-50 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">
|
||||
<div class="inline-block mr-4">
|
||||
<i class="material-icons float-left mr-0.5 <%= Document.text_color %>"><%= Document.icon %></i>
|
||||
<span class="text-sm">
|
||||
<span class="font-bold text-gray-700"><%= @documents.count %></span>
|
||||
<%= 'document'.pluralize @documents.count %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="inline-block mr-4">
|
||||
<i class="material-icons float-left mr-0.5 <%= Folder.text_color %>"><%= Folder.icon %></i>
|
||||
<span class="text-sm">
|
||||
<span class="font-bold text-gray-700"><%= @folders.count %></span>
|
||||
<%= 'folder'.pluralize @folders.count %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="inline-block mr-4">
|
||||
<i class="material-icons float-left mr-0.5 <%= DocumentAnalysis.text_color %>">spellcheck</i>
|
||||
<% total_word_count = @documents.sum { |doc| doc.cached_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 = @documents.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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<% if @universe_scope %>
|
||||
<p class="center help-text teal card-panel lighten-5 black-text">
|
||||
Only showing documents
|
||||
in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.text_color %> universe.
|
||||
<%= link_to(
|
||||
"See documents from all universes instead.",
|
||||
'?universe=all',
|
||||
class: Universe.text_color)
|
||||
%>
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
<% if @documents.any? %>
|
||||
<%= content_for :full_width_page_content do %>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<h5>Recently-edited documents</h5>
|
||||
<%= render partial: 'content/list/dense_cards', locals: { content_list: @recent_documents, content_type: Document, show_new_button: false } %>
|
||||
</div>
|
||||
|
||||
<%= render partial: 'folders/list', locals: { folders: @folders } %>
|
||||
|
||||
<div class="row">
|
||||
<h5>All Documents <span class="grey-text"><%= @documents.count %></span></h5>
|
||||
<%= render partial: 'content/components/list_filter_bar', locals: { content_type: Document } %>
|
||||
<%=
|
||||
render partial: 'content/list/document_table', locals: {
|
||||
content_list: @documents,
|
||||
content_type: Document,
|
||||
folders: @folders.pluck(:title, :id),
|
||||
tags: @page_tags.to_a
|
||||
}
|
||||
%>
|
||||
<%# render partial: 'notice_dismissal/messages/02' %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<!-- recent analysis -->
|
||||
|
||||
<% if @documents.empty? %>
|
||||
<div class="row">
|
||||
<div class="col s12 m8 offset-m2">
|
||||
<div class="hoverable card center" style="margin: 50px 0; padding: 50px 0; border-bottom: 10px solid <%= Document.hex_color %>">
|
||||
<h4>You haven't created any documents <% if @universe_scope %>in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + "-text" %> universe<% end %> yet!</h4>
|
||||
<h1>
|
||||
<i class="material-icons <%= Document.text_color %>" style="font-size: 200%">
|
||||
<%= Document.icon %>
|
||||
</i>
|
||||
</h1>
|
||||
<p>
|
||||
You can create an unlimited number of documents with no limits on length. Enjoy!
|
||||
</p>
|
||||
<br />
|
||||
<%= link_to "Create your first document", new_document_path, target: '_blank', class: "btn #{Document.color}" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= render partial: 'folders/new_modal', locals: { content_type: Document, parent_folder: @folder } %>
|
||||
Loading…
Reference in New Issue
Block a user