Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-02 10:55:30 -04:00
Code Issues Projects Releases Wiki Activity

Only truncate visible titles to improve load time

Browse Source
This commit is contained in:
Alex Ling 2020-10-20 14:36:56 +00:00
parent 5760ad924e
commit 308ad4e063
5 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/js/dots.js
View File

@ -1,17 +1,26 @@
const truncate = () => { /**
$('.uk-card-title').each((i, e) => { * Truncate a .uk-card-title element
$(e).dotdotdot({ *
truncate: 'letter', * @function truncate
watch: true, * @param {object} e - The title element to truncate
callback: (truncated) => { */
if (truncated) { const truncate = (e) => {
$(e).attr('uk-tooltip', $(e).attr('data-title')); $(e).dotdotdot({
} else { truncate: 'letter',
$(e).removeAttr('uk-tooltip'); watch: true,
} callback: (truncated) => {
if (truncated) {
$(e).attr('uk-tooltip', $(e).attr('data-title'));
} else {
$(e).removeAttr('uk-tooltip');
} }
}); }
}); });
}; };
truncate(); $('.uk-card-title').each((i, e) => {
// Truncate the title when it first enters the view
$(e).one('inview', () => {
truncate(e);
});
});

3
src/views/components/dots-scripts.html.ecr Normal file
View File

@ -0,0 +1,3 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="<%= base_url %>js/dots.js"></script>

133
src/views/home.html.ecr
View File

