Reduce card font size and link to the title pages

(#84)
getmango · Jul 4, 2020 · 4d5a305 · 4d5a305
1 parent f9ca52e
commit 4d5a305
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 53 deletions.
diff --git a/public/css/mango.css b/public/css/mango.css
@@ -1,74 +1,99 @@
 .uk-alert-close {
-	color: black !important;
+    color: black !important;
 }
+
 .uk-card-body {
-	padding: 20px;
+    padding: 20px;
 }
+
 .uk-card-media-top {
-	height: 250px;
+    height: 250px;
 }
+
 @media (min-width: 600px) {
-.uk-card-media-top {
-	height: 300px;
-}
+    .uk-card-media-top {
+        height: 300px;
+    }
 }
-.uk-card-media-top > img {
-	height: 100%;
-	width: 100%;
-	object-fit: cover;
+
+.uk-card-media-top>img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
 }
+
 .uk-card-title {
-	height: 3em;
+    max-height: 3em;
 }
+
 .acard:hover {
-	text-decoration: none;
+    text-decoration: none;
 }
+
 .uk-list li {
-	cursor: pointer;
+    cursor: pointer;
 }
+
 .reader-bg {
-	background-color: black;
+    background-color: black;
 }
+
 #scan-status {
-	cursor: auto;
+    cursor: auto;
 }
+
 .break-word {
-	word-wrap: break-word;
+    word-wrap: break-word;
 }
-.uk-logo > img {
-	height: 90px;
-	width: 90px;
+
+.uk-logo>img {
+    height: 90px;
+    width: 90px;
 }
+
 .uk-search {
-	width: 100%;
+    width: 100%;
 }
+
 #selectable .ui-selecting {
-	background: #EEE6B9;
+    background: #EEE6B9;
 }
+
 #selectable .ui-selected {
-	background: #F4E487;
+    background: #F4E487;
 }
+
 #selectable .ui-selecting.dark {
-	background: #5E5731;
+    background: #5E5731;
 }
+
 #selectable .ui-selected.dark {
-	background: #9D9252;
+    background: #9D9252;
 }
-td > .uk-dropdown {
-	white-space: pre-line;
+
+td>.uk-dropdown {
+    white-space: pre-line;
 }
-#edit-modal .uk-grid > div {
-	height: 300px;
+
+#edit-modal .uk-grid>div {
+    height: 300px;
 }
+
 #edit-modal #cover {
-	height: 100%;
-	width: 100%;
-	object-fit: cover;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
 }
+
 #edit-modal #cover-upload {
-	height: 100%;
-	box-sizing: border-box;
+    height: 100%;
+    box-sizing: border-box;
 }
+
 #edit-modal .uk-modal-body .uk-inline {
-	width: 100%;
+    width: 100%;
+}
+
+.item .uk-card-title {
+    font-size: 1rem;
 }
