From 5295b8d19062370b741bb77e6a2210d6c9956583 Mon Sep 17 00:00:00 2001
From: Samuel Clay <samuel@ofbrooklyn.com>
Date: Tue, 25 May 2021 16:20:16 -0400
Subject: [PATCH] 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.

---
 .../Classes/StoryDetailObjCViewController.m   |  2 +-
 clients/ios/static/storyDetailView.css        | 57 ++++++-------------
 clients/ios/static/storyDetailView.js         |  2 +-
 3 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/clients/ios/Classes/StoryDetailObjCViewController.m b/clients/ios/Classes/StoryDetailObjCViewController.m
index fbdaf361f..75084ffe6 100644
--- a/clients/ios/Classes/StoryDetailObjCViewController.m
+++ b/clients/ios/Classes/StoryDetailObjCViewController.m
@@ -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";
diff --git a/clients/ios/static/storyDetailView.css b/clients/ios/static/storyDetailView.css
index 7baab58ee..21c51ad13 100644
--- a/clients/ios/static/storyDetailView.css
+++ b/clients/ios/static/storyDetailView.css
@@ -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 {
diff --git a/clients/ios/static/storyDetailView.js b/clients/ios/static/storyDetailView.js
index 312b42ce6..32283b256 100644
--- a/clients/ios/static/storyDetailView.js
+++ b/clients/ios/static/storyDetailView.js
@@ -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')
         }