@ -1,84 +1,83 @@
<%- if new_user && empty_library -%> <%- if new_user && empty_library -%>
<div class="uk-container uk-text-center"> <div class="uk-container uk-text-center">
<i class="fas fa-plus" style="font-size: 80px;"></i> <i class="fas fa-plus" style="font-size: 80px;"></i>
<h2>Add your first manga</h2> <h2>Add your first manga</h2>
<p style="margin-bottom: 40px;">We can't find any files yet. Add some to your library and they'll appear here.</p> <p style="margin-bottom: 40px;">We can't find any files yet. Add some to your library and they'll appear here.</p>
<dl class="uk-description-list"> <dl class="uk-description-list">
<dt style="font-weight: 500;">Current library path</dt> <dt style="font-weight: 500;">Current library path</dt>
<dd><code><%= Config.current.library_path %></code></dd> <dd><code><%= Config.current.library_path %></code></dd>
<dt style="font-weight: 500;">Want to change your library path?</dt> <dt style="font-weight: 500;">Want to change your library path?</dt>
<dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd> <dd>Update <code>config.yml</code> located at: <code><%= Config.current.path %></code></dd>
<dt style="font-weight: 500;">Can't see your files yet?</dt> <dt style="font-weight: 500;">Can't see your files yet?</dt>
<dd> <dd>
You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete You must wait <%= Config.current.scan_interval %> minutes for the library scan to complete
<% if is_admin %> <% if is_admin %>
, or manually re-scan from <a href="<%= base_url %>admin">Admin</a> , or manually re-scan from <a href="<%= base_url %>admin">Admin</a>
<% end %>. <% end %>.
</dd> </dd>
</dl> </dl>
</div> </div>
<%- elsif new_user && empty_library == false -%> <%- elsif new_user && empty_library == false -%>
<div class="uk-container uk-text-center"> <div class="uk-container uk-text-center">
<i class="fas fa-book-open" style="font-size: 80px;"></i> <i class="fas fa-book-open" style="font-size: 80px;"></i>
<h2>Read your first manga</h2> <h2>Read your first manga</h2>
<p>Once you start reading, Mango will remember where you left off <p>Once you start reading, Mango will remember where you left off
and show your entries here.</p> and show your entries here.</p>
<a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a> <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
</div> </div>
<%- elsif new_user == false && empty_library == false -%> <%- elsif new_user == false && empty_library == false -%>
<%- if continue_reading.empty? && recently_added.empty? -%> <%- if continue_reading.empty? && recently_added.empty? -%>
<div class="uk-container uk-text-center"> <div class="uk-container uk-text-center">
<img src="<%= base_url %>img/banner.png" style="max-width: 400px; padding: 0 20px;"> <img src="<%= base_url %>img/banner.png" style="max-width: 400px; padding: 0 20px;">
<p>A self-hosted manga server and reader</p> <p>A self-hosted manga server and reader</p>
<a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a> <a href="<%= base_url %>library" class="uk-button uk-button-default">View library</a>
</div> </div>
<%- end -%> <%- end -%>
<%- unless continue_reading.empty? -%> <%- unless continue_reading.empty? -%>
<h2 class="uk-title home-headings">Continue Reading</h2> <h2 class="uk-title home-headings">Continue Reading</h2>
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid> <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
<%- continue_reading.each do |cr| -%> <%- continue_reading.each do |cr| -%>
<% item = cr[:entry] %> <% item = cr[:entry] %>
<% progress = cr[:percentage] %> <% progress = cr[:percentage] %>
<%= render_component "card" %> <%= render_component "card" %>
<%- end -%> <%- end -%>
</div> </div>
<%- end -%> <%- end -%>
<%- unless start_reading.empty? -%> <%- unless start_reading.empty? -%>
<h2 class="uk-title home-headings">Start Reading</h2> <h2 class="uk-title home-headings">Start Reading</h2>
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid> <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
<%- start_reading.each do |t| -%> <%- start_reading.each do |t| -%>
<% item = t %> <% item = t %>
<% progress = 0.0 %> <% progress = 0.0 %>
<%= render_component "card" %> <%= render_component "card" %>
<%- end -%> <%- end -%>
</div> </div>
<%- end -%> <%- end -%>
<%- unless recently_added.empty? -%> <%- unless recently_added.empty? -%>
<h2 class="uk-title home-headings">Recently Added</h2> <h2 class="uk-title home-headings">Recently Added</h2>
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid> <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
<%- recently_added.each do |ra| -%> <%- recently_added.each do |ra| -%>
<% item = ra %> <% item = ra %>
<% progress = ra[:percentage] %> <% progress = ra[:percentage] %>
<%= render_component "card" %> <%= render_component "card" %>
<%- end -%> <%- end -%>
</div> </div>
<%- end -%> <%- end -%>
<%= render_component "entry-modal" %> <%= render_component "entry-modal" %>
<%- end -%> <%- end -%>
<% content_for "script" do %> <% content_for "script" do %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script> <%= render_component "dots-scripts" %>
<script src="<%= base_url %>js/dots.js"></script> <script src="<%= base_url %>js/alert.js"></script>
<script src="<%= base_url %>js/alert.js"></script> <script src="<%= base_url %>js/title.js"></script>
<script src="<%= base_url %>js/title.js"></script>
<% end %> <% end %>

3
src/views/library.html.ecr
View File

@ -24,8 +24,7 @@
</div> </div>
<% content_for "script" do %> <% content_for "script" do %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script> <%= render_component "dots-scripts" %>
<script src="<%= base_url %>js/dots.js"></script>
<script src="<%= base_url %>js/search.js"></script> <script src="<%= base_url %>js/search.js"></script>
<script src="<%= base_url %>js/sort-items.js"></script> <script src="<%= base_url %>js/sort-items.js"></script>
<% end %> <% end %>

3
src/views/title.html.ecr
View File

@ -117,8 +117,7 @@
</div> </div>
<% content_for "script" do %> <% content_for "script" do %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script> <%= render_component "dots-scripts" %>
<script src="<%= base_url %>js/dots.js"></script>
<script src="<%= base_url %>js/alert.js"></script> <script src="<%= base_url %>js/alert.js"></script>
<script src="<%= base_url %>js/title.js"></script> <script src="<%= base_url %>js/title.js"></script>
<script src="<%= base_url %>js/search.js"></script> <script src="<%= base_url %>js/search.js"></script>