Hey Martin, 

Yes, please!  I like the changes you've made.

Thanks!

I made some changes to the comixology.css file if using the default cover art rather than the scraped covers.  

This fixed foldouts, but resulted in some slight clipping for off-sized covers.

Here's the code snippet if anyone's interested:

.thumb img {    
/*altered to fixed width and height and positioned so front/back cover art displays front cover    
some clipping on odd-sized covers*/    
position: relative;    
overflow: hidden;    
z-index: 2;    
bottom: 0;    
left: .5px;    
width: 156px;    
height: 245px;    
object-position: right bottom;    
object-fit: cover;    
}

Thanks for the great info!  I'll play around with it some more this weekend.  

Regarding #1, I was referring to this hover-over showing up for Latest and Random, but not showing up when browsing the comics grouped by folder:

Same type of deal when clicking to get a full page of New or Random, there's a Read button, but not when browsing grouped by folder:

Regarding #3, this is what I meant about the images:

Maybe the Plex theme is handling this if just using the cover image within the cbr/cbz file rather than a scrape.

I haven't leveraged the metadata/scraping yet as I haven't had a chance to look into how that would work with my file naming convention.  

Anyway, more playing around this weekend.  Thanks again for the response and the helpful info!

I'm switching over from the Plex theme to this one, since the community here seems more active and the theme looks great.  I am having a couple of issue though and was hoping someone could point me to the right places in the code. 

1.  The Read dropdown/hover-over does not appear if using folder groupings.  It works on the homepage and if grouping is set to none.  Is this by design or is it a bug?   I use up to 4 levels of nested folders to organize my collection, so a flat structure doesn't really work for me.  

2.  Same as above on the reading progress.  Only shows up on a flat structure.  I have some code I helped hack together from the Plex theme to show unread/page x of y/completed that works if necessary.  

3.  Image sizes for cover art are not showing a consistent size.  I think martin harrington may have figured this out.  Can you point me to the code block for this and/or share the code?

4.  File name getting truncated on the Read dropdown.  Again, I think martin figured this out as well.  Can you point me to the code block for this and/or share the code?

Thx!

lostndessence, Thanks for kickstarting this whole process!  Your initial reading enhancement is what, for me, took Ubooquity from a cataloging app to my go-to reader.  Really appreciate your work on this.

I'd love to see this in Comixology V2 as well!  Not having a working page count is the main reason I haven't switched over, and it seems like most of the enhancement work is going into that theme.  

Working great for me in Chrome and on a kiosk browser app I use for Android (works well as a full-screen web based reader).  Can confirm the issue with Firefox.  

At first glance I wasn't too sure about the unread on each book as it made it a bit busy.  But having the page count for trades and collections is really helpful.  Appreciate the work!

Cool, thanks for info.  I'll give it a shot based on the github code.  

Hey Jace,

Nice work on the count feature.  I couldn't get the info to render properly though based on the above code snippet.  Kept getting parsing errors around the modified_thumb_content code, and my javascript skills aren't very good (ok, my javascript is crap, I'm a data warehouse developer).  I wasn't able to get it to work properly on my system.  

However, I was able to hack together your counting code with the original to provide a less fancy version that gives a little more info than lostndessence's original.  No progress bar, but a page x of y and completed status text.  

Here's the hacked together code if anyone's interested:

// Anonymous "self-invoking" function
(function() {
    var startingTime = new Date().getTime();
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';
    script.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(script);

    // Poll for jQuery to come into existance
    var checkReady = function(callback) {
        if (window.jQuery) {
            callback(jQuery);
        } else {
            window.setTimeout(function() { checkReady(callback); }, 20);
        }
    };

    // Start polling...
    checkReady(function($) {
        //////////////////////////////////
        //Add currently reading condition to comic
        //////////////////////////////////
        $('.thumb a img').each(function(){
            raw_src = $(this).attr('src')
            page_num = '0';
            //sort comics from folders
            if (raw_src.search("folder") >= 0){
                //console.log("raw_src: "+raw_src);
            } else {
                //extract Comic ID
                thing = $(this);
                src = $(this).attr('src');                //console.log("source: "+src);
                $(this).closest('.thumb').append('<div class="numberblock"><div class="number"><span></span></div></div>');
                var comicid = src.split('/');            //console.log("Comic ID: "+comicid[2]);
                //get comic meta from server
                json_url = window.location.origin+"/user-api/bookmark?docId="+comicid[2];        //console.log("url: "+json_url);
                $.getJSON( json_url, function() {
                    console.log( "json_url success" );
                }).done(function( data ) {
                    current_this = thing;
                    if (data != null){
                        var items = [];
                        var c_id = '';
                        var c_pages = '';
                        var page_num = '';
                        $.each( data, function( key, val ) {
                            if (key == 'docId'){c_id = val;}
                            if (key == 'mark'){page_num = val;}
                        });
                        if (page_num != '0'){
                            // get total pages from server
                            content_url = window.location.origin+"/comicdetails/"+c_id;    //console.log("url: "+content_url);
                            $.get( content_url, function() {
                                //console.log( "content_url success" );
                            }).done(function( data ) {
                                details = $('<details>').append($.parseHTML(data));
                                size_div = $('#details_size', details).html();
                                c_pages = size_div.match(/\d+/)[0];

                                if (page_num >= (c_pages-1)) {
                                    progress_percent = 100;
                                    progress_string = "Completed";
                                } else {
                                    progress_percent = ((page_num/c_pages) * 100);
                                    page_int = Number(page_num)+1;
                                    progress_string = (page_int++) + " of " + c_pages;
                                }

                                    $("img[src*='"+c_id+"']").closest('.thumb').find('.number').html(progress_string);
                                    $("img[src*='"+c_id+"']").closest('.thumb').find('.numberblock').addClass("reading");

                            });
                        }
                        console.log("page_num "+page_num);
                    }
                }).fail(function(){});
            }
        console.log("triggered");
        });
    });
})();
// end Anonymous "self-invoking" function</details>

Love the reading tag, nice work!  Any updates on whether completed or a progress bar will be possible?

Thx!