mirror of
https://github.com/hkalexling/Mango.git
synced 2026-03-20 00:00:48 -04:00
100 lines
4.1 KiB
Plaintext
100 lines
4.1 KiB
Plaintext
<h2 class=uk-title><%= title.title %></h2>
|
|
<ul class="uk-breadcrumb">
|
|
<li><a href="/">Library</a></li>
|
|
<%- title.parents.each do |t| -%>
|
|
<li><a href="/book/<%= t.id %>"><%= t.title %></a></li>
|
|
<%- end -%>
|
|
<li class="uk-disabled"><a><%= title.title %></a></li>
|
|
</ul>
|
|
<p class="uk-text-meta"><%= title.size %> entries found</p>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-margin-bottom uk-width-3-4@s">
|
|
<form class="uk-search uk-search-default">
|
|
<span uk-search-icon></span>
|
|
<input class="uk-search-input" type="search" placeholder="Search">
|
|
</form>
|
|
</div>
|
|
<div class="uk-margin-bottom uk-width-1-4@s">
|
|
<div class="uk-form-horizontal">
|
|
<select class="uk-select" id="sort-select">
|
|
<option id="auto-up">▲ Auto</option>
|
|
<option id="auto-down">▼ Auto</option>
|
|
<option id="name-up">▲ Name</option>
|
|
<option id="name-down">▼ Name</option>
|
|
<option id="date-up">▲ Date Modified</option>
|
|
<option id="date-down">▼ Date Modified</option>
|
|
<option id="progress-up">▲ Progress</option>
|
|
<option id="progress-down">▼ Progress</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
|
|
<%- title.titles.each_with_index do |t, i| -%>
|
|
<div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="0.0">
|
|
<a class="acard" href="/book/<%= t.id %>">
|
|
<div class="uk-card uk-card-default">
|
|
<div class="uk-card-media-top">
|
|
<%- if t.entries.size > 0 -%>
|
|
<img data-src="<%= t.entries[0].cover_url %>" data-width data-height alt="" uk-img>
|
|
<%- else -%>
|
|
<img data-src="/img/icon.png" data-width data-height alt="" uk-img>
|
|
<%- end -%>
|
|
</div>
|
|
<div class="uk-card-body">
|
|
<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", """) %>"><%= t.title %></h3>
|
|
<p><%= t.size %> entries</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<%- end -%>
|
|
<%- title.entries.each_with_index do |e, i| -%>
|
|
<div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>">
|
|
<a class="acard">
|
|
<div class="uk-card uk-card-default" onclick="showModal("<%= e.encoded_path %>", '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, "<%= title.encoded_title %>", "<%= e.encoded_title %>", '<%= e.title_id %>', '<%= e.id %>')">
|
|
<div class="uk-card-media-top">
|
|
<img data-src="<%= e.cover_url %>" alt="" data-width data-height uk-img>
|
|
</div>
|
|
<div class="uk-card-body">
|
|
<div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
|
|
<h3 class="uk-card-title break-word" data-title="<%= e.title.gsub("\"", """) %>"><%= e.title %></h3>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<%- end -%>
|
|
</div>
|
|
|
|
<div id="modal" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-margin-auto-vertical">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h3 class="uk-modal-title break-word" id="modal-title"></h3>
|
|
<p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
|
|
<p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<p>Read</p>
|
|
<p uk-margin>
|
|
<a id="beginning-btn" class="uk-button uk-button-default">From beginning</a>
|
|
<a id="continue-btn" class="uk-button uk-button-primary"></a>
|
|
</p>
|
|
<p>Progress</p>
|
|
<p uk-margin>
|
|
<button id="read-btn" class="uk-button uk-button-default">Mark as read (100%)</button>
|
|
<button id="unread-btn" class="uk-button uk-button-default">Mark as unread (0%)</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% content_for "script" do %>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
|
|
<script src="/js/dots.js"></script>
|
|
<script src="/js/alert.js"></script>
|
|
<script src="/js/title.js"></script>
|
|
<script src="/js/search.js"></script>
|
|
<script src="/js/sort-items.js"></script>
|
|
<% end %>
|