mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
logged out tailwind navbar
This commit is contained in:
drusepth
parent
9b3a51da3c
commit
880bace73d
55
app/assets/stylesheets/tailwind.css.scss
Normal file
55
app/assets/stylesheets/tailwind.css.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.mega-menu {
|
||||
display: none;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hoverable {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.hoverable > a:after {
|
||||
content: "\25BC";
|
||||
font-size: 10px;
|
||||
padding-left: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.hoverable:hover .mega-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toggleable > label:after {
|
||||
content: "\25BC";
|
||||
font-size: 10px;
|
||||
padding-left: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.toggle-input {
|
||||
display: none;
|
||||
}
|
||||
.toggle-input:not(checked) ~ .mega-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-input:checked ~ .mega-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toggle-input:checked + label {
|
||||
color: white;
|
||||
background: #2c5282; /*@apply bg-blue-800 */
|
||||
}
|
||||
|
||||
.toggle-input:checked ~ label:after {
|
||||
content: "\25B2";
|
||||
font-size: 10px;
|
||||
padding-left: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
# Controller for top-level pages of the site that do not have
|
||||
# an associated model
|
||||
class MainController < ApplicationController
|
||||
layout 'landing', only: [:index, :about_notebook, :for_writers, :for_roleplayers, :for_friends]
|
||||
layout 'tailwind/landing', only: [:index, :about_notebook, :for_writers, :for_roleplayers, :for_friends]
|
||||
|
||||
before_action :authenticate_user!, only: [:dashboard, :prompts, :notes, :recent_content]
|
||||
before_action :cache_linkable_content_for_each_content_type, only: [:dashboard, :prompts]
|
||||
before_action :set_page_meta_tags
|
||||
|
||||
before_action do
|
||||
if !user_signed_in? && params[:referral]
|
||||
@ -100,4 +101,11 @@ class MainController < ApplicationController
|
||||
@content = @current_user_content.except(*%w(Timeline Document)).values.flatten.sample
|
||||
@attribute_field_to_question = SerendipitousService.question_for(@content)
|
||||
end
|
||||
|
||||
def set_page_meta_tags
|
||||
set_meta_tags(
|
||||
site: "The smart notebook for worldbuilders - Notebook.ai",
|
||||
page: ''
|
||||
)
|
||||
end
|
||||
end
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<%= render 'layouts/common_head' %>
|
||||
|
||||
<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? %>"
|
||||
|
||||
0
app/views/layouts/navbar/_logged_out.html.erb
Normal file
0
app/views/layouts/navbar/_logged_out.html.erb
Normal file
54
app/views/layouts/tailwind.html.erb
Normal file
54
app/views/layouts/tailwind.html.erb
Normal file
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<%= csrf_meta_tags %>
|
||||
|
||||
<%= stylesheet_link_tag 'application', media: 'all' %>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<%= render 'layouts/favicon' %>
|
||||
<%= javascript_include_tag 'application' %>
|
||||
<%= javascript_pack_tag 'application' %>
|
||||
<%= render 'layouts/seo' %>
|
||||
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
|
||||
|
||||
<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? %>"
|
||||
>
|
||||
<%= render 'layouts/sidenav' if user_signed_in? %>
|
||||
<%= render 'layouts/recent_edits_sidenav' if user_signed_in? %>
|
||||
<%= render 'layouts/navbar' %>
|
||||
|
||||
<main>
|
||||
<%= yield :full_width_page_header %>
|
||||
<%= yield :full_width_page_content %>
|
||||
<%= render 'cards/ui/alert' %>
|
||||
<%= render 'cards/ui/notice' %>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<%= react_component("Footer") unless defined?(@show_footer) && !@show_footer %>
|
||||
<%= render 'layouts/quick_add_fab' unless defined?(@show_footer) && !@show_footer %>
|
||||
|
||||
<script type="text/javascript">
|
||||
<% if user_signed_in? %>
|
||||
DISABLE_KEYBOARD_SHORTCUTS = <%= !current_user.keyboard_shortcuts_preference %>;
|
||||
<% end %>
|
||||
|
||||
$(document).ready(function() {
|
||||
<%= yield :javascript %>
|
||||
});
|
||||
</script>
|
||||
|
||||
<%= render partial: 'content/keyboard_controls_help_modal' %>
|
||||
<%= render 'layouts/ganalytics' %>
|
||||
</body>
|
||||
</html>
|
||||
6
app/views/layouts/tailwind/_navbar.html.erb
Normal file
6
app/views/layouts/tailwind/_navbar.html.erb
Normal file
@ -0,0 +1,6 @@
|
||||
<% if user_signed_in? %>
|
||||
<%= render partial: 'layouts/tailwind/navbar/logged_in' %>
|
||||
|
||||
<% else %>
|
||||
<%= render partial: 'layouts/tailwind/navbar/logged_out' %>
|
||||
<% end %>
|
||||
28
app/views/layouts/tailwind/landing.html.erb
Normal file
28
app/views/layouts/tailwind/landing.html.erb
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<%= csrf_meta_tags %>
|
||||
|
||||
<%= render 'layouts/favicon' %>
|
||||
<%= javascript_include_tag 'application' %>
|
||||
<%= javascript_pack_tag 'application' %>
|
||||
<%= render 'layouts/seo' %>
|
||||
|
||||
<%= stylesheet_link_tag 'application', media: 'all' %>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<%= render 'layouts/tailwind/navbar' %>
|
||||
|
||||
<main>
|
||||
<%= yield %>
|
||||
</main>
|
||||
|
||||
<%= react_component("Footer") unless defined?(@show_footer) && !@show_footer %>
|
||||
<%= render 'layouts/ganalytics' %>
|
||||
</body>
|
||||
</html>
|
||||
181
app/views/layouts/tailwind/navbar/_logged_in.html.erb
Normal file
181
app/views/layouts/tailwind/navbar/_logged_in.html.erb
Normal file
@ -0,0 +1,181 @@
|
||||
<div class="bg-blue-400 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>
|
||||
</li>
|
||||
|
||||
<!-- Toggle dropdown by click -->
|
||||
<li class="toggleable hover:bg-blue-800 hover:text-white">
|
||||
<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>
|
||||
<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>
|
||||
<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 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">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- ## Toggleable Link Template ##
|
||||
|
||||
<li class="toggleable"><input type="checkbox" value="selected" id="toggle-xxx" class="toggle-input"><label for="toggle-xxx" class="cursor-pointer">Click</label><div role="toggle" class="mega-menu">
|
||||
Add your mega menu content
|
||||
</div></li>
|
||||
|
||||
-->
|
||||
|
||||
<!--Hoverable Link-->
|
||||
<li class="hoverable hover:bg-blue-800 hover:text-white">
|
||||
<a href="#" class="relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold hover:bg-blue-800 hover:text-white">Hover</a>
|
||||
<div 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">
|
||||
<div class="w-full text-white mb-8">
|
||||
<h2 class="font-bold text-2xl">Main Hero Message for the menu section</h2>
|
||||
<p>Sub-hero message, not too long and not too short. Make it just right!</p>
|
||||
</div>
|
||||
<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">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 1</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">Quarterly sales are at an all-time low create spaces to explore the accountable talk and blind vampires.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</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">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M4.13 12H4a2 2 0 1 0 1.8 1.11L7.86 10a2.03 2.03 0 0 0 .65-.07l1.55 1.55a2 2 0 1 0 3.72-.37L15.87 8H16a2 2 0 1 0-1.8-1.11L12.14 10a2.03 2.03 0 0 0-.65.07L9.93 8.52a2 2 0 1 0-3.72.37L4.13 12zM0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 2</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">Prioritize these line items game-plan draw a line in the sand come up with something buzzworthy UX upstream selling.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
<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">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3l4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 3</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">This proposal is a win-win situation which will cause a stellar paradigm shift, let's touch base off-line before we fire the new ux experience.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 4</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">This is a no-brainer to wash your face, or we need to future-proof this high performance keywords granularity.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- ## Hoverable Link Template ##
|
||||
|
||||
<li class="hoverable hover:bg-blue-800 hover:text-white"><a href="#" class="relative block">x</a><div class="mega-menu">
|
||||
Add your mega menu content
|
||||
</div></li>
|
||||
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
14
app/views/layouts/tailwind/navbar/_logged_out.html.erb
Normal file
14
app/views/layouts/tailwind/navbar/_logged_out.html.erb
Normal file
@ -0,0 +1,14 @@
|
||||
<div class="bg-blue-400 text-white w-full flex justify-between sticky top-0 z-50">
|
||||
<div class="relative block lg:ml-8 text-xl border-transparent border-b-2 hover:border-white text-sm">
|
||||
<%= link_to 'Notebook.ai', root_path, class: 'block p-3 mt-1 tracking-wider hover:shadow-lg' %>
|
||||
</div>
|
||||
|
||||
<ul class="flex lg:mr-8">
|
||||
<li class="border-transparent border-b-2 hover:border-white text-sm">
|
||||
<%= link_to 'Sign in', new_user_session_path, class: 'relative block mt-1 py-4 px-2 lg:px-6 text-sm lg:text-base hover:shadow-lg' %>
|
||||
</li>
|
||||
<li class="border-transparent border-b-2 hover:border-white text-sm">
|
||||
<%= link_to 'Sign up', new_user_registration_path, class: 'relative block mt-1 py-4 px-2 lg:px-6 text-sm lg:text-base hover:shadow-lg' %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user