mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
basic table of contents rework
This commit is contained in:
drusepth
parent
560531c48f
commit
e145d6ddf3
@ -42,7 +42,8 @@ class MainController < ApplicationController
|
||||
@starred_pages = content_list.select { |page| page['favorite'] == 1 }
|
||||
@other_pages = content_list.select { |page| page['favorite'] == 0 }
|
||||
|
||||
|
||||
@page_type_counts = Hash.new(0)
|
||||
content_list.each { |page| @page_type_counts[page['page_type']] += 1 }
|
||||
end
|
||||
|
||||
def infostack
|
||||
|
||||
@ -20,9 +20,8 @@
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||||
<nav class="relative flex items-center justify-between sm:h-10 md:justify-center" aria-label="Global">
|
||||
<div class="hidden md:flex md:space-x-10">
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Worldbuilding</a>
|
||||
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Documents</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg hover:border-gray-200 border-transparent border px-4">Worldbuilding</a>
|
||||
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg hover:border-gray-200 border-transparent border px-4">Documents</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@ -31,51 +30,65 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border-t border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<div>
|
||||
<h2 class="text-3xl font-extrabold text-gray-900">Starred pages</h2>
|
||||
<p class="mt-4 text-lg text-gray-500">
|
||||
Star any page to keep it at the top of page lists.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0 lg:col-span-2">
|
||||
<dl class="space-y-12">
|
||||
<%= @starred_pages.inspect %>
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">How do you make holy water?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<% if @starred_pages.any? %>
|
||||
<div class="bg-white border-t border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<div>
|
||||
<h2 class="text-3xl font-extrabold text-gray-900">Starred pages</h2>
|
||||
<p class="mt-4 text-lg text-gray-500">
|
||||
Star any page to keep it at the top of page lists.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0 lg:col-span-2">
|
||||
<dl>
|
||||
<% @starred_pages.each do |page| %>
|
||||
<%= link_to polymorphic_path(page['page_type'].downcase, id: page['id']), class: 'block px-4 py-3 hover:bg-white rounded-lg hover:border-gray-200 border-transparent border' do %>
|
||||
<dt class="text-lg leading-6 font-medium <%= content_class_from_name(page['page_type']).text_color %>">
|
||||
<i class="material-icons float-left mr-2"><%= content_class_from_name(page['page_type']).icon %></i>
|
||||
<%= page['name'] %>
|
||||
</dt>
|
||||
<!--
|
||||
<dd class="mt-2 text-base text-gray-500">
|
||||
Description
|
||||
</dd>
|
||||
-->
|
||||
<% end %>
|
||||
<% end %>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
|
||||
<div>
|
||||
<h2 class="text-3xl font-extrabold text-gray-900">Other pages</h2>
|
||||
<p class="mt-4 text-lg text-gray-500">
|
||||
Everything else!
|
||||
<div class="lg:pr-32">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900">All pages</h2>
|
||||
<p class="mt-8 text-lg text-gray-500">
|
||||
Filter by page type...
|
||||
</p>
|
||||
|
||||
<ul role="list" class="border border-gray-200 rounded-md divide-y divide-gray-200 mt-2 bg-white">
|
||||
<% @page_type_counts.each do |page_type, count| %>
|
||||
<%= link_to '#' do %>
|
||||
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm rounded-full hover:bg-notebook-blue hover:text-white group">
|
||||
<div class="w-0 flex-1 flex items-center">
|
||||
<i class="material-icons float-left <%= content_class_from_name(page_type).text_color %> bg-white p-1 h-8 w-8 rounded-full"><%= content_class_from_name(page_type).icon %></i>
|
||||
<span class="ml-2 flex-1 w-0 truncate"><%= page_type.pluralize %></span>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<span class="bg-gray-100 rounded px-1 text-xs group-hover:bg-notebook-blue">
|
||||
<%= count %>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0 lg:col-span-2">
|
||||
<dl>
|
||||
@ -98,22 +111,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<% if @universe_scope %>
|
||||
<h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">
|
||||
<%= link_to @universe_scope.name, @universe_scope %>
|
||||
</h2>
|
||||
<% end %>
|
||||
<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
||||
Table of Contents
|
||||
<div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:py-32 lg:px-8 lg:flex lg:items-center">
|
||||
<div class="lg:w-0 lg:flex-1">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Follow this universe</h2>
|
||||
<p class="mt-3 max-w-3xl text-lg text-gray-500">
|
||||
Stay connected and be notified as this world grows!
|
||||
</p>
|
||||
<p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
|
||||
All your pages and stuff (maybe make this a universe page, sharable?)
|
||||
</div>
|
||||
<div class="mt-8 lg:mt-0 lg:ml-8">
|
||||
<form class="sm:flex">
|
||||
<label for="email-address" class="sr-only">Email address</label>
|
||||
<input id="email-address" name="email-address" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs rounded-md" placeholder="Enter your email">
|
||||
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
||||
<button type="submit" class="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-notebook-blue hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Notify me</button>
|
||||
</div>
|
||||
</form>
|
||||
<p class="mt-3 text-sm text-gray-500">
|
||||
Your email address won't be shared with <%= @universe_scope.user.display_name %>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user