Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-03 11:25:29 -04:00
Code Issues Projects Releases Wiki Activity

Reduce card font size and link to the title pages

Browse Source 
(#84)
This commit is contained in:
Alex Ling 2020-07-04 08:50:13 +00:00
parent f9ca52ee2f
commit 4d5a305d1b
5 changed files with 115 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
public/css/mango.css
View File

@ -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;
}

5
public/js/dots.js
View File

@ -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');
}
}

15
public/js/sort-items.js
View File

@ -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(() => {

21
public/js/title.js
View File

@ -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);

34
src/views/components/card.html.ecr
View File

@ -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 %>