mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

start on new logged-in navbar design mockups

Browse Source
This commit is contained in:
drusepth 2022-02-09 20:29:40 -08:00
parent 87d851b17a
commit b1d3029330
5 changed files with 24 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/models/documents/document.rb
View File

@ -35,11 +35,11 @@ class Document < ApplicationRecord
KEYS_TO_TRIGGER_REVISION_ON_CHANGE = %w(title body synopsis notes_text)
def self.color
'teal'
'teal bg-teal-500'
end
def self.text_color
'teal-text'
'teal-text text-teal-500'
end
def color

2
app/models/page_types/character.rb
View File

@ -49,7 +49,7 @@ class Character < ApplicationRecord
end
def self.color
'red red-500'
'red bg-red-500'
end
def self.text_color

4
app/models/timelines/timeline.rb
View File

@ -22,11 +22,11 @@ class Timeline < ApplicationRecord
end
def self.color
'green'
'green bg-green-500'
end
def self.text_color
'green-text'
'green-text text-green-500'
end
# Needed because we sometimes munge Timelines in with ContentPages :(

5
app/views/layouts/tailwind.html.erb
View File

@ -17,16 +17,13 @@
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body data-in-app="true"
class="<%= controller_name %> <%= action_name %> <%= 'has-fixed-sidenav' if user_signed_in? %> <%= 'dark' if user_signed_in? && current_user.dark_mode_enabled? %>"
class="<%= controller_name %> <%= action_name %> <%= 'dark' if user_signed_in? && current_user.dark_mode_enabled? %>"
>
<%# render 'layouts/sidenav' if user_signed_in? %>
<%# render 'layouts/recent_edits_sidenav' if user_signed_in? %>
<%= render 'layouts/tailwind/navbar' %>
<main>
<%# yield :full_width_page_header %>
<%# yield :full_width_page_content %>
<%= render 'cards/ui/alert' %>
<%= render 'cards/ui/notice' %>

64
app/views/layouts/tailwind/navbar/_logged_in.html.erb
View File

@ -1,58 +1,30 @@
<div class="bg-blue-400 text-white w-full flex justify-between sticky top-0 z-50">
<div class="bg-notebook-blue text-white w-full flex justify-between sticky top-0 z-50">
<div class="relative block p-4 lg:p-6 text-xl font-bold">
<%= link_to 'Notebook.ai', root_path, class: 'hover:text-blue-100' %>
</div>
<ul class="flex">
<li class="border-transparent border-b-2 hover:border-white text-sm">
<a href="#" class="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">Sign in</a>
</li>
<li class="border-transparent border-b-2 hover:border-white text-sm">
<a href="#" class="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">Sign up</a>
<a href="#" class="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">Home</a>
</li>
<!-- Toggle dropdown by click -->
<li class="toggleable hover:bg-blue-800 hover:text-white">
<li class="toggleable border-transparent border-b-2 hover:border-white text-sm">
<input type="checkbox" value="selected" id="toggle-one" class="toggle-input">
<label for="toggle-one" class="block cursor-pointer py-6 px-4 lg:p-6 text-sm lg:text-base font-bold">Click</label>
<div role="toggle" class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-blue-800">
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 1</h3>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
</ul>
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 2</h3>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
<li>
<a href="#" class="block p-3 hover:bg-blue-600 text-gray-300 hover:text-white">Category One Sublink</a>
</li>
</ul>
<label for="toggle-one" class="block cursor-pointer py-6 px-4 lg:p-6 text-sm lg:text-base font-bold">Worldbuilding</label>
<div role="toggle" class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-blue-100 text-black border-b border-notebook-blue">
<div class="w-full flex flex-wrap justify-between mx-2">
<div class="px-4 w-full sm:w-full lg:w-1/2 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-3 lg:pt-2">
<h3 class="font-bold text-xl text-black text-bold mb-2">Your notebook pages</h3>
<% @current_user_content.keys.sort.each do |key| %>
<%= link_to polymorphic_path(key.pluralize.downcase) do %>
<span class="bg-white rounded-lg inline-block <%= content_class_from_name(key).color %> text-white pb-4 pt-1 px-4 m-2 my-1 hover:shadow-lg">
<i class="material-icons mr-2 relative top-2"><%= content_class_from_name(key).icon %></i>
<span><%= key.pluralize %></span>
</span>
<% end %>
<% end %>
</div>
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
<h3 class="font-bold text-xl text-white text-bold">Heading 3</h3>
<li>
@ -74,7 +46,7 @@
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 4</h3>
<li class="pt-3">
<img src="https://placehold.it/205x172">
<img src="http://placehold.it/250x250">
</li>
</ul>
</div>