mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
timelines#index
This commit is contained in:
drusepth
parent
1c7c1f9172
commit
7bc149549d
@ -1,4 +1,6 @@
|
||||
class TimelinesController < ApplicationController
|
||||
layout 'tailwind', only: [:index]
|
||||
|
||||
before_action :authenticate_user!, except: [:show]
|
||||
before_action :set_timeline, only: [:show, :edit, :update, :destroy]
|
||||
|
||||
@ -27,8 +29,10 @@ class TimelinesController < ApplicationController
|
||||
else
|
||||
# Add in all timelines from shared universes also
|
||||
@timelines += Timeline.where(universe_id: current_user.contributable_universe_ids)
|
||||
.where.not(id: @timelines.pluck(:id))
|
||||
end
|
||||
|
||||
@filtered_page_tags = []
|
||||
@page_tags = PageTag.where(
|
||||
page_type: Timeline.name,
|
||||
page_id: @timelines.pluck(:id)
|
||||
|
||||
@ -1,188 +1,370 @@
|
||||
<%= content_for :full_width_page_header do %>
|
||||
<%= render partial: 'content/components/parallax_header', locals: { content_type: 'Timeline', content_class: Timeline } %>
|
||||
<% end %>
|
||||
|
||||
<% if @timelines.any? %>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col s12">
|
||||
<%= render partial: 'content/components/list_filter_bar', locals: { content_type: Timeline } %>
|
||||
</div>
|
||||
<div class="bg-white pb-2">
|
||||
<div>
|
||||
<%= image_tag asset_path("card-headers/timelines.webp"), class: 'h-32 w-full object-cover lg:h-48' %>
|
||||
</div>
|
||||
|
||||
<div class="js-content-cards-list row">
|
||||
<% @timelines.each do |timeline| %>
|
||||
<div class="col s12 js-content-card-container">
|
||||
|
||||
<%= link_to edit_timeline_path(timeline) do %>
|
||||
<div class="hoverable card">
|
||||
<div class="card-image green" style="height: 80px; overflow: hidden;">
|
||||
<span class="card-title">
|
||||
<i class="material-icons left" style="margin-top: 5px"><%= Timeline.icon %></i>
|
||||
<%= timeline.name.presence || 'Untitled Timeline' %>
|
||||
</span>
|
||||
<!--
|
||||
<a class="btn-floating halfway-fab waves-effect waves-light red">
|
||||
<i class="material-icons">search</i>
|
||||
</a>
|
||||
-->
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
|
||||
<div class="flex">
|
||||
<% if @universe_scope %>
|
||||
<%= link_to @universe_scope do %>
|
||||
<%= image_tag @universe_scope.random_image_including_private(format: :hero), class: 'h-24 w-24 rounded-full ring-4 ring-purple-800 sm:h-32 sm:w-32' %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= image_tag current_user.image_url, class: 'h-24 w-24 rounded-full ring-4 ring-green-800 sm:h-32 sm:w-32' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
|
||||
<div class="sm:hidden md:block mt-6 min-w-0 flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 truncate">
|
||||
Showing <%= pluralize @timelines.count, "timeline" %>
|
||||
</h1>
|
||||
<% if @universe_scope %>
|
||||
<div class="text-gray-400 text-sm">
|
||||
in <%= link_to @universe_scope.name, @universe_scope, class: Universe.text_color %>
|
||||
</div>
|
||||
<div class="card-content black-text js-content-name">
|
||||
<% if timeline.universe %>
|
||||
<p class="right">
|
||||
<%= link_to timeline.universe, class: "#{Universe.text_color}" do %>
|
||||
<i class="material-icons left"><%= Universe.icon %></i>
|
||||
<%= timeline.universe.name %>
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
<p>
|
||||
<strong><%= timeline.subtitle %></strong>
|
||||
</p>
|
||||
<p>
|
||||
<%= timeline.description %>
|
||||
</p>
|
||||
<p class="grey-text">
|
||||
Last edited <%= time_ago_in_words timeline.updated_at %> ago
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
|
||||
<% if current_user.can_create?(Timeline) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: "Timeline") %>
|
||||
<%= link_to new_polymorphic_path(Timeline) do %>
|
||||
<button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white <%= Timeline.color %> focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<i class="material-icons text-sm mr-2">add</i>
|
||||
<span>New Timeline</span>
|
||||
</button>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to subscription_path do %>
|
||||
<button type="button" class="inline-flex justify-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-gray-400 hover:bg-notebook-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
|
||||
<span>Upgrade</span>
|
||||
</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:block md:hidden mt-6 min-w-0 flex-1">
|
||||
<h1 class="text-2xl font-bold text-gray-900 truncate">Ricardo Cooper</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<% timeline.page_tags.each do |page_tag| %>
|
||||
<%= link_to params.permit(:tag).merge({ tag: PageTagService.slug_for(page_tag.tag) }) do %>
|
||||
<span class="new badge <%= params[:tag] == page_tag.slug ? Timeline.color : 'grey' %> right" data-badge-caption="<%= page_tag.tag %>"></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<!-- new filter bar -->
|
||||
<div class="bg-white mb-4">
|
||||
<!--
|
||||
Mobile filter dialog
|
||||
|
||||
Off-canvas filters for mobile, show/hide based on off-canvas filters state.
|
||||
-->
|
||||
<div class="fixed inset-0 flex z-40 sm:hidden" role="dialog" aria-modal="true">
|
||||
<!--
|
||||
Off-canvas menu overlay, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>
|
||||
|
||||
<!--
|
||||
Off-canvas menu, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-full"
|
||||
To: "translate-x-0"
|
||||
Leaving: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-0"
|
||||
To: "translate-x-full"
|
||||
-->
|
||||
<div class="ml-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto">
|
||||
<div class="px-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-medium text-gray-900">Filters</h2>
|
||||
<button type="button" class="-mr-2 w-10 h-10 bg-white p-2 rounded-md flex items-center justify-center text-gray-400">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<form class="mt-4">
|
||||
<div class="border-t border-gray-200 px-4 py-6">
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<!-- Expand/collapse section button -->
|
||||
<button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-0" aria-expanded="false">
|
||||
<span class="font-medium text-gray-900"> Tag </span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<!--
|
||||
Expand/collapse icon, toggle classes based on section open state.
|
||||
|
||||
Heroicon name: solid/chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
<!-- Filter section, show/hide based on section state. -->
|
||||
<div class="pt-6" id="filter-section-0">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-category-0" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-category-0" class="ml-3 text-sm text-gray-500"> All New Arrivals </label>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-category-1" name="category[]" value="tees" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-category-1" class="ml-3 text-sm text-gray-500"> Tees </label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<% if timeline.readable_by?(current_user) %>
|
||||
<%= link_to timeline_path(timeline), class: 'blue-text left' do %>
|
||||
<i class="material-icons left"><%= Timeline.icon %></i>
|
||||
View
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if timeline.updatable_by?(current_user) %>
|
||||
<%= link_to edit_timeline_path(timeline), class: 'green-text right' do %>
|
||||
<i class="material-icons left">edit</i>
|
||||
Edit
|
||||
<% end %>
|
||||
<% end %>
|
||||
<div class="clearfix"></div>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-category-2" name="category[]" value="objects" type="checkbox" checked class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-category-2" class="ml-3 text-sm text-gray-500"> Objects </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @show_scope_notice %>
|
||||
<p class="center help-text">
|
||||
Only showing timelines
|
||||
in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + '-text' %> universe.
|
||||
<%= link_to(
|
||||
"See timelines from all universes.",
|
||||
'?universe=all',
|
||||
class: Timeline.color + '-text')
|
||||
%>
|
||||
</p>
|
||||
<% end %>
|
||||
<div class="border-t border-gray-200 px-4 py-6">
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<!-- Expand/collapse section button -->
|
||||
<button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-1" aria-expanded="false">
|
||||
<span class="font-medium text-gray-900"> Color </span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<!--
|
||||
Expand/collapse icon, toggle classes based on section open state.
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
Heroicon name: solid/chevron-down
|
||||
|
||||
<% elsif @timelines.empty? %>
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
<!-- Filter section, show/hide based on section state. -->
|
||||
<div class="pt-6" id="filter-section-1">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-color-0" name="color[]" value="white" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-color-0" class="ml-3 text-sm text-gray-500"> White </label>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<% if false && @current_user_content.fetch('Timeline', []).count > 0 %>
|
||||
<div class="col s12 center">
|
||||
<%# render partial: 'content/components/list_filter_bar', locals: { content_type: Timeline } %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-color-1" name="color[]" value="beige" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-color-1" class="ml-3 text-sm text-gray-500"> Beige </label>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8 offset-m2">
|
||||
<div class="hoverable card center" style="margin: 20px 0 0 0; padding: 50px 0; border-bottom: 10px solid <%= Timeline.hex_color %>">
|
||||
<h4>
|
||||
You haven't created any timelines
|
||||
<% if @universe_scope %>
|
||||
in the <%= link_to @universe_scope.name, @universe_scope %> universe
|
||||
<% end %>
|
||||
<% if params.key?(:favorite_only) || params.key?(:slug) %>
|
||||
that match these filters
|
||||
<% end %>
|
||||
yet!
|
||||
</h4>
|
||||
<h1>
|
||||
<i class="material-icons <%= Timeline.text_color %>" style="font-size: 200%">
|
||||
<%= Timeline.icon %>
|
||||
</i>
|
||||
</h1>
|
||||
<p>
|
||||
<%= t("content_descriptions.timeline") %>
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-color-2" name="color[]" value="blue" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-color-2" class="ml-3 text-sm text-gray-500"> Blue </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if current_user.can_create?(Timeline) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: 'Timeline') %>
|
||||
<%= link_to "Create your first timeline", new_timeline_path(), class: "btn-large #{Timeline.color} darken-1" %>
|
||||
<% else %>
|
||||
<%= link_to "Upgrade to Premium to create your first timeline", subscription_path %>
|
||||
<% end %>
|
||||
<div class="border-t border-gray-200 px-4 py-6">
|
||||
<h3 class="-mx-2 -my-3 flow-root">
|
||||
<!-- Expand/collapse section button -->
|
||||
<button type="button" class="px-2 py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400" aria-controls="filter-section-2" aria-expanded="false">
|
||||
<span class="font-medium text-gray-900"> Sizes </span>
|
||||
<span class="ml-6 flex items-center">
|
||||
<!--
|
||||
Expand/collapse icon, toggle classes based on section open state.
|
||||
|
||||
<p class="grey-text text-lighten-2" style="padding-top: 20px;">
|
||||
<% 5.times { %><i class="material-icons"><%= Timeline.icon %></i> <%}%>
|
||||
</p>
|
||||
</div>
|
||||
Heroicon name: solid/chevron-down
|
||||
|
||||
Open: "-rotate-180", Closed: "rotate-0"
|
||||
-->
|
||||
<svg class="rotate-0 h-5 w-5 transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
<!-- Filter section, show/hide based on section state. -->
|
||||
<div class="pt-6" id="filter-section-2">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-sizes-0" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-sizes-0" class="ml-3 text-sm text-gray-500"> S </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-sizes-1" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-sizes-1" class="ml-3 text-sm text-gray-500"> M </label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input id="filter-mobile-sizes-2" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="filter-mobile-sizes-2" class="ml-3 text-sm text-gray-500"> L </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<% if @universe_scope %>
|
||||
<div class="col s12 m4 offset-m4">
|
||||
<div class="hoverable card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">
|
||||
Focus on another universe
|
||||
<!-- Filters -->
|
||||
<section aria-labelledby="filter-heading">
|
||||
<h2 id="filter-heading" class="sr-only">Filters</h2>
|
||||
|
||||
<div class="relative z-10 bg-white border-b border-gray-200 pb-4">
|
||||
<div class="max-w-7xl mx-auto px-4 flex items-center justify-between sm:px-6 lg:px-8">
|
||||
<div data-controller="dropdown" class="relative inline-block text-left">
|
||||
<div>
|
||||
<button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
Sort <%= chevron_down %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
|
||||
<div class="py-1" role="none">
|
||||
<!--
|
||||
Active: "bg-gray-100", Not Active: ""
|
||||
|
||||
Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
|
||||
-->
|
||||
<a href="#" data-action="dropdown#toggle" class="font-medium text-gray-900 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">Favorites First</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">Alphabetical</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Recently-edited</a>
|
||||
<a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Order created</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile filter dialog toggle, controls the 'mobileFiltersOpen' state. -->
|
||||
<button type="button" class="inline-block text-sm font-medium text-gray-700 hover:text-gray-900 sm:hidden">Filters</button>
|
||||
|
||||
<div class="hidden sm:block">
|
||||
<div class="flow-root">
|
||||
<div class="-mx-4 flex items-center divide-x divide-gray-200">
|
||||
<div data-controller="dropdown" class="px-4 relative inline-block text-left">
|
||||
<button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900 active:bg-white" aria-expanded="false">
|
||||
<span>Tagged</span>
|
||||
<span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-100 text-xs font-semibold text-gray-700 tabular-nums">
|
||||
<%= @filtered_page_tags.try(:count) || 0 %>
|
||||
</span>
|
||||
<%= chevron_down %>
|
||||
</button>
|
||||
|
||||
<div data-dropdown-target="menu" class="w-64 origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<form class="space-y-4">
|
||||
<% @page_tags.each do |page_tag| %>
|
||||
<div class="flex items-center">
|
||||
<input id="filter-tag-<%= page_tag.id %>" name="slug[]" <%= 'checked' if @filtered_page_tags.map(&:slug).include?(page_tag.slug) %> value="<%= page_tag.slug %>" type="checkbox" class="h-4 w-4 border-gray-300 rounded <%= @content_type_class.text_color %> focus:ring-notebook-blue">
|
||||
<label for="filter-tag-<%= page_tag.id %>" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"><%= page_tag.tag %></label>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @page_tags.any? %>
|
||||
<div class="flex text-right">
|
||||
<button data-action="dropdown#toggle" class="bg-notebook-blue hover:bg-blue-500 text-white rounded w-full px-2 py-1">
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="bg-blue-50 p-4">
|
||||
Add tags to your timelines to be able to filter them here.
|
||||
</div>
|
||||
<% end %>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active filters -->
|
||||
<% if @filtered_page_tags.any? %>
|
||||
<div class="bg-gray-100">
|
||||
<div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
|
||||
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
|
||||
Showing only timelines with <%= 'tag'.pluralize(@filtered_page_tags.count) %>
|
||||
<span class="sr-only">, active</span>
|
||||
</h3>
|
||||
|
||||
<div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
|
||||
|
||||
<div class="mt-2 sm:mt-0 sm:ml-4">
|
||||
<div class="-m-1 flex flex-wrap items-center">
|
||||
<% @filtered_page_tags.each do |page_tag| %>
|
||||
<span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
|
||||
<span><%= page_tag.tag %></span>
|
||||
<%= link_to(polymorphic_path(@content_type_class, { slug: params.fetch(:slug, []) - [page_tag.slug] })) do %>
|
||||
<button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
|
||||
<span class="sr-only">Remove filter for <%= page_tag.tag %></span>
|
||||
<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<p>
|
||||
You're currently focused on the
|
||||
<%= link_to @universe_scope.name, @universe_scope, class: Universe.color + '-text' %>
|
||||
universe and only seeing timelines in that
|
||||
universe.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
You can change what universe you're focused on by selecting a different one in the sidebar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<%# to be made into new card list partial? %>
|
||||
<% if @timelines.any? %>
|
||||
<div class="flex flex-wrap mb-32 container mx-auto">
|
||||
<% @timelines.each do |content| %>
|
||||
<div class="xl:w-1/4 md:w-1/2 p-2 group">
|
||||
<%= link_to edit_timeline_path(content) do %>
|
||||
<div class="bg-white hover:shadow-lg rounded-lg transition">
|
||||
<%= image_tag content.random_image_including_private(format: :small), class: 'h-64 rounded-t w-full object-cover object-center mb-6' %>
|
||||
<div class="pl-4 pb-1">
|
||||
<i class="material-icons float-right text-2xl mr-3">star_outline</i>
|
||||
<h3 class="tracking-widest <%= content.text_color %> text-xs uppercase font-medium title-font">
|
||||
<%= content.page_type %>
|
||||
</h3>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-4">
|
||||
<%= content.name %>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h4 class="grey-text center">About the timeline editor</h4>
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src="https://i.imgur.com/cCb5RBB.png">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Create and manage timelines for your worlds and stories in the new Notebook.ai Timeline Editor. When you get started, you'll have a blank timeline that you can
|
||||
add an unlimited number of events to. Each event can have a title, description, and notes — and you can link any of your worldbuilding pages to specific events.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Events can be reordered however you'd like and you can add custom time labels on each event, meaning you can be as specific or as vague as you'd like when creating your
|
||||
timeline. Perfect for getting a general timeline built and then coming back to make things more specific afterwards!
|
||||
</p>
|
||||
</div>
|
||||
<% if @timelines.empty? %>
|
||||
<div class="container mx-auto flex">
|
||||
<div class="w-1/2 text-center p-6">
|
||||
<button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<i class="material-icons text-6xl <%= @content_type_class.text_color %>">list</i>
|
||||
<div class="mt-2 block text-sm font-medium text-gray-900 mb-1">
|
||||
Customize your <%= @content_type_name.downcase %> page template
|
||||
</div>
|
||||
<span class="rounded bg-notebook-blue text-white px-2 py-1 text-xs">
|
||||
recommended before creating your first <%= @content_type_name.downcase %>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-1/2 text-center p-6">
|
||||
<button type="button" class="relative container mx-auto block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<i class="material-icons text-6xl <%= @content_type_class.text_color %>"><%= @content_type_class.icon %></i>
|
||||
<span class="mt-2 block text-sm font-medium text-gray-900">Create your first <%= @content_type_name.downcase %></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user