From f918cf6c3917aa6610f9deb7ef3d8575047ac317 Mon Sep 17 00:00:00 2001
From: "vincent@cubedesigners.com"
 <vincent@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 18 Sep 2020 13:12:00 +0000
Subject: [PATCH] wait #3693 @1.5

---
 .../views/helpers/BackgroundBlock.php         |   4 +-
 js/002-common.js                              |   3 +
 js/420-features-details.js                    |  11 +-
 less/420-features-details.less                | 184 ++++++++++--------
 4 files changed, 104 insertions(+), 98 deletions(-)

diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php
index f6060f8..21e4527 100644
--- a/framework/application/views/helpers/BackgroundBlock.php
+++ b/framework/application/views/helpers/BackgroundBlock.php
@@ -44,8 +44,8 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
                     if (!isset($data['backgroundmobileimage'])) {
                         $pict = $this->view->imageCms($image_path);
                     } else {
-                        $pict = '<div class="desktopr">' . $this->view->imageCms($image_path) . '</div>';
-                        $pict .= '<div class="mobiler">' . $this->view->imageCms(CubeIT_View_Helper_ImageCms::getPath(CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']))) . '</div>';
+                        $pict = '<div class="desktopr">' . $this->view->imageCms($image_path, '', null, null, ['data-nowrapper' => true]) . '</div>';
+                        $pict .= '<div class="mobiler">' . $this->view->imageCms(CubeIT_View_Helper_ImageCms::getPath(CubeIT_Util_Cms::extractFile($data['backgroundmobileimage'])), '', null, null, ['data-nowrapper' => true]) . '</div>';
                     }
                 } else {
                     if (isset($data['backgroundmobileimage'])) {
diff --git a/js/002-common.js b/js/002-common.js
index c069565..d31dd86 100644
--- a/js/002-common.js
+++ b/js/002-common.js
@@ -116,6 +116,9 @@ function resize() {
 
 function resize_oam() {
     $('iframe.oam,iframe.zip').each(function () {
+        if ($(this).closest('.animationIframeWrapper').length > 0) {
+            return;
+        }
         var p = $(this).parent();
         var pw = $(p).outerWidth();
         var ph = $(p).outerHeight();
diff --git a/js/420-features-details.js b/js/420-features-details.js
index f5bb709..70a0dbd 100644
--- a/js/420-features-details.js
+++ b/js/420-features-details.js
@@ -1,14 +1,5 @@
 registerLoader(load_features_details, true);
 
 function load_features_details() {
-    $(window).on('fluidbookresize', resizeFeatureDetails);
-    resizeFeatureDetails();
-}
 
-function resizeFeatureDetails() {
-    $('article iframe').each(function () {
-        $(this).css('height', null);
-        var r = parseInt($(this).attr('width')) / parseInt($(this).attr('height'));
-        $(this).css('height', $(this).outerWidth() / r);
-    });
-}
\ No newline at end of file
+}
diff --git a/less/420-features-details.less b/less/420-features-details.less
index 8818516..5ab0d7e 100644
--- a/less/420-features-details.less
+++ b/less/420-features-details.less
@@ -1,90 +1,102 @@
 @import "000-imports";
 
 #featureDetails {
-	padding-top: 0;
-	color: @color-text;
-	article {
-		margin-top: 110px;
-		&:first-child {
-			margin-top: 0;
-		}
-
-		.content {
-			width: 50%;
-			padding: 8% 10% 0;
-			display: inline-block;
-			vertical-align: top;
-			font-size: 14px;
-
-			h3 {
-				font-family: @montserrat;
-				text-transform: uppercase;
-				font-weight: 500;
-				margin-bottom: 15px;
-			}
-		}
-		img {
-			display: inline-block;
-			width: 50%;
-			height: auto;
-			vertical-align: top;
-		}
-		iframe{
-			width: 50%;
-			vertical-align: top;
-		}
-
-		@media @m1280 {
-			&.ileft {
-				.content {
-					padding: 0 0 0 4%;
-				}
-			}
-
-			&.iright {
-				.content {
-					padding: 0 4% 0 0;
-				}
-			}
-		}
-
-		@media @m900 {
-			margin-top: 70px;
-
-			.content {
-				float: none !important;
-				width: 100%;
-				padding: 0 !important;
-				display: block;
-				margin-top: 20px;
-			}
-
-			img {
-				float: none !important;
-				width: 100%;
-				height: auto;
-				display: block;
-			}
-
-		}
-
-		&.ileft {
-			.content {
-				float: right;
-			}
-			img {
-				float: left;
-			}
-
-		}
-
-		&.iright {
-			.content {
-				float: left;
-			}
-			img {
-				float: right;
-			}
-		}
-	}
+  padding-top: 0;
+  color: @color-text;
+
+  article {
+    width: 100%;
+    margin-top: 110px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .content {
+      width: 50%;
+      padding: 8% 10% 0;
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+
+      h3 {
+        font-family: @montserrat;
+        text-transform: uppercase;
+        font-weight: 500;
+        margin-bottom: 15px;
+      }
+    }
+
+    img {
+      display: inline-block;
+      width: 50%;
+      height: auto;
+      vertical-align: top;
+    }
+
+    .animationSuperWrapper {
+      width: 50%;
+      vertical-align: top;
+    }
+
+    @media @m1280 {
+      &.ileft {
+        .content {
+          padding: 0 0 0 4%;
+        }
+      }
+
+      &.iright {
+        .content {
+          padding: 0 4% 0 0;
+        }
+      }
+    }
+
+    @media @m900 {
+      margin-top: 70px;
+
+      .content {
+        float: none !important;
+        width: 100%;
+        padding: 0 !important;
+        display: block;
+        margin-top: 20px;
+      }
+
+      img {
+        float: none !important;
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+
+      .animationSuperWrapper {
+        float: none !important;
+        width: 100%;
+      }
+
+    }
+
+    &.ileft {
+      .content {
+        float: right;
+      }
+
+      img, .animationSuperWrapper {
+        float: left;
+      }
+
+    }
+
+    &.iright {
+      .content {
+        float: left;
+      }
+
+      img, .animationSuperWrapper {
+        float: right;
+      }
+    }
+  }
 }
\ No newline at end of file
-- 
2.39.5