mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
wip hub design that'll probably be per-universe
This commit is contained in:
drusepth
parent
ec2c189a99
commit
173c8a8edd
@ -37,6 +37,7 @@ class MainController < ApplicationController
|
||||
end
|
||||
|
||||
def table_of_contents
|
||||
@serialized_content = ContentSerializer.new(@universe_scope)
|
||||
end
|
||||
|
||||
def infostack
|
||||
|
||||
@ -8,7 +8,7 @@ class ContentSerializer
|
||||
attr_accessor :documents
|
||||
|
||||
attr_accessor :raw_model
|
||||
attr_accessor :class_name, :class_color, :class_icon
|
||||
attr_accessor :class_name, :class_color, :class_text_color, :class_icon
|
||||
|
||||
attr_accessor :data
|
||||
# name: 'blah,
|
||||
@ -39,6 +39,7 @@ class ContentSerializer
|
||||
|
||||
self.class_name = content.class.name
|
||||
self.class_color = content.class.color
|
||||
self.class_text_color = content.class.text_color
|
||||
self.class_icon = content.class.icon
|
||||
|
||||
self.page_tags = content.page_tags.pluck(:tag) || []
|
||||
|
||||
@ -79,7 +79,526 @@
|
||||
<div class="bg-white lg:min-w-0 lg:flex-1">
|
||||
<div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0">
|
||||
<div class="flex items-center">
|
||||
<h1 class="flex-1 text-lg font-medium">42 characters</h1>
|
||||
<h1 class="flex-1 text-lg font-medium">
|
||||
<span class="<%= Universe.text_color %>">
|
||||
<%= link_to @universe_scope.name, @universe_scope %>
|
||||
</span>
|
||||
<small class="ml-2 text-gray-500">
|
||||
by
|
||||
<span class="<%= User.text_color %>">
|
||||
<%= link_to @universe_scope.user.display_name, @universe_scope.user %>
|
||||
</span>
|
||||
</small>
|
||||
</h1>
|
||||
<div data-controller="dropdown" class="relative">
|
||||
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<!-- Heroicon name: solid/sort-descending -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
|
||||
</svg>
|
||||
Jump to...
|
||||
<!-- Heroicon name: solid/chevron-down -->
|
||||
<svg class="ml-2.5 -mr-1.5 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="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>
|
||||
<!-- Dropdown menu, show/hide based on menu state. -->
|
||||
<div data-dropdown-target="menu" class="origin-top-right z-10 absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="sort-menu-button" tabindex="-1">
|
||||
<div class="py-1" role="none">
|
||||
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-0">Name</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-1">Date modified</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="sort-menu-item-2">Date created</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TODO abstract this out as field display for all pages??? -->
|
||||
|
||||
<form class="space-y-8 divide-y divide-gray-200 pl-6">
|
||||
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
||||
|
||||
<%# @serialized_content.data[:categories].inspect %>
|
||||
<% @serialized_content.data[:categories].each do |category| %>
|
||||
<div>
|
||||
<div class="pt-4">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<i class="material-icons float-left <%= @serialized_content.class_text_color %> mr-2"><%= category[:icon] %></i>
|
||||
<%= category[:label] %>
|
||||
</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
<%= category[:percent_complete] %>% complete
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
<% category[:fields].each do |field| %>
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<div>
|
||||
<label for="<%= field[:name] %>" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
<%= field[:label] %>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<%= field[:value] %>
|
||||
<div class="text-gray-400">
|
||||
<%= field.inspect %>
|
||||
</div>
|
||||
<!-- field actions -->
|
||||
<ul class="text-sm mt-2 space-x-8 text-notebook-blue">
|
||||
<li class="inline-block"><%= link_to 'Edit', '#' %></li>
|
||||
<li class="inline-block"><%= link_to 'Revise', '#' %></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Profile</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">This information will be displayed publicly so be careful what you share.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="username" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Username </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex rounded-md shadow-sm">
|
||||
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"> workcation.com/ </span>
|
||||
<input type="text" name="username" id="username" autocomplete="username" class="flex-1 block w-full focus:ring-indigo-500 focus:border-indigo-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="about" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> About </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<textarea id="about" name="about" rows="3" class="max-w-lg shadow-sm block w-full focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md"></textarea>
|
||||
<p class="mt-2 text-sm text-gray-500">Write a few sentences about yourself.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="photo" class="block text-sm font-medium text-gray-700"> Photo </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="flex items-center">
|
||||
<span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
|
||||
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="cover-photo" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Cover photo </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="space-y-1 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<div class="flex text-sm text-gray-600">
|
||||
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||||
<span>Upload a file</span>
|
||||
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||
</label>
|
||||
<p class="pl-1">or drag and drop</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 space-y-6 sm:pt-10 sm:space-y-5">
|
||||
<div>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">Use a permanent address where you can receive mail.</p>
|
||||
</div>
|
||||
<div class="space-y-6 sm:space-y-5">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="first-name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> First name </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="last-name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Last name </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Email address </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input id="email" name="email" type="email" autocomplete="email" class="block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="country" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Country </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<select id="country" name="country" autocomplete="country-name" class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
<option>United States</option>
|
||||
<option>Canada</option>
|
||||
<option>Mexico</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="street-address" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Street address </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="street-address" id="street-address" autocomplete="street-address" class="block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="city" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> City </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="city" id="city" autocomplete="address-level2" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="region" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> State / Province </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="region" id="region" autocomplete="address-level1" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label for="postal-code" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> ZIP / Postal code </label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input type="text" name="postal-code" id="postal-code" autocomplete="postal-code" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
|
||||
<div>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Notifications</h3>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">We'll always let you know about important changes, but you pick what else you want to hear about.</p>
|
||||
</div>
|
||||
<div class="space-y-6 sm:space-y-5 divide-y divide-gray-200">
|
||||
<div class="pt-6 sm:pt-5">
|
||||
<div role="group" aria-labelledby="label-email">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
|
||||
<div>
|
||||
<div class="text-base font-medium text-gray-900 sm:text-sm sm:text-gray-700" id="label-email">By Email</div>
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 sm:col-span-2">
|
||||
<div class="max-w-lg space-y-4">
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="comments" class="font-medium text-gray-700">Comments</label>
|
||||
<p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="candidates" class="font-medium text-gray-700">Candidates</label>
|
||||
<p class="text-gray-500">Get notified when a candidate applies for a job.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="offers" class="font-medium text-gray-700">Offers</label>
|
||||
<p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6 sm:pt-5">
|
||||
<div role="group" aria-labelledby="label-notifications">
|
||||
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
|
||||
<div>
|
||||
<div class="text-base font-medium text-gray-900 sm:text-sm sm:text-gray-700" id="label-notifications">Push Notifications</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<div class="max-w-lg">
|
||||
<p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
|
||||
<div class="mt-4 space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="push-everything" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="push-everything" class="ml-3 block text-sm font-medium text-gray-700"> Everything </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="push-email" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="push-email" class="ml-3 block text-sm font-medium text-gray-700"> Same as email </label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="push-nothing" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="push-nothing" class="ml-3 block text-sm font-medium text-gray-700"> No push notifications </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-5">
|
||||
<div class="flex justify-end">
|
||||
<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Cancel</button>
|
||||
<button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ul role="list" class="relative z-0 divide-y divide-gray-200 border-b border-gray-200">
|
||||
<% @universe_scope.characters.each do |content_page| %>
|
||||
<li class="relative pl-4 pr-6 py-5 hover:bg-gray-50 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
|
||||
<div class="flex items-center justify-between space-x-4">
|
||||
<!-- Repo name and link -->
|
||||
<div>
|
||||
<%= image_tag content_page.random_image_including_private, class: 'h-24 w-24 rounded-lg' %>
|
||||
</div>
|
||||
<div class="min-w-0 space-y-3 flex-grow">
|
||||
<div class="flex items-center space-x-3">
|
||||
<i class="material-icons <%= content_page.class.text_color %>"><%= content_page.class.icon %></i>
|
||||
|
||||
<span class="block">
|
||||
<h2 class="text-sm font-medium">
|
||||
<a href="#">
|
||||
<span class="absolute inset-0" aria-hidden="true"></span>
|
||||
<%= content_page.name %>
|
||||
</a>
|
||||
</h2>
|
||||
</span>
|
||||
</div>
|
||||
<a href="#" class="relative group flex items-center space-x-2.5">
|
||||
<span class="text-sm text-gray-500 group-hover:text-gray-900 font-medium truncate">
|
||||
<%= content_page.description || "page description" %>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sm:hidden">
|
||||
<!-- Heroicon name: solid/chevron-right -->
|
||||
<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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Repo meta info -->
|
||||
<div class="hidden sm:flex flex-col flex-shrink-0 items-end space-y-3">
|
||||
<p class="flex items-center space-x-4">
|
||||
<a href="#edit" class="relative text-sm text-gray-500 hover:text-gray-900 font-medium">
|
||||
Edit character
|
||||
</a>
|
||||
<button type="button" class="relative bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<span class="sr-only">Add to favorites</span>
|
||||
<!--
|
||||
Heroicon name: solid/star
|
||||
|
||||
Starred: "text-yellow-300 hover:text-yellow-400", Not Starred: "text-gray-300 hover:text-gray-400"
|
||||
-->
|
||||
<svg class="text-yellow-300 hover:text-yellow-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</button>
|
||||
</p>
|
||||
<p class="flex text-gray-500 text-sm space-x-2">
|
||||
<span>Last updated 3h ago</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>342 words</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<!-- More projects... -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Activity feed -->
|
||||
<div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
|
||||
<div class="pl-6 lg:w-80 px-6 pt-6">
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col sm:flex-row xl:flex-col space-y-1">
|
||||
<button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white <%= Universe.color %> hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 xl:w-full">
|
||||
</button>
|
||||
Create page
|
||||
<button type="button" class="mt-3 inline-flex items-center 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-indigo-500 sm:mt-0 sm:ml-3 xl:ml-0 xl:mt-3 xl:w-full">
|
||||
Share universe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 pb-2">
|
||||
<h2 class="text-sm font-semibold">Recent Activity</h2>
|
||||
</div>
|
||||
<div>
|
||||
<ul role="list" class="divide-y divide-gray-200">
|
||||
|
||||
<% 4.times do %>
|
||||
|
||||
<li class="py-4">
|
||||
<div class="flex space-x-3">
|
||||
<img class="h-10 w-10 rounded-lg" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="">
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium">John Cena</h3>
|
||||
<p class="text-sm text-gray-500">1h</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 group">
|
||||
Character updated by <%= link_to current_user.display_name, current_user, class: "group-hover:#{User.text_color}" %>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<% end %>
|
||||
|
||||
<!-- More items... -->
|
||||
</ul>
|
||||
<!--
|
||||
<div class="py-4 text-sm border-t border-gray-200">
|
||||
<a href="#" class="text-indigo-600 font-semibold hover:text-indigo-900">View all activity <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="pt-6 pb-2">
|
||||
<h2 class="text-sm font-semibold">Contributors</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex-shrink-0 sm:mt-0">
|
||||
<div class="flex overflow-hidden -space-x-1">
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Emily Selman">
|
||||
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Kristin Watson">
|
||||
|
||||
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Emma Dorsey">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative min-h-full flex flex-col">
|
||||
<!-- 3 column wrapper -->
|
||||
<div class="flex-grow w-full lg:flex min-h-screen">
|
||||
<!-- Left sidebar & main wrapper -->
|
||||
<div class="flex-1 min-w-0 bg-white xl:flex px-6">
|
||||
<!-- Account profile -->
|
||||
<div class="xl:flex-shrink-0 xl:w-64 xl:border-r xl:border-gray-200 bg-white">
|
||||
<div class="pl-4 pr-6 py-6 sm:pl-6 lg:pl-8 xl:pl-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="space-y-8 sm:space-y-0 sm:flex sm:justify-between sm:items-center xl:block xl:space-y-8">
|
||||
<!-- Profile -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex-shrink-0 w-full mb-2">
|
||||
<%= link_to @universe_scope do %>
|
||||
<%= image_tag @universe_scope.random_image_including_private, class: 'rounded-lg' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="text-sm font-medium text-gray-900"><%= link_to @universe_scope.name, @universe_scope %></div>
|
||||
<%= link_to @universe_scope.user, class: 'group flex items-center text-xs' do %>
|
||||
<i class="material-icons <%= User.text_color %>"><%= User.icon %></i>
|
||||
<span class="text-gray-500 group-hover:text-gray-900 font-medium"><%= @universe_scope.user.display_name %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-2 space-y-1">
|
||||
<h2 class="text-sm font-semibold">In this universe</h2>
|
||||
|
||||
<button type="button" class="inline-flex items-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-notebook-blue sm:mt-0 sm:ml-3 xl:ml-0 xl:mt-3 xl:w-full">
|
||||
<i class="material-icons <%= Character.text_color %> mr-1"><%= Character.icon %></i>
|
||||
<span class="flex-grow text-left">Characters</span>
|
||||
<span class="bg-gray-100 p-1 text-xs rounded-lg">42</span>
|
||||
</button>
|
||||
<button type="button" class="inline-flex items-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-notebook-blue sm:mt-0 sm:ml-3 xl:ml-0 xl:mt-3 xl:w-full">
|
||||
<i class="material-icons <%= Location.text_color %> mr-1"><%= Location.icon %></i>
|
||||
<span class="flex-grow text-left">Locations</span>
|
||||
<span class="bg-gray-100 p-1 text-xs rounded-lg">8</span>
|
||||
</button>
|
||||
<button type="button" class="inline-flex items-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-notebook-blue sm:mt-0 sm:ml-3 xl:ml-0 xl:mt-3 xl:w-full">
|
||||
<i class="material-icons <%= Item.text_color %> mr-1"><%= Item.icon %></i>
|
||||
<span class="flex-grow text-left">Items</span>
|
||||
<span class="bg-gray-100 p-1 text-xs rounded-lg">17</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meta info -->
|
||||
<div class="pt-2 flex flex-col space-y-2 sm:flex-row xl:flex-col xl:space-x-0">
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Heroicon name: solid/collection -->
|
||||
<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 d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-500 font-medium">15,323 words</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Heroicon name: solid/collection -->
|
||||
<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 d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-500 font-medium">7 documents</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Heroicon name: solid/badge-check -->
|
||||
<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="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-500 font-medium">Premium universe</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects List -->
|
||||
<div class="bg-white lg:min-w-0 lg:flex-1">
|
||||
<div class="pl-4 pr-6 pt-4 pb-4 border-b border-t border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0">
|
||||
<div class="flex items-center">
|
||||
<h1 class="flex-1 text-lg font-medium">
|
||||
42 characters in
|
||||
<span class="<%= Universe.text_color %>">
|
||||
<%= link_to @universe_scope.name, @universe_scope %>
|
||||
</span>
|
||||
</h1>
|
||||
<div data-controller="dropdown" class="relative">
|
||||
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<!-- Heroicon name: solid/sort-ascending -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user