Thumbnails on mobile devices

[alanmilinovic]

Hi, is it possible to see thumbnails when on mobile device? It is kind of empty without movie poster images.

[Jalle19]

You can probably hack it with https://github.com/Jalle19/xbmc-video-server/wiki/Interface-customization

[alanmilinovic]

It is hard because you are changing width and height on some elements dynamically.

This is how far I went, and now on bigger resolutions it looks not good: item-grid .thumbnail .image-container, .episode-thumbnail, .cast, .media-flags { display: block; } .hidden-phone { display: block !important; }

.image-container { height: 140px; } .item-grid .caption, .actor-grid .caption { position: relative; padding: 6px; min-height: 59px; max-height: 59px; overflow: hidden; } .thumbnails>li { float: left; margin-bottom: 20px; margin-left: 20px; } [class*="span"] { float: left; min-height: 1px; margin-left: 20px; } .span2 { width: 140px; }

.actor-grid .thumbnail .image-container { height: unset; } .row-fluid [class*="span"] { display: block; float: left; min-height: 30px; margin-left: 20px; box-sizing: border-box; } .row-fluid .span2 { width: 14.89361702%; }

[Jalle19]

Not really sure what to do about this, it's hard to make togglable options for this since it's all done in CSS. IMO the interface is way too crowded with pictures if you use thumbnails on mobile devices.

[alanmilinovic]

To me interface looks very nice with pictures and empty without pictures.

[alanmilinovic]

Ok I made a hack, not that I like it but it is working. If someone is interested you need to create custom-styles.css and put this code inside:

@media (max-width: 767px) and (max-width: 979px) { .item-grid .thumbnail .image-container, .episode-thumbnail, .cast, .media-flags { display: inline-block; } .hidden-phone { display: unset !important; }

.item-grid .caption, .actor-grid .caption {
    min-height: 59px;
    max-height: 59px;
}

.thumbnails>li {
    float: left;
    margin-bottom: 20px;
    margin-left: 20px;
}

.actor-grid .thumbnail .image-container {
    height: 240px;
}
.row-fluid [class*="span"] {
    float: left;
    margin-left: 20px;
}
.row-fluid .span2 {
    width: 170px;
}

}

@media (max-width: 767px) { .item-grid .thumbnail .image-container { height: 240px; } .span2 { width: 170px; } }

@media (max-width: 979px) { .item-grid .thumbnail .image-container { height: 240px; } .span2 { width: 170px; } }

[Jalle19]

I had a look at this and it's too complicated to change it so it looks nice. The grid view collapses to rows when the viewport is small enough. It was hard enough to get it working like it works now, getting it to work nicely would require some fairly major CSS changes that I'm not comfortable doing.

[alanmilinovic]

Yes, I can understand that. However my css that is overwriting styles is working great.