This commit is contained in:
drusepth 2022-12-01 00:38:40 -08:00
parent e00eb02685
commit 35341a2787
3 changed files with 36 additions and 25 deletions

View File

@ -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">

View File

@ -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 &nbsp;
<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 &nbsp
<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 -->

View File

@ -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">