diff --git a/public/js/dots.js b/public/js/dots.js
@@ -1,13 +1,12 @@
 const truncate = () => {
-	$('.acard .uk-card-title').each((i, e) => {
+	$('.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 {
+				} else {
 					$(e).removeAttr('uk-tooltip');
 				}
 			}

diff --git a/public/js/sort-items.js b/public/js/sort-items.js
@@ -25,20 +25,21 @@ $(() => {
 
 					if (!keyRange[key]) {
 						keyRange[key] = [num, num, 1];
-					}
-					else {
+					} else {
 						keyRange[key][2] += 1;
 						if (num < keyRange[key][0]) {
 							keyRange[key][0] = num;
-						}
-						else if (num > keyRange[key][1]) {
+						} else if (num > keyRange[key][1]) {
 							keyRange[key][1] = num;
 						}
 					}
 
 					match = regex.exec(name);
 				}
-				ctxAry.push({index: i, numbers: numbers});
+				ctxAry.push({
+					index: i,
+					numbers: numbers
+				});
 			});
 
 			console.log(keyRange);
@@ -84,8 +85,7 @@ $(() => {
 			if (dir === 'down') {
 				items.reverse();
 			}
-		}
-		else {
+		} else {
 			items.sort((a, b) => {
 				var res;
 				if (by === 'name')
@@ -108,6 +108,7 @@ $(() => {
 			});
 		}
 		$('#item-container').append(items);
+		setupAcard();
 	};
 
 	$('#sort-select').change(() => {

diff --git a/public/js/title.js b/public/js/title.js
@@ -1,3 +1,24 @@
+$(() => {
+	setupAcard();
+});
+
+const setupAcard = () => {
+	$('.acard.is_entry').click((e) => {
+		if ($(e.target).hasClass('no-modal')) return;
+		const card = $(e.target).closest('.acard');
+
+		showModal(
+			$(card).attr('data-encoded-path'),
+			parseInt($(card).attr('data-pages')),
+			parseFloat($(card).attr('data-progress')),
+			$(card).attr('data-encoded-book-title'),
+			$(card).attr('data-encoded-title'),
+			$(card).attr('data-book-id'),
+			$(card).attr('data-id')
+		);
+	});
+};
+
 function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTitle, titleID, entryID) {
 	const zipPath = decodeURIComponent(encodedPath);
 	const title = decodeURIComponent(encodedeTitle);

diff --git a/src/views/components/card.html.ecr b/src/views/components/card.html.ecr
@@ -14,16 +14,24 @@
     id="<%= item.id %>"
   <% end %>>
 
-  <a class="acard" 
-    <% unless item.is_a? Entry %> 
+  <a class="acard
+    <% if item.is_a? Entry %>
+      <%= "is_entry" %>
+    <% end %>
+    " 
+    <% if item.is_a? Entry %>
+      data-encoded-path="<%= item.encoded_path %>"
+      data-pages="<%= item.pages %>"
+      data-progress="<%= (progress * 100).round(1) %>"
+      data-encoded-book-title="<%= item.book.encoded_display_name %>"
+      data-encoded-title="<%= item.encoded_display_name %>"
+      data-book-id="<%= item.book.id %>"
+      data-id="<%= item.id %>"
+    <% else %>
       href="<%= base_url %>book/<%= item.id %>" 
     <% end %>>
 
-    <div class="uk-card uk-card-default" 
-      <% if item.is_a? Entry %> 
-        onclick="showModal(&quot;<%= item.encoded_path %>&quot;, '<%= item.pages %>', <%= (progress * 100).round(1) %>, &quot;<%= item.book.encoded_display_name %>&quot;, &quot;<%= item.encoded_display_name %>&quot;, '<%= item.title_id %>', '<%= item.id %>')" 
-      <% end %>>
-
+    <div class="uk-card uk-card-default">
       <div class="uk-card-media-top">
         <img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img>
       </div>
@@ -33,9 +41,17 @@
           <div class="uk-card-badge label"><%= (progress * 100).round(1) %>%</div>
         <% end %>
 
-        <h3 class="uk-card-title break-word" data-title="<%= item.display_name.gsub("\"", "&quot;") %>"><%= item.display_name %></h3>
+        <h3 class="uk-card-title break-word
+          <% if page == "home" && item.is_a? Entry %>
+            <%= "uk-margin-remove-bottom" %>
+          <% end %>
+          " data-title="<%= item.display_name.gsub("\"", "&quot;") %>"><%= item.display_name %>
+        </h3>
+        <% if page == "home" && item.is_a? Entry %>
+          <a class="uk-card-title break-word uk-margin-remove-top uk-text-meta uk-display-inline-block no-modal" data-title="<%= item.book.display_name.gsub("\"", "&quot;") %>" href="<%= base_url %>book/<%= item.book.id %>"><%= item.book.display_name %></a>
+        <% end %>
         <% if item.is_a? Entry %>
-          <p><%= item.pages %> pages</p>
+          <p class="uk-text-meta"><%= item.pages %> pages</p>
         <% end %>
         <% if item.is_a? Title %>
           <% if grouped_count == 1 %>