app/views/timelines/index.html.erb
<%= 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>
<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>
<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>
<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 %>
</div>
<div class="clearfix"></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>
</div>
<% end %>
</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 %>
<br />
<br />
<br />
<br />
<% elsif @timelines.empty? %>
<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="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>
<% 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 %>
<p class="grey-text text-lighten-2" style="padding-top: 20px;">
<% 5.times { %><i class="material-icons"><%= Timeline.icon %></i> <%}%>
</p>
</div>
</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
</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 %>
</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>
</div>
</div>
</div>