Skip to content

Instantly share code, notes, and snippets.

@tdack
Created Nov 12, 2013
Embed
What would you like to do?
Tweaks to calibre-content server browse view. Displays book list as covers. Add the css rules as described and patch browse.html and browse.js in /usr/share/calibre/content_server/browse/ Then restart the content server to see the changes. Result should be like https://plus.google.com/u/0/photos/+TroyDack/albums/5763024133998901281/5945519253353…
/*
Add these css rules to the end of /usr/share/calibre/content_server/browse/browse.css
Place them just before the final }}}
*/
#booklist .listnav {
padding-bottom: 1em;
}
#booklist .listnav a {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
border: 1px solid #cdc3b7;
background: #ede4d4 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_70_ede4d4_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #3f3731;
padding: 5px;
border-radius:6px;
padding-left: 10px;
padding-right: 10px;
margin-left: 0px;
margin-right: 0px;
}
#booklist .listnav a:hover {
border: 1px solid #f5ad66;
background: #f5f0e5 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_100_f5f0e5_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #a46313;
}
#booklist .listnav .navmiddle a {
margin-right: 0.5em;
}
--- browse.html 2013-11-13 10:21:54.638417491 +1100
+++ browse.html.new 2013-11-13 10:22:36.589977908 +1100
@@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=100" />
<link rel="icon" type="image/x-icon" href="http://calibre-ebook.com/favicon.ico" />
- <link rel="stylesheet" type="text/css" href="{prefix}/static/browse/browse.css" />
+ <link class="browse" rel="stylesheet" type="text/css" href="{prefix}/static/browse/browse.css" />
<link type="text/css" href="{prefix}/static/jquery_ui/css/humanity-custom/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{prefix}/static/jquery.multiselect.css" />
<link rel="apple-touch-icon" href="{prefix}/static/calibre.png" />
@@ -47,9 +47,9 @@
</div>
<div id="nav-container">&nbsp;
<ul id="primary-nav">
+ <li><a class="view-switch" href="#" title="Display books in a list view" rel="{prefix}/static/browse/browse.css">List</a></li>
+ <li><a class="view-switch" href="#" title="Display books as a cover grid view" rel="{prefix}/static/browse/cover.css">Cover</a></li>
<li><a id="nav-mobile" href="{prefix}/mobile" title="A version of this website suited for mobile browsers">Mobile</a></li>
- <li><a id="nav-demo" href="{prefix}/old" title="The old version of this webiste">Old</a></li>
- <li><a id="nav-download" href="{prefix}/opds" title="An OPDS feed based version of this website, used in special purpose applications">Feed</a></li>
</ul>
</div>
--- browse.js 2013-11-13 10:24:15.500942050 +1100
+++ browse.js.new 2013-11-13 10:23:51.793190325 +1100
@@ -101,6 +101,15 @@
init_sort_combobox();
$("#search_box input:submit").button();
+
+ if (cookie("css")) {
+ $("link.browse").attr("href",cookie("css"));
+ }
+
+ $("#primary-nav .view-switch").click(function() {
+ $("link.browse").attr("href",$(this).attr('rel'));
+ cookie("css", $(this).attr('rel'), {expires: 365, path: '/'});
+ });
}
// Top-level feed {{{
/*
Copy /usr/share/calibre/content_server/browse/browse.css to cover.css in the same directory
Place the following css rules at the end of cover.css
Place them just before the final }}}
*/
.loaded {
text-align: center;
vertical-align: top;
}
#booklist .summary {
border: 1px solid black;
border-radius: 10px;
display:inline-block;
text-align: center;
width: 187px;
height:315px;
vertical-align: top;
box-shadow: 2px 2px 3px #aaaaaa;
}
#booklist .summary:hover {
background-color: lightgoldenrodyellow;
}
#booklist div.left {
float: none;
margin-left:1em;
margin-right: 1em;
height: 180px;
width: 170px;
margin-top: 1em;
}
#booklist a.summary_thumb img {
box-shadow: 3px 3px 5px #474747;
}
#booklist div.right {
height:auto;
margin-bottom: 1em;
}
#booklist div.right .stars {
margin-left: 1em;
}
#booklist div.right .stars a:nth-of-type(1){
width: 7em;
display: inline-block;
}
#booklist div.right .stars a:nth-of-type(2){
display: none;
}
#booklist div.right .stars .series {
font-size: small;
margin-left: -16px;
margin-right: -16px;
}
#booklist .title {
font-size: medium;
word-wrap: normal;
}
#booklist .listnav {
padding-bottom: 1em;
}
#booklist .listnav a {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
border: 1px solid #cdc3b7;
background: #ede4d4 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_70_ede4d4_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #3f3731;
padding: 5px;
border-radius:6px;
padding-left: 10px;
padding-right: 10px;
margin-left: 0px;
margin-right: 0px;
}
#booklist .listnav a:hover {
border: 1px solid #f5ad66;
background: #f5f0e5 url(../jquery_ui/css/humanity-custom/images/ui-bg_glass_100_f5f0e5_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #a46313;
}
#booklist .listnav .navmiddle a {
margin-right: 0.5em;
}
.authors {
display: none;
}
.comments {
display: none;
}
.tags {
display: none;
}
.formats {
display: none;
}
#book_details_dialog .right * {
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment