mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
eod wip
This commit is contained in:
parent
e00eb02685
commit
35341a2787
@ -1,11 +1,11 @@
|
||||
<nav class="bg-white border-b border-gray-200 flex sticky top-14 z-50" aria-label="Breadcrumb">
|
||||
<nav class="bg-white h-16 border-b border-gray-200 flex sticky top-14 z-40" aria-label="Breadcrumb">
|
||||
<ol role="list" class="flex-1 mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8">
|
||||
<li class="flex">
|
||||
<div class="flex items-center">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<%= link_to root_path, class: 'text-gray-400 hover:text-gray-500' do %>
|
||||
<i class="material-icons flex-shrink-0 text-2xl relative top-1">dashboard</i>
|
||||
<span class="sr-only">Home</span>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<svg class="flex-shrink-0 w-6 h-full text-gray-200" viewBox="0 0 24 44" preserveAspectRatio="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Characters</a>
|
||||
<%= link_to @serialized_content.class_name.pluralize, send("#{@serialized_content.class_name.downcase.pluralize}_path"), class: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700' %>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -23,22 +23,22 @@
|
||||
<svg class="flex-shrink-0 w-6 h-full text-gray-200" viewBox="0 0 24 44" preserveAspectRatio="none" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
|
||||
</svg>
|
||||
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700" aria-current="page"><%= @serialized_content.name %></a>
|
||||
<%= link_to @serialized_content.name, @serialized_content.raw_model, class: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700', aria: { current: 'page' } %>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="mt-1 mr-3">
|
||||
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-notebook-blue border border-notebook-blue rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<div class="mt-2 mr-3">
|
||||
<button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="w-full bg-notebook-blue border border-notebook-blue rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="page-index-button" aria-expanded="false" aria-haspopup="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
Edit mode
|
||||
</button>
|
||||
</div>
|
||||
<div data-controller="dropdown" class="mt-1 mr-3">
|
||||
<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-notebook-blue" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<div data-controller="dropdown" class="mt-2 mr-3">
|
||||
<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-notebook-blue" id="page-index-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" />
|
||||
@ -50,7 +50,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown menu, show/hide based on menu state. -->
|
||||
<div data-dropdown-target="menu" class="origin-top-right z-10 absolute right-4 -mt-6 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 data-dropdown-target="menu" class="origin-top-right z-10 absolute right-4 -mt-6 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="page-index-button" tabindex="-1">
|
||||
<div class="py-1" role="none">
|
||||
<% @serialized_content.data[:categories].each do |category| %>
|
||||
<%= link_to '#', class: "text-gray-700 block px-4 py-2 text-sm font-medium bg-white hover:bg-gray-100 border-b border-gray-100", id: category[:id], data: { action: "dropdown#toggle" } do %>
|
||||
@ -83,7 +83,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity feed -->
|
||||
<!-- Right pane -->
|
||||
<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 hidden px-6 pt-6">
|
||||
|
||||
|
||||
@ -1,20 +1,30 @@
|
||||
<div class="xl:flex-shrink-0 xl:w-80 xl:border-r xl:border-gray-200">
|
||||
<div class="pl-4 pr-6 py-6 sm:pl-6 lg:pl-8 xl:pl-6">
|
||||
<div class="px-4 py-6 sm:pl-6 lg:px-8 xl:px-6">
|
||||
<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 items-center">
|
||||
<div class="flex-shrink-0 w-full mb-2">
|
||||
<%= image_tag content.raw_model.random_image_including_private, class: 'rounded-lg' %>
|
||||
<% image = content.raw_model.random_image_including_private %>
|
||||
<%= link_to image, target: '_blank' do %>
|
||||
<%= image_tag image, class: 'rounded-lg hover:shadow hover:opacity-90' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<div class="text-sm font-medium text-gray-900 mb-4">
|
||||
<i class="material-icons float-left <%= content.class_text_color %> mr-1"><%= content.class_icon %></i>
|
||||
<%= content.name %>
|
||||
</div>
|
||||
<% if content.universe %>
|
||||
<%= link_to content.universe, class: 'group flex items-center text-xs' do %>
|
||||
<i class="material-icons mr-2 <%= Universe.text_color %>"><%= Universe.icon %></i>
|
||||
in
|
||||
<span class="text-gray-500 group-hover:text-gray-900 font-medium"><%= content.universe.name %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= link_to content.user, class: 'group flex items-center text-xs' do %>
|
||||
<i class="material-icons <%= User.text_color %>"><%= User.icon %></i>
|
||||
<i class="material-icons mr-2 <%= User.text_color %>"><%= User.icon %></i>
|
||||
by  
|
||||
<span class="text-gray-500 group-hover:text-gray-900 font-medium"><%= content.user.display_name %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -43,7 +53,6 @@
|
||||
<span class="flex-grow text-left">References</span>
|
||||
<span class="bg-gray-100 p-1 text-xs rounded-lg">17</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Meta info -->
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
<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">
|
||||
<form class="space-y-8 divide-y divide-gray-200 px-6">
|
||||
<div class="divide-y divide-gray-200">
|
||||
|
||||
<% content.data[:categories].each do |category| %>
|
||||
<div class="mb-8">
|
||||
<div class="pt-4">
|
||||
<div class="mb-20">
|
||||
<div class="pt-4 flex flex-row space-x-32">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
<i class="material-icons float-left <%= 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 class="flex-1 bg-gray-200 rounded-full h-4 relative top-1.5">
|
||||
<div class="<%= content.class_color %> text-xs text-white font-medium text-center p-0.5 leading-none rounded-full line-clamp-1" style="width: <%= category[:percent_complete] %>%">
|
||||
<%= category[:percent_complete] %>% complete
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user