From 4f1c7a977ba958b6def28b2ca42bcaef83286e4f Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Fri, 15 Mar 2019 13:54:02 +0300 Subject: code/layout cleanup --- css/index.css | 25 +++---- index.php | 228 ++++++++++++++++++++++++++-------------------------------- js/index.js | 18 ++++- js/offline.js | 34 ++++----- offline.html | 4 +- 5 files changed, 150 insertions(+), 159 deletions(-) diff --git a/css/index.css b/css/index.css index 92ef571..b1a200d 100644 --- a/css/index.css +++ b/css/index.css @@ -7,15 +7,21 @@ padding-top : 10px; } -.thumb img { - max-height : 180px; - max-width : 120px; - height : auto; - width : auto; - box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5); +.row .thumbnail { + height : 200px; + width : 140px; + margin-bottom : 0; } -.thumb.read img { +.row .thumbnail img { + width : 100%; + height : 100%; + background-size : cover; + background-position : center; + background-repeat: no-repeat; +} + +.row .thumbnail.read img { opacity : 0.5; filter : grayscale(100%); } @@ -30,11 +36,6 @@ white-space : nowrap; } -.qtip-custom, .book-summary { - max-height : 250px; - overflow : auto; -} - ::selection { background : #007d71; color : white; diff --git a/index.php b/index.php index f6541a8..49eb9f4 100644 --- a/index.php +++ b/index.php @@ -60,12 +60,12 @@ The Epube - + - - + + @@ -154,6 +154,7 @@ .html("Service worker support missing in browser (are you using plain HTTP?)."); } + show_covers(); mark_offline_books(); cache_refresh(); @@ -230,14 +231,19 @@ while ($line = $sth->fetch()) { ++$rows; - $cover_filename = BOOKS_DIR . "/" . $line["path"] . "/" . "cover.jpg"; + if ($line['has_cover']) { + $cover_filename = BOOKS_DIR . "/" . $line["path"] . "/" . "cover.jpg"; - if (file_exists($cover_filename)) - $cover_mtime = filemtime($cover_filename); - else - $cover_mtime = 0; + if (file_exists($cover_filename)) + $cover_mtime = filemtime($cover_filename); + else + $cover_mtime = 0; + + $cover_link = "backend.php?" . http_build_query(["op" => "cover", "id" => $line["id"], "ts" => $cover_mtime]); + } else { + $cover_link = "holder.js/120x180"; + } - $cover_link = "backend.php?" . http_build_query(["op" => "cover", "id" => $line["id"], "ts" => $cover_mtime]); $author_link = "?" . http_build_query(["query" => $line["author_sort"]]); $in_progress = false; @@ -263,129 +269,103 @@ $read_link = ""; } - $cover_read = $is_read ? "read" : ""; - - print "
"; - print "
"; - - if ($read_link) print ""; - - if ($line["has_cover"]) { - print ""; - } else { - print ""; - } - - if ($read_link) print ""; - - print "
"; - + $cover_class = $is_read ? "read" : ""; $title_class = $in_progress ? "in_progress" : ""; - print "
"; - - if ($read_link) { - print "" . $line["title"] . ""; - } else { - print $line["title"]; - } - - print "
"; - if ($line["series_name"]) { $series_link = "?" . http_build_query(["query" => $line["series_name"]]); $series_full = $line["series_name"] . " [" . $line["series_index"] . "]"; - - print "
$series_full
"; + } else { + $series_link = ""; + $series_full = ""; } - print "
" . $line["author_sort"] . "
"; - $data_sth = $db->prepare("SELECT * FROM data WHERE book = ? LIMIT 3"); $data_sth->execute([$line['id']]); - /*print " - - ";*/ - - print "
"; - ?> - - - "; - print "
"; - - } - - ?> +
"> + + +
+ +
+ +
+ +
+
+ + + + + +
+ +
+
+ +
" href=""> +
+ +
+ + +
+
@@ -407,12 +387,6 @@ - - - - diff --git a/js/index.js b/js/index.js index a16dd44..5bafdca 100644 --- a/js/index.js +++ b/js/index.js @@ -91,6 +91,22 @@ function mark_offline_books() { }); } +/* exported show_covers */ +function show_covers() { + $("img[data-cover-link]").each((i,e) => { + e = $(e); + + const img = $("") + .on("load", function() { + e.css("background-image", "url(" + e.attr('data-cover-link') + ")") + e.fadeIn(); + + img.attr("src", null); + }) + .attr("src", e.attr('data-cover-link')); + }); +} + function offline_cache(bookId, callback) { console.log("offline cache: " + bookId); @@ -187,7 +203,7 @@ function offline_get_all() { if (confirm("Download all books on this page?")) { - $(".index_cell").each(function (i, row) { + $(".row > div").each(function (i, row) { const bookId = $(row).attr("id").replace("cell-", ""); const dropitem = $(row).find(".offline_dropitem")[0]; diff --git a/js/offline.js b/js/offline.js index c47c7b6..afde6b5 100644 --- a/js/offline.js +++ b/js/offline.js @@ -98,29 +98,31 @@ function populate_list() { const series_link = info.series_name ? `
${info.series_name + " [" + info.series_index + "]"}
` : ""; - const cell = $(`
-
+ const cell = $(`
+ +
+ + + ${series_link} +
+
`); if (cover) { - cell.find("img").attr("src", cover); + cell.find("img") + .css("background-image", "url(" + cover + ")") + .fadeIn(); cell.find(".series_link") .attr("title", info.series_name + " [" + info.series_index + "]") diff --git a/offline.html b/offline.html index da10939..9888b9a 100644 --- a/offline.html +++ b/offline.html @@ -103,9 +103,7 @@
- - -
+
-- cgit v1.2.3