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

Fixes #1486. Removing brittle width-specific images and switching to CSS3 calc() controls to make full bleed images. Works on iPad Pro and iPhone 8, who knows about the others. But I am expecting it to work since this should cover all expected orientations and size categories.

Browse source
This commit is contained in:
Samuel Clay 2021-05-25 16:20:16 -04:00
parent c79d05c813
commit 5295b8d190
3 changed files with 20 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
clients/ios/Classes/StoryDetailObjCViewController.m
View file

@ -2451,7 +2451,7 @@
NSString *alternateViewClass = @"";
if (!self.isPhoneOrCompact) {
if (appDelegate.detailViewController.storyTitlesOnLeft) {
if (!appDelegate.detailViewController.storyTitlesOnLeft) {
alternateViewClass = @"NB-titles-bottom";
} else {
alternateViewClass = @"NB-titles-left";

57
clients/ios/static/storyDetailView.css
View file

@ -546,9 +546,6 @@ div + p {
.NB-story img,
.NB-story video {
margin: 20px auto;
height: auto !important;
width: auto;
max-width: 100%;
display: none;
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in the web view */
@ -580,101 +577,83 @@ div + p {
}
.NB-story .NB-large-image {
max-width: 320px;
margin-left: -12px !important;
width: 320px !important;
width: calc(100% + 24px) !important;
height: auto !important;
}
.NB-width-375 .NB-story .NB-large-image {
max-width: 375px;
margin-left: -12px !important;
width: 375px !important;
width: calc(100% + 24px) !important;
}
.NB-width-414 .NB-story .NB-large-image {
max-width: 414px;
margin-left: -12px !important;
width: 414px !important;
width: calc(100% + 24px) !important;
}
.NB-ipad-narrow .NB-story .NB-large-image {
max-width: 500px;
margin-left: -30px !important;
width: 500px !important;
width: calc(100% + 60px) !important;
}
.NB-ipad-narrow.NB-titles-bottom .NB-story .NB-large-image {
max-width: 600px;
width: 600px !important;
width: calc(100% + 24px) !important;
}
.NB-ipad-pro-12-narrow .NB-story .NB-large-image {
max-width: 755px;
margin-left: -30px !important;
width: 755px !important;
width: calc(100% + 60px) !important;
}
.NB-ipad-pro-12-narrow.NB-width-1024 .NB-story .NB-large-image {
max-width: 1024px;
width: 1024px !important;
width: calc(100% + 60px) !important;
}
.NB-ipad-pro-10-narrow .NB-story .NB-large-image {
max-width: 565px;
margin-left: -30px !important;
width: 565px !important;
width: calc(100% + 60px) !important;
}
.NB-ipad-pro-10-narrow.NB-width-834 .NB-story .NB-large-image {
max-width: 834px;
width: 834px !important;
width: calc(100% + 60px) !important;
}
.NB-ipad-wide .NB-story .NB-large-image {
max-width: 656px;
margin-left: -90px !important;
width: 656px !important;
width: calc(100% + 180px) !important;
}
.NB-ipad-pro-12-wide .NB-story .NB-large-image {
max-width: 997px;
margin-left: -90px !important;
width: 997px !important;
width: calc(100% + 180px) !important;
}
.NB-ipad-pro-10-wide .NB-story .NB-large-image {
max-width: 743px;
margin-left: -90px !important;
width: 743px !important;
width: calc(100% + 180px) !important;
}
.NB-iphone-wide .NB-story .NB-large-image {
max-width: 568px;
margin-left: -30px !important;
width: 568px !important;
width: calc(100% + 60px) !important;
}
.NB-width-480 .NB-story .NB-large-image {
max-width: 480px;
margin-left: -30px !important;
width: 480px !important;
width: calc(100% + 60px) !important;
}
.NB-width-667 .NB-story .NB-large-image {
max-width: 667px;
margin-left: -30px !important;
width: 667px !important;
width: calc(100% + 60px) !important;
}
.NB-width-724 .NB-story .NB-large-image {
max-width: 724px;
margin-left: -30px !important;
width: 724px !important;
width: calc(100% + 60px) !important;
}
.NB-width-736 .NB-story .NB-large-image {
max-width: 736px;
margin-left: -30px !important;
width: 736px !important;
width: calc(100% + 60px) !important;
}
.NB-width-768 .NB-story .NB-large-image {
max-width: 768px;
margin-left: -30px !important;
width: 768px !important;
width: calc(100% + 60px) !important;
}
.NB-story .NB-small-image {

2
clients/ios/static/storyDetailView.js
View file

@ -78,7 +78,7 @@ function setImage(img) {
$img.parent().addClass('NB-contains-image')
}
} else if (width > 30 && height > 30) {
$img.attr('class', 'NB-medium-image');
$img.attr('class', 'NB-large-image');
if ($img.parent().attr('href')) {
$img.parent().addClass('NB-contains-image')
}