diff options
-rw-r--r-- | css/index.css | 25 | ||||
-rw-r--r-- | index.php | 228 | ||||
-rw-r--r-- | js/index.js | 18 | ||||
-rw-r--r-- | js/offline.js | 34 | ||||
-rw-r--r-- | 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; @@ -60,12 +60,12 @@ <script src="lib/holder.min.js"></script> <script src="lib/localforage.min.js"></script> <title>The Epube</title> - <link type="text/css" rel="stylesheet" media="screen" href="css/index.css" /> + <link type="text/css" rel="stylesheet" media="screen" href="css/index.css?<?php echo time() ?>" /> <link rel="shortcut icon" type="image/png" href="img/favicon.png" /> <link rel="manifest" href="manifest.json"> <meta name="mobile-web-app-capable" content="yes"> - <script src="js/index.js"></script> - <script src="js/common.js"></script> + <script src="js/index.js?<?php echo time() ?>"></script> + <script src="js/common.js?<?php echo time() ?>"></script> </head> <body> @@ -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 "<div class='col-xs-6 col-sm-3 col-md-2 index_cell' id=\"cell-".$line["id"]."\">"; - print "<div class=\"thumb $cover_read\">"; - - if ($read_link) print "<a href=\"$read_link\">"; - - if ($line["has_cover"]) { - print "<img data-book-id='".$line["id"]."' src='$cover_link'>"; - } else { - print "<img data-book-id='".$line["id"]."' data-src='holder.js/120x180'>"; - } - - if ($read_link) print "</a>"; - - print "<div class='caption'>"; - + $cover_class = $is_read ? "read" : ""; $title_class = $in_progress ? "in_progress" : ""; - print "<div title=\"".htmlspecialchars($line["title"])."\" class=\"$title_class\">"; - - if ($read_link) { - print "<a href=\"$read_link\">" . $line["title"] . "</a>"; - } else { - print $line["title"]; - } - - print "</div>"; - if ($line["series_name"]) { $series_link = "?" . http_build_query(["query" => $line["series_name"]]); $series_full = $line["series_name"] . " [" . $line["series_index"] . "]"; - - print "<div><a title=\"".htmlspecialchars($series_full)."\" - href=\"$series_link\">$series_full</a></div>"; + } else { + $series_link = ""; + $series_full = ""; } - print "<div><a title=\"".htmlspecialchars($line["author_sort"])."\" - href=\"$author_link\">" . $line["author_sort"] . "</a></div>"; - $data_sth = $db->prepare("SELECT * FROM data WHERE book = ? LIMIT 3"); $data_sth->execute([$line['id']]); - /*print "<span class=\"label label-default\"> - <span class=\"glyphicon glyphicon-download-alt\"> - </span>";*/ - - print "</div>"; - ?> - <div class="dropdown" style="white-space : nowrap"> - <a href="#" data-toggle="dropdown" role="button"> - More... - <span class="caret"></span> - </a> - - <ul class="dropdown-menu" aria-labelledby="dLabel"> - - <!-- <?php if ($line["series_name"]) { - $series_link = "?" . http_build_query(["query" => $line["series_name"]]); - $series_full = $line["series_name"] . " [" . $line["series_index"] . "]"; - - print "<li><a title=\"".htmlspecialchars($series_full)."\" - href=\"$series_link\">$series_full</a></li>"; - } - ?> --> - - <?php - - $fav_sth = $ldb->prepare("SELECT id FROM epube_favorites - WHERE bookid = ? AND owner = ? LIMIT 1"); - $fav_sth->execute([$line['id'], $owner]); - - $found_id = false; - - while ($fav_line = $fav_sth->fetch()) { - $found_id = $fav_line["id"]; - } - - if ($found_id) { - $toggle_fav_prompt = "Remove from favorites"; - $fav_attr = "1"; - } else { - $toggle_fav_prompt = "Add to favorites"; - $fav_attr = "0"; - } - ?> - - <li><a href="#" onclick="return show_summary(this)" - data-book-id="<?php echo $line["id"] ?>">Summary</a></li> - - <li><a href="#" onclick="return toggle_fav(this)" - data-is-fav="<?php echo $fav_attr ?>" - class="fav_item" data-book-id="<?php echo $line["id"] ?>"> - <?php echo $toggle_fav_prompt ?></a></li> - - <?php if ($line["epub_id"]) { ?> - <li><a href="#" onclick="" - data-book-id="<?php echo $line["id"] ?>" class="offline_dropitem"></a></li> - <li class="divider"></li> - <?php } ?> - - <?php while ($data_line = $data_sth->fetch()) { - if ($data_line["format"] != "ORIGINAL_EPUB") { - $label_class = $data_line["format"] == "EPUB" ? "label-success" : "label-primary"; - - $download_link = "backend.php?op=download&id=" . $data_line["id"]; - - print "<li><a target=\"_blank\" href=\"$download_link\">Download: <span class=\"label $label_class\">" . - $data_line["format"] . "</span></a></li>"; - } - } ?> - </ul> - </div> - - <?php - - print "</div>"; - print "</div>"; - - } - - ?> + <div class='col-xs-6 col-sm-3 col-md-2' id="cell-<?php echo $line["id"] ?>"> + <?php if ($read_link) { ?> <a href="<?php echo $read_link ?>"> <?php } ?> + + <div class="thumbnail <?php echo $cover_class ?>"> + <img style="display : none" data-book-id="<?php echo $line['id'] ?>" data-cover-link="<?php echo $cover_link ?>"> + </div> + + <?php if ($read_link) { ?> </a> <?php } ?> + + <div class="caption"> + <div title="<?php echo htmlspecialchars($line['title']) ?>" class="<?php echo $title_class ?>"> + <?php if ($read_link) { ?> + <a href="<?php echo $read_link ?>"><?php echo $line['title'] ?></a> + <?php } else { ?> + <?php echo $line['title'] ?> + <?php } ?> + </div> + + <div><a title="<?php echo htmlspecialchars($series_full) ?>" href="<?php echo $series_link ?>"> + <?php echo $series_full ?></a></div> + + <div><a title="<?php echo htmlspecialchars($line["author_sort"]) ?>" href="<?php echo $author_link ?>"> + <?php echo $line["author_sort"] ?></a></div> + + </div> + + <div class="dropdown" style="white-space : nowrap"> + <a href="#" data-toggle="dropdown" role="button"> + More... + <span class="caret"></span> + </a> + + <ul class="dropdown-menu" aria-labelledby="dLabel"> + <?php + + $fav_sth = $ldb->prepare("SELECT id FROM epube_favorites + WHERE bookid = ? AND owner = ? LIMIT 1"); + $fav_sth->execute([$line['id'], $owner]); + + $found_id = false; + + while ($fav_line = $fav_sth->fetch()) { + $found_id = $fav_line["id"]; + } + + if ($found_id) { + $toggle_fav_prompt = "Remove from favorites"; + $fav_attr = "1"; + } else { + $toggle_fav_prompt = "Add to favorites"; + $fav_attr = "0"; + } + ?> + + <li><a href="#" onclick="return show_summary(this)" + data-book-id="<?php echo $line["id"] ?>">Summary</a></li> + + <li><a href="#" onclick="return toggle_fav(this)" + data-is-fav="<?php echo $fav_attr ?>" + class="fav_item" data-book-id="<?php echo $line["id"] ?>"> + <?php echo $toggle_fav_prompt ?></a></li> + + <?php if ($line["epub_id"]) { ?> + <li><a href="#" onclick="" + data-book-id="<?php echo $line["id"] ?>" class="offline_dropitem"></a></li> + <li class="divider"></li> + <?php } ?> + + <?php while ($data_line = $data_sth->fetch()) { + if ($data_line["format"] != "ORIGINAL_EPUB") { + $label_class = $data_line["format"] == "EPUB" ? "label-success" : "label-primary"; + + $download_link = "backend.php?op=download&id=" . $data_line["id"]; + + print "<li><a target=\"_blank\" href=\"$download_link\">Download: <span class=\"label $label_class\">" . + $data_line["format"] . "</span></a></li>"; + } + } ?> + </ul> + </div> + </div> + <?php } /* while */ ?> </div> @@ -407,12 +387,6 @@ <li class="next disabled"><a href="#">Next→</a></li> <?php } ?> </ul> - - <!-- <p class="text-center small"> - <a class="text-muted" href="#" onclick="return cache_refresh(true)">Refresh cache</a> - </p> --> - - </div> </body> </html> 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 = $("<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 ? `<div><a class="series_link" href="#">${info.series_name + " [" + info.series_index + "]"}</a></div>` : ""; - const cell = $(`<div class="col-xs-6 col-sm-3 col-md-2 index_cell" id="cell-${info.id}"> - <div class="thumb ${thumb_class}"> + const cell = $(`<div class="col-xs-6 col-sm-3 col-md-2" id="cell-${info.id}"> + <div class="thumbnail ${thumb_class}"> <a href="read.html?id=${info.epub_id}&b=${info.id}"> - <img data-src="holder.js/120x180"> + <img style="display : none"> </a> - <div class="caption"> - <div><a class="${title_class}" href="read.html?id=${info.epub_id}&b=${info.id}">${info.title}</a></div> - <div><a class="author_link" href="#">${info.author_sort}</a></div> - ${series_link} - </div> - <div class="dropdown" style="white-space : nowrap"> - <a href="#" data-toggle="dropdown" role="button">More...<span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#" data-book-id="${info.id}" onclick="return show_summary(this)">Summary</a></li> - <li><a href="#" data-book-id="${info.id}" onclick="offline_remove2(this)">Remove offline data</a></li> - </ul> - </div> + </div> + <div class="caption"> + <div><a class="${title_class}" href="read.html?id=${info.epub_id}&b=${info.id}">${info.title}</a></div> + <div><a class="author_link" href="#">${info.author_sort}</a></div> + ${series_link} + </div> + <div class="dropdown" style="white-space : nowrap"> + <a href="#" data-toggle="dropdown" role="button">More...<span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#" data-book-id="${info.id}" onclick="return show_summary(this)">Summary</a></li> + <li><a href="#" data-book-id="${info.id}" onclick="offline_remove2(this)">Remove offline data</a></li> + </ul> </div> </div>`); 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 @@ </div> </div> </div> - - - <div class="row" id="books_container"> </div> + <div class="row display-flex" id="books_container"> </div> </div> </body> </html> |