Show page counts on chapter cards

public/css/mango.css

@@ -5,8 +5,20 @@
 	padding: 20px;
 }
 .uk-card-media-top {
-	max-height: 350px;
+	height: 250px;
-	overflow: hidden;
+}
+@media (min-width: 600px) {
+.uk-card-media-top {
+	height: 300px;
+}
+}
+.uk-card-media-top > img {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+}
+.uk-card-title {
+	height: 3em;
 }
 .acard:hover {
 	text-decoration: none;

public/js/dots.js

@@ -0,0 +1,18 @@
+const truncate = () => {
+	$('.acard .uk-card-title').each((i, e) => {
+		$(e).dotdotdot({
+			truncate: 'letter',
+			watch: true,
+			callback: (truncated) => {
+				if (truncated) {
+					$(e).attr('uk-tooltip', $(e).attr('data-title'));
+				}
+				else {
+					$(e).removeAttr('uk-tooltip');
+				}
+			}
+		});
+	});
+};
+
+truncate();

public/js/theme.js

@@ -15,48 +15,20 @@ const toggleTheme = () => {
 	saveTheme(newTheme);
 };
 
-// https://stackoverflow.com/a/28344281
-const hasClass = (ele,cls) => {
-  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
-};
-const addClass = (ele,cls) => {
-  if (!hasClass(ele,cls)) ele.className += " "+cls;
-};
-const removeClass = (ele,cls) => {
-  if (hasClass(ele,cls)) {
-    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
-    ele.className=ele.className.replace(reg,' ');
-  }
-};
-
-const addClassToClass = (targetCls, newCls) => {
-	const elements = document.getElementsByClassName(targetCls);
-	for (let i = 0; i < elements.length; i++) {
-		addClass(elements[i], newCls);
-	}
-};
-
-const removeClassFromClass = (targetCls, newCls) => {
-	const elements = document.getElementsByClassName(targetCls);
-	for (let i = 0; i < elements.length; i++) {
-		removeClass(elements[i], newCls);
-	}
-};
-
 const setTheme = themeStr => {
 	if (themeStr === 'dark') {
-		document.getElementsByTagName('html')[0].style.background = 'rgb(20, 20, 20)';
+		$('html').css('background', 'rgb(20, 20, 20)');
-		addClass(document.getElementsByTagName('body')[0], 'uk-light');
+		$('body').addClass('uk-light');
-		addClassToClass('uk-card', 'uk-card-secondary');
+		$('.uk-card').addClass('uk-card-secondary');
-		removeClassFromClass('uk-card', 'uk-card-default');
+		$('.uk-card').removeClass('uk-card-default');
-		addClassToClass('ui-widget-content', 'dark');
+		$('.ui-widget-content').addClass('dark');
 	}
 	else {
-		document.getElementsByTagName('html')[0].style.background = '';
+		$('html').css('background', '');
-		removeClass(document.getElementsByTagName('body')[0], 'uk-light');
+		$('body').removeClass('uk-light');
-		removeClassFromClass('uk-card', 'uk-card-secondary');
+		$('.uk-card').removeClass('uk-card-secondary');
-		addClassToClass('uk-card', 'uk-card-default');
+		$('.uk-card').addClass('uk-card-default');
-		removeClassFromClass('ui-widget-content', 'dark');
+		$('.ui-widget-content').removeClass('dark');
 	}
 };
 
@@ -69,10 +41,3 @@ const styleModal = () => {
 
 // do it before document is ready to prevent the initial flash of white
 setTheme(getTheme());
-
-document.addEventListener('DOMContentLoaded', () => {
-	// because this script is attached at the top of HTML, the style on uk-card
-	// 	won't be applied because the elements are not available yet. We have to
-	// 	apply the theme again for it to take effect
-	setTheme(getTheme());
-}, false);

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.2.3
+version: 0.2.4
 
 authors:
   - Alex Ling <hkalexling@gmail.com>

src/library.cr

@@ -208,11 +208,11 @@ class Title
 		info = TitleInfo.new @dir
 		page = load_progress username, entry
 		entry_obj = @entries.find{|e| e.title == entry}
-		return 0 if entry_obj.nil?
+		return 0.0 if entry_obj.nil?
 		page / entry_obj.pages
 	end
 	def load_percetage(username)
-		return 0 if @entries.empty?
+		return 0.0 if @entries.empty?
 		read_pages = total_pages = 0
 		@entries.each do |e|
 			read_pages += load_progress username, e.title

src/mangadex/downloader.cr

@@ -249,6 +249,7 @@ module MangaDex
 
 	class Downloader
 		property stopped = false
+		@downloading = false
 
 		def initialize(@queue : Queue, @api : API, @library_path : String,
 					   @wait_seconds : Int32, @retries : Int32,
@@ -258,7 +259,7 @@ module MangaDex
 			spawn do
 				loop do
 					sleep 1.second
-					next if @stopped
+					next if @stopped || @downloading
 					begin
 						job = @queue.pop
 						next if job.nil?
@@ -271,7 +272,7 @@ module MangaDex
 		end
 
 		private def download(job : Job)
-			@stopped = true
+			@downloading = true
 			@queue.set_status JobStatus::Downloading, job
 			begin
 				chapter = @api.get_chapter(job.id)
@@ -281,7 +282,7 @@ module MangaDex
 				unless e.message.nil?
 					@queue.add_message e.message.not_nil!, job
 				end
-				@stopped = false
+				@downloading = false
 				return
 			end
 			@queue.set_pages chapter.pages.size, job
@@ -346,7 +347,7 @@ module MangaDex
 				else
 					@queue.set_status JobStatus::MissingPages, job
 				end
-				@stopped = false
+				@downloading = false
 			end
 		end
 

src/mango.cr

@@ -3,7 +3,7 @@ require "./context"
 require "./mangadex/*"
 require "option_parser"
 
-VERSION = "0.2.3"
+VERSION = "0.2.4"
 
 config_path = nil
 

src/routes/main.cr

@@ -33,6 +33,7 @@ class MainRouter < Router
 				env.redirect "/login"
 			end
 		end
+
 		get "/" do |env|
 			titles = @context.library.titles
 			username = get_username env
@@ -47,8 +48,6 @@ class MainRouter < Router
 				username = get_username env
 				percentage = title.entries.map { |e|
 					title.load_percetage username, e.title }
-				titles_percentage = title.titles.map { |t|
-					title.load_percetage username, t.title }
 				layout "title"
 			rescue e
 				@context.error e

src/views/index.ecr

@@ -27,16 +27,16 @@
         <div class="uk-card uk-card-default">
             <div class="uk-card-media-top">
 			<%- if t.entries.size > 0 -%>
-              <img src="<%= t.entries[0].cover_url %>" alt="">
+              <img data-src="<%= t.entries[0].cover_url %>" data-width data-height alt="" uk-img>
 			<%- else -%>
-              <img src="/img/icon.png" alt="">
+              <img data-src="/img/icon.png" data-width data-height alt="" uk-img>
 			<%- end -%>
             </div>
             <div class="uk-card-body">
 			<%- if t.entries.size > 0 -%>
               <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
 			<%- end -%>
-              <h3 class="uk-card-title break-word"><%= t.title %></h3>
+			<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
               <p><%= t.size %> entries</p>
             </div>
         </div>
@@ -46,6 +46,8 @@
 </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/search.js"></script>
 <script src="/js/sort-items.js"></script>
 <% end %>

src/views/layout.ecr

@@ -10,10 +10,11 @@
     <link rel="stylesheet" href="/css/mango.css" />
 	<script defer src="/js/fontawesome.min.js"></script>
 	<script defer src="/js/solid.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="/js/theme.js"></script>
   </head>
 
   <body>
-	<script src="/js/theme.js"></script>
     <div class="uk-offcanvas-content">
       <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
         <div id="mobile-nav" uk-offcanvas="overlay: true">
@@ -59,7 +60,9 @@
         <%= content %>
       </div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script>
+		setTheme(getTheme());
+	</script>
     <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
 

src/views/title.ecr

@@ -31,21 +31,18 @@
 </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="<%= titles_percentage[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 src="<%= t.entries[0].cover_url %>" alt="">
+              <img data-src="<%= t.entries[0].cover_url %>" data-width data-height alt="" uk-img>
 			<%- else -%>
-              <img src="/img/icon.png" alt="">
+              <img data-src="/img/icon.png" data-width data-height alt="" uk-img>
 			<%- end -%>
             </div>
             <div class="uk-card-body">
-			<%- if t.entries.size > 0 -%>
+			<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
-              <div class="uk-card-badge uk-label"><%= (titles_percentage[i] * 100).round(1) %>%</div>
-			<%- end -%>
-              <h3 class="uk-card-title break-word"><%= t.title %></h3>
               <p><%= t.size %> entries</p>
             </div>
         </div>
@@ -57,11 +54,12 @@
       <a class="acard">
 		  <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_title %>&quot;, &quot;<%= e.encoded_title %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
           <div class="uk-card-media-top">
-            <img src="<%= e.cover_url %>" alt="">
+            <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"><%= e.title %></h3>
+			<h3 class="uk-card-title break-word" data-title="<%= e.title.gsub("\"", "&quot;") %>"><%= e.title %></h3>
+              <p><%= e.pages %> pages</p>
           </div>
       </div>
       </a>
@@ -93,6 +91,8 @@
 </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>