From 35341a2787654d257f5bb0bef96d31ec6c77830b Mon Sep 17 00:00:00 2001
From: drusepth <drusepth@gmail.com>
Date: Thu, 1 Dec 2022 00:38:40 -0800
Subject: [PATCH] eod wip

---
 app/views/content/show.html.erb               | 22 +++++++++---------
 .../_content_context_sidenav.html.erb         | 23 +++++++++++++------
 .../_content_fields_display.html.erb          | 16 +++++++------
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/app/views/content/show.html.erb b/app/views/content/show.html.erb
index fe0260ab..09eebf25 100644
--- a/app/views/content/show.html.erb
+++ b/app/views/content/show.html.erb
@@ -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">
 
diff --git a/app/views/content/tailwind_components/_content_context_sidenav.html.erb b/app/views/content/tailwind_components/_content_context_sidenav.html.erb
index c7fec316..f5d8fc9a 100644
--- a/app/views/content/tailwind_components/_content_context_sidenav.html.erb
+++ b/app/views/content/tailwind_components/_content_context_sidenav.html.erb
@@ -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 -->
diff --git a/app/views/content/tailwind_components/_content_fields_display.html.erb b/app/views/content/tailwind_components/_content_fields_display.html.erb
index 2e695eff..fd5e0cd3 100644
--- a/app/views/content/tailwind_components/_content_fields_display.html.erb
+++ b/app/views/content/tailwind_components/_content_fields_display.html.erb
@@ -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">