public-mirrors/NewsBlur
1
0
Fork 0
mirror of https://github.com/samuelclay/NewsBlur.git synced 2025-09-18 21:50:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better handling medium and large width images by allowing them room to grow based on the pane size.

Browse source
This commit is contained in:
Samuel Clay 2021-07-02 14:23:13 -04:00
parent f780c070c1
commit 0a81617d21
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
media/css/reader.css
View file

@ -3059,13 +3059,21 @@ body {
/* See http://www.newsblur.com/site/1031643/le-21me for width: auto, height: auto */
}
.NB-feed-story .NB-feed-story-content img.NB-medium-image {
max-width: max-content !important;
margin: 0;
width: auto !important;
}
.NB-feed-story .NB-feed-story-content img.NB-small-image {
max-width: max-content !important;
margin-left: 0;
margin: 0;
width: auto !important;
}
.NB-feed-story .NB-feed-story-content img.NB-large-image {
}
.NB-feed-story .NB-feed-story-content figure {
margin: 0;
}
.NB-feed-story .NB-feed-story-content video {
max-width: 100%;

8
media/js/newsblur/views/story_detail_view.js
View file

@ -129,7 +129,9 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
this.apply_starred_story_selections();
},
watch_images_load: function() {
watch_images_load: function () {
var pane_width = NEWSBLUR.reader.$s.$story_pane.width() - 32; // 28px to compensate for margin-left: -28px
this.$el.imagesLoaded(_.bind(function() {
var largest = 0;
var $largest;
@ -140,8 +142,10 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({
largest = this.width;
$largest = $(this);
}
if (this.naturalWidth >= 320 && this.naturalHeight >= 50) {
if (this.naturalWidth >= pane_width && this.naturalHeight >= 50) {
$(this).addClass('NB-large-image');
} else if (this.naturalWidth >= 100 && this.naturalHeight >= 50) {
$(this).addClass('NB-medium-image');
} else {
$(this).addClass('NB-small-image');
}