Fix spacing of rating images on media page

This commit is contained in:
JonnyWong16 2021-03-21 17:50:45 -07:00
parent cba4c00ca0
commit ace9f7c294
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
2 changed files with 21 additions and 14 deletions

View file

@ -1923,7 +1923,7 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
color: #999; color: #999;
} }
.critic-rating { .critic-rating {
display: inline-block; display: flex;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -4073,41 +4073,48 @@ a:hover .overlay-refresh-image:hover {
background-image: url(../images/icons/most-concurrent-streams.svg); background-image: url(../images/icons/most-concurrent-streams.svg);
} }
.rating-image { .rating-image {
width: 51px;
height: 20px; height: 20px;
margin-left: 10px; margin-left: 10px;
margin-right: 5px;
display: inline-block; display: inline-block;
background-origin: content-box !important; background-origin: content-box !important;
background-size: contain !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-position: left !important; background-position: left !important;
text-align: right;
} }
.rating-imdb { .rating-imdb {
width: 62px !important; width: 36px;
background-image: url(../images/rating/imdb.svg); background-image: url(../images/rating/imdb.svg);
background-size: auto 20px;
} }
.rating-themoviedb { .rating-themoviedb {
width: 72px !important; width: 38px;
background-image: url(../images/rating/themoviedb.svg); background-image: url(../images/rating/themoviedb.svg);
background-size: auto 16px !important; background-size: auto 16px;
} }
.rating-thetvdb { .rating-thetvdb {
width: 72px !important; width: 36px;
background-image: url(../images/rating/thetvdb.svg); background-image: url(../images/rating/thetvdb.svg);
background-size: auto 36px !important; background-size: auto 36px;
} }
.rating-rottentomatos-ripe { .rating-rottentomatos-ripe {
width: 17px;
background-image: url(../images/rating/tomato-ripe.svg); background-image: url(../images/rating/tomato-ripe.svg);
background-size: auto 20px;
} }
.rating-rottentomatos-rotten { .rating-rottentomatos-rotten {
width: 17px;
background-image: url(../images/rating/tomato-rotten.svg); background-image: url(../images/rating/tomato-rotten.svg);
background-size: auto 20px;
} }
.rating-rottentomatos-upright { .rating-rottentomatos-upright {
width: 16px;
background-image: url(../images/rating/popcorn-upright.svg); background-image: url(../images/rating/popcorn-upright.svg);
background-size: auto 20px;
} }
.rating-rottentomatos-spilled { .rating-rottentomatos-spilled {
width: 19px;
background-image: url(../images/rating/popcorn-spilled.svg); background-image: url(../images/rating/popcorn-spilled.svg);
background-size: auto 20px;
} }
.transparent { .transparent {
background-color: transparent !important; background-color: transparent !important;

View file

@ -313,27 +313,27 @@ DOCUMENTATION :: END
% if data['audience_rating_image']: % if data['audience_rating_image']:
% if data['audience_rating_image'].startswith('imdb://'): % if data['audience_rating_image'].startswith('imdb://'):
<div class="critic-rating hidden-xs hidden-sm" title="${rating}"> <div class="critic-rating hidden-xs hidden-sm" title="${rating}">
<span class="rating-image rating-imdb"><strong>${rating}</strong></span> <span class="rating-image rating-imdb"></span><strong>${rating}</strong>
</div> </div>
% endif % endif
% if data['audience_rating_image'].startswith('themoviedb://'): % if data['audience_rating_image'].startswith('themoviedb://'):
<div class="critic-rating hidden-xs hidden-sm" title="${rating}"> <div class="critic-rating hidden-xs hidden-sm" title="${rating}">
<span class="rating-image rating-themoviedb"><strong>${get_percent(rating, 10)}%</strong></span> <span class="rating-image rating-themoviedb"></span><strong>${get_percent(rating, 10)}%</strong>
</div> </div>
% endif % endif
% if data['audience_rating_image'].startswith('thetvdb://'): % if data['audience_rating_image'].startswith('thetvdb://'):
<div class="critic-rating hidden-xs hidden-sm" title="${rating}"> <div class="critic-rating hidden-xs hidden-sm" title="${rating}">
<span class="rating-image rating-thetvdb"><strong>${get_percent(rating, 10)}%</strong></span> <span class="rating-image rating-thetvdb"></span><strong>${get_percent(rating, 10)}%</strong>
</div> </div>
% endif % endif
% if data['audience_rating_image'].startswith('rottentomatoes://'): % if data['audience_rating_image'].startswith('rottentomatoes://'):
<div class="critic-rating hidden-xs hidden-sm" title="${data['audience_rating']}"> <div class="critic-rating hidden-xs hidden-sm" title="${data['audience_rating']}">
<span class="rating-image rating-rottentomatos-${data['audience_rating_image'].rsplit('.')[-1]}"><strong>${get_percent(data['audience_rating'], 10)}%</strong></span> <span class="rating-image rating-rottentomatos-${data['audience_rating_image'].rsplit('.')[-1]}"></span><strong>${get_percent(data['audience_rating'], 10)}%</strong>
</div> </div>
% endif % endif
% if data['rating_image'].startswith('rottentomatoes://'): % if data['rating_image'].startswith('rottentomatoes://'):
<div class="critic-rating hidden-xs hidden-sm" title="${data['rating']}"> <div class="critic-rating hidden-xs hidden-sm" title="${data['rating']}">
<span class="rating-image rating-rottentomatos-${data['rating_image'].rsplit('.')[-1]}"><strong>${get_percent(data['rating'], 10)}%</strong></span> <span class="rating-image rating-rottentomatos-${data['rating_image'].rsplit('.')[-1]}"></span><strong>${get_percent(data['rating'], 10)}%</strong>
</div> </div>
% endif % endif
% else: % else: