From 4d5a305d1b396efce0171b8ff55f8e22564dcac3 Mon Sep 17 00:00:00 2001 From: Alex Ling Date: Sat, 4 Jul 2020 08:50:13 +0000 Subject: [PATCH] Reduce card font size and link to the title pages (#84) --- public/css/mango.css | 93 +++++++++++++++++++----------- public/js/dots.js | 5 +- public/js/sort-items.js | 15 ++--- public/js/title.js | 21 +++++++ src/views/components/card.html.ecr | 34 ++++++++--- 5 files changed, 115 insertions(+), 53 deletions(-) diff --git a/public/css/mango.css b/public/css/mango.css index a513a4d0..1cac92b3 100644 --- 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 index 0db2d3f2..75a6aa68 100644 --- 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 index cd120150..600f2042 100644 --- 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 index 62119230..44a83dc4 100644 --- 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 index 64e6a136..7875dc71 100644 --- a/src/views/components/card.html.ecr +++ b/src/views/components/card.html.ecr @@ -14,16 +14,24 @@ id="<%= item.id %>" <% end %>> - + + <% 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 %>> -
- onclick="showModal("<%= item.encoded_path %>", '<%= item.pages %>', <%= (progress * 100).round(1) %>, "<%= item.book.encoded_display_name %>", "<%= item.encoded_display_name %>", '<%= item.title_id %>', '<%= item.id %>')" - <% end %>> - +
@@ -33,9 +41,17 @@
<%= (progress * 100).round(1) %>%
<% end %> -

"><%= item.display_name %>

+

+ <%= "uk-margin-remove-bottom" %> + <% end %> + " data-title="<%= item.display_name.gsub("\"", """) %>"><%= item.display_name %> +

+ <% if page == "home" && item.is_a? Entry %> + " href="<%= base_url %>book/<%= item.book.id %>"><%= item.book.display_name %> + <% end %> <% if item.is_a? Entry %> -

<%= item.pages %> pages

+

<%= item.pages %> pages

<% end %> <% if item.is_a? Title %> <% if grouped_count == 1 